Create a custom shader example

[Catharz]

I've been trying to use the compositor to create my own shader, but it seems to be very closely tied to the current melon shader implementation.

A simple example, just using a phong light (or similar) would help to make this much clearer to people (like myself) who are very new to webgl.

[parasyte]

Hi! I know this was mentioned somewhere on the gitter, but the idea for the compositor was that the shaders would have to be tightly coupled with it to get the appropriate batching behavior with games that require multiple textures.

For this reason, the compositor is designed to be modular, can can be replaced easily in the call to me.video.init. It passes the options Object to the me.WebGLRenderer constructor, which accepts a compositor option to reference a custom compositor.

You would want to write a custom compositor to change the shader layout. It is possible to write new shaders with the existing compositor, you just have to deal with the tight coupling and multiple textures.

That said, yes it would be nice to have an example with a custom shader. Maybe even a few examples; one could be a minimal compositor which has different performance characteristics, but less code. Another could do realtime lighting or wavy water effects, etc, but builds on the minimal example.

[obiot]

like they say, better later than never ! So with the overall code revamping in melonJS2, and the latest API changes in the upcoming 15.0.0 version, renderable objects now define a shader component property that can be used to define a custom shader to render renderable.

basically it is now as simple as :

    let sprite = new me.Sprite(0, 0, {...));
    sprite.shader = me.GLShader(gl, vertex, fragment);

and that's it ! it's still missing a proper way to specify user specific uniforms, only works with texture based objects for now, and there are still a couple of bugs to fix when mixing compositors or switching from the default (built-in) shader to a custom one within the same draw call, but it's already working quite nicely.

this used the previously introduced GLShader class : https://melonjs.github.io/melonJS/docs/melonjs/GLShader.html