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.
@MurdexStudio
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://codepen.io/omarshe7ta/pen/xVeWWy
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 )
print("pass")
end
update = function()
end
draw = function()
screen.render( stage )
end
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
https://microstudio.io/i/TinkerSmith/glitch/
I can't believe this works.
I moved the code (copy and paste :-) hehe) from shadertoy.
https://microstudio.io/i/Loginus/shader4/
:embed https://microstudio.io/Loginus/shader4/
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?
Cheers
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 :)
@TinkerSmith
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
.