Pixel shader - have a need to reuse

Two days ago I discovеred this pretty framework Wade. It's awesome and allows to do much things.Here some my examples from simple to complex








1. In all examples I hardly used custom pixel shaders for animation. And now I want to reuse shaders, save them as project file, as javascript file in project and apply files to another sprites. But now there is no option... There is real need to do that - save shader content as file with uniforms, and reuse it on other sprites by aplying to sprites shaders list.

Also, multishaders (multipass) on one sprite and on postprocess - will be very useful for some multipass techniques as bluring and another complex effects.

Also, it seems that postprocess on scene doesn't work on sprites with custom shader. May be I'm wrong.

2. There is some problem to deploy source code on server (seganelservice.ru) by copy source code to folder. As is - server show error 404. You can found it on browser console at address http://seganelservice.ru/WebGL/WadeError/ where I simply copied source code, downloaded from Wade.

Errors from console:

/WebGL/WadeError/scene1_night_glows_posteffect_hard_rain.wsc:1 Failed to load resource: the server responded with a status of 404 (Not Found)
wade.js:469 Failed to load JSON data from scene1_night_glows_posteffect_hard_rain.wsc : SyntaxError: Unexpected token < in JSON at position 0
Wade.error @ wade.js:469
wade.js:469 Unable to load json file scene1_night_glows_posteffect_hard_rain.wsc

I solved this problem by renaming scene1_night_glows_posteffect_hard_rain.wsc то *.js and by patching app.js. But error is strange, could you help me - how to solve it right?

Comments 61 to 71 (71 total)

I think this is so, because main loop is not render loop... So. correct FPS can make only Gio


this show CPU load not GPU, 

i think you must use chrome rendering tools in console  in

console - more tool - rendering 


But it is possible to show real FPS in wade. In three.js it is made with stats.js https://github.com/mrdoob/stats.js/


It shows real FPS (viewable by user on screen) in onRender cycle. This cycle works not 60 times per sec, but right away from previous cycle (60fps is maximum for webgl. But if there is brakes - it will update slower)

function animate() {





You can use stats.js too!

You can add this code to any page using the following bookmarklet:

Stats js will be works with wade 


I tried, but with no result )))) May be my fault, or may be wade restrictions... I simply don't see it. Also, I can't add stats.update() to render cycle...


just open console and paste bookmarklet code


I have a question - why you use a 

var k = wade.getScreenWidth()/wade.getScreenHeight();

If you change wade layer mode to 'container' - there is no need in this property


Next question - if you make an platformer game - why your snow stick to layer

In real game player move, and all background move to him, i.e. you must stick snow to player object, and move layer with snow with player speed


>If you change wade layer mode to 'container' - there is no need in this property

I didn't know, thanks!

>Next question - if you make an platformer game - why your snow stick to layer? In real game player move, and all background move to him, i.e. you must stick snow to player object, and move layer with snow with player speed

Yes, this will be new shader uniform "scroll speed", wich just will be added inside shader to wind. But there is more difficult thing - you must stick snow posteffect to different layers with different params, if you want real depth-imitation. I'll show such demo, but later. It will be real true render, but firstly my friend-designer have to draw layers content.


Stats.js works with bookmarklet code in console. But don't work from app.js. May be my fault, don't know... Such simple things, but very hard for me )) If it were integrated statistic in wade...



I fill currently my own shaders library and think...

Why not allow to select custom user shader from list? Maybe files with extension *.glsl? It would be very conviniently.

And more convinient - if custom shader uniforms will be loaded too...


Just to be sure I understand, do you mean that we should look for files with a glsl extension in the project, parse them and add them to the list?

If that's what you mean, I think it's a great idea. Certainly worth doing.


Yes, thanks!

Post a reply
Add Attachment
Submit Reply
Login to Reply