phoboslab/Ejecta — pull request #321 by jrouault (2014-02-04 05:13:27+00:00)
Title: Shader management

Hi there!

I'm proposing this PR to start a discussion about shader integration.
Ejecta is a great tool but it would be nice to push things a bit further to fully enjoy hardware acceleration.

The code I pushed allows devs to integrate and use new fragment shaders more easily and manage them directly from the JS part.

A simple code such as the one following allows to apply tints on any Image or Canvas:

```
var w = window.innerWidth;
var h = window.innerHeight;

var canvas = document.getElementById('canvas');
canvas.width = w;
canvas.height = h;

var ctx = canvas.getContext('2d');

var img = new Image();
var imageLoaded = false;
img.onload = function () {
imageLoaded = true;
};
img.src = "path/image.png";

// The new part
var material = new Ejecta.Material();
material.shader = "Tint";
material.setUniform("tintAdd", "glUniform4f", [ 0.0, 0.0, 0.4, 0.0 ] );
material.setUniform("tintMul", "glUniform4f", [ 0.5, 0.5, 2.0, 1.0 ] );
img.material = material;

var animate = function() {
if(imageLoaded) {
ctx.drawImage(img, 0, 0);
}
};

setInterval( animate, 16 );
```

Any thought or ideas on this? A special architecture wanted based on particular specifications?

What could be nice would be to just have to drop a new shader on the 'Shaders' folder instead of having to additionally create an appropriate class natively for each new shader. It could be done too.