Html5 Shader Demo Example

Hi all

I requested gigatron if it's possible to add shader behind the scene ? And then he tryed to write fragment shader into
canvas..
Here is the demo example using shadertoy js MIT licenced on mmf2 dev screen;
Please login to see this link.

To make an extension he used edif ... it's nightmare but working here..

If you want shader on your html5 games please contact me the shader you want must domain public or request the author to use it;

Regards

Sloxone

Another example with texture loader;

Please login to see this link.

Quote from JohnArtbox

looks impressive. How compatible is it?

This extension is targeted for HTML5 exporter for MMF2;

Quote from fnkycoldmadeanr

Can you get it to sample the canvas and overlay it?..

I'am working on effect for sprite and the entire scene ... stay tuned;

Hi here is another extension demo , this time is filters for html5 exporter;
This extension include some working blend like Xor,Lighter,Screen,Hard Lite ....(not in live demo)

This extension is not free, understand how much time I spent on computer to program debugging etc ...

If you want this extension PM me and i will send you a copy , you will be registered and got unlimited new releases..
Tested on Firefox and Chrome not other browsers..

Live example here :

Please login to see this link.

Regards

PS : I am working on glsl extension and other javascript extension like adds and starfields fx etc... stay tuned thanks ;

Hi all;
This is the first beta release of shader extension for Html5 runtime;

Instruction : Copy Shader.js to : Data/Runtime/Html5/
Copy Shader.mfx to: extension/unicode/

1- Create html5 project;

2- Build and run ; nothing happened ; So
3- copy frag.fx to: resources/
resources contain now / frag.fx

4- insert glslextension object on your projet:

5- Build and run

normally you can now see the shader runnin on browser page;
Tested on Firefox and Chrome

The extension is command free; you must do nothing yet;
Please test and tell me what's wrong.. i will include some other options to change values etc...

For shaders go to shadertoy and copy shader and past to frag.fx ... this file is used to shader
Shaders must be untextured... no texture included...

Hope you like it

Regards

Quote from CapitaineCaverne

Bonjour j ai test j ai pas eu de problème j ai test les 3 shader elle on bien fonctionne.
bon-courage pour le développement d extension et shader.
Merci pour le Partage.

Bonjour CapitaineCaverne
In english
Glad you like it; yesterday late in night tryed to write uniform float using shadere extension and implemented vec3 writing to shader for colors
or vec3 values.
So performed, write float, vec2,vec3,and vec4 values working nice... i will publish soon; By the way MMF2 canvas is 2D canvas no webgl rendering ;

demo of new version : try to change variables;

Please login to see this link.

regards;

And this one;

Please login to see this link.

Quote from fnkycoldmadeanr

Can you get it to sample the canvas and overlay it?..

Hi for this i must rewrite Web glrenderer to replace canvas2d Standardrenderer of MMF2 html5 exporter.

If i start to write webgl renderer it will take one year for me ..

But i made little hack to copy canvas and draw again but it's slow and cause memory leak.. hope so;

Look this demo just to test the speed;

Please login to see this link.

[MENTION=5114]Yves[/MENTION] nous devrions avoir le choix du rendu 2d ou webgl1 ou webgl2 .. pour exploiter les shaders dans l'exporter html5 svp merci.
We must have choice to render methode 2d or webgl for exploiting shaders on html5 exporter please thanks;

Quote from Yves

We're working on it.

Thank you very much , this will be awesome;

The last shader demo before releasing usable extension;
Now effect on simple image and effect surface to MMF2canvas ;
It's much faster than above fx.
play with parameters ..

Please login to see this link.

Regards

Forgot to include this great fx;
Please login to see this link.

And the power of MMF2 canvas with glsl extension;
Space harrier floor example use mouse to control Sprite;

Please login to see this link.

Hello,

Filters for html5 exporter is out on the Clickstore
This extension include some working blend like Xor,Lighter,Screen,Hard Lite ...

Here:
Please login to see this link.

Quote from NaitorStudios

Can we reorder the effect on top or below other objects?

Filters fx target all objects or the entire screen you can not order objects. See the demo you can see all are affected by the filter fx;

Regards