Is threre a way to use shaders in the basic graphics API?

I'm quite new to this engine and I really like it. But after trying out PIXI and realizing that I hated it. I wanna use shaders with the default graphics API. is that possible? If no just tell me I'll switch game engines. If yes then please tell me how.

What kind of shaders are you looking for? For basic manipulation some blending modes are available.

@ThinkerSmith I'm only planning to add shaders like:

  • Vingette, RGB Shift and Scanlines.


I think you are wrong to blame MicroStudio. Shaders are difficult. To make them, you need to know the Shader language and the PIXI library and how it is embedded in MicroStudio. It cannot be transferred so that it will be beginner-friendly. Too many intermediate steps.

I wanted this code to work in MicroStudio. But it doesn't work - although it doesn't show any errors. I think it's because this code is for an earlier version of PIXI.


https://microstudio.io/i/Loginus/pixishader/ << not work .

https://microstudio.dev/i/this_name_is_taken/realtimeraytracing/ << work .

The smallest shader possible :-)

init = function() 

  stage = new PIXI.Container()
// Def shader
 shaderCode = """
    precision mediump float;

    void main() {
        gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0); // Green color

  // Create Shader
  simpleShader = new PIXI.Filter(0, shaderCode,0)
  // Create texture
  background = new PIXI.Sprite(PIXI.Texture.WHITE)
  background.width = screen.width
  background.height = screen.height
  background.filters = [simpleShader]
  stage.addChild( background )

update = function() 

draw = function() 
  screen.render( stage )

Vingette - is just an overlay using alpha or the blending modes
Scanlines - there is a CRT plugin
RGB shift - I had examples that sadly got lost during the big server crash 😕

So simple things like that can be done inside microStudio without Pixi

By what I remember I used @gilles screen capture tool and then manipulated the pixels either one by one, or line by line (for distorted scan lines)

Check the image manipulation functions


I can't believe this works.

I moved the code (copy and paste :-) hehe) from shadertoy.


:embed https://microstudio.io/Loginus/shader4/

Looks amazing 😍

PS @Loginus

You state you copy/pasted the code from Shadertoy.
But the part in microStudio looks slightly different than the source shown on shadertoy. Am I looking at the wrong original source, or did you have to modify it to make it work?


One step closer (still not understanding how those shaders work, lol)

:embed https://microstudio.io/TinkerSmith/shader42/EP8CURYG/

From 'Book of Shaders' I can take the source as is :)


There were so many emotions that this code worked that I overused the term "copy and paste" a bit. I had to make a few changes because ShaderToy and PIXI use different variable names.

Shader Inputs

uniform vec3      iResolution;           // viewport resolution (in pixels)
uniform float     iTime;                 // shader playback time (in seconds)
uniform float     iTimeDelta;            // render time (in seconds)
uniform float     iFrameRate;            // shader frame rate
uniform int       iFrame;                // shader playback frame
uniform float     iChannelTime[4];       // channel playback time (in seconds)
uniform vec3      iChannelResolution[4]; // channel resolution (in pixels)
uniform vec4      iMouse;                // mouse pixel coords. xy: current (if MLB down), zw: click
uniform samplerXX iChannel0..3;          // input channel. XX = 2D/Cube
uniform vec4      iDate;                 // (year, month, day, time in seconds)
uniform float     iSampleRate;           // sound sample rate (i.e., 44100)

After changing to the ones used by PIXI (e.g. fragCoord >> gl_FragCoord, fragColor >> gl_FragColor) you can easily transfer the code.

These changes are minor.

The only problem is debugging - because I can only get error information by reading the console with ctrl-shift-i .

Post a reply



Validate your e-mail address to participate in the community