Extend WebGL to support multiple shaders per program?

[matthijsgroen]

Crafty/src/graphics/webgl-layer.js

Lines 209 to 225 in f4a79d7

	_makeProgram: function(shader) {
	var gl = this.context;
	var fragmentShader = this._compileShader(shader.fragmentCode, gl.FRAGMENT_SHADER);
	var vertexShader = this._compileShader(shader.vertexCode, gl.VERTEX_SHADER);
	var shaderProgram = gl.createProgram();
	gl.attachShader(shaderProgram, vertexShader);
	gl.attachShader(shaderProgram, fragmentShader);
	gl.linkProgram(shaderProgram);
	if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
	throw ("Could not initialise shaders");
	}
	shaderProgram.viewport = gl.getUniformLocation(shaderProgram, "uViewport");
	return shaderProgram;
	},

I'm investigating if I could extend the Particles component with WebGL support. Of examples seen elsewhere, the trick is to create a texture buffer, and have one shader shuffling values around in the buffer, and another shader rendering points based on values of that texture. (this is at least my understanding of it). But currently only a single vertex and fragment shader can be linked to a webgl program.

(See: https://github.com/nopjia/webgl-particles/blob/master/app/js/graphics.js#L310)

Also what I see online (in the repo of @nopjia, but also in examples on the mozilla site) is that after the linking of the programs, shaders are detached and deleted. Crafty does not do this. Is this intended? I do not possess enough knowledge about WebGL to know the impact of keeping it (or removing it for that matter!)

[starwed]

It should be possible for a WebGL entity to just define their own program, without using the built in helper methods -- IIRC they just need to define the setViewportUniforms, renderBatch, and switchTo methods. I'm not sure, but that might let you use the sort of multishader approach you're talking about.

Also what I see online (in the repo of @nopjia, but also in examples on the mozilla site) is that after the linking of the programs, shaders are detached and deleted. Crafty does not do this. Is this intended? I do not possess enough knowledge about WebGL to know the impact of keeping it (or removing it for that matter!)

Quite possibly they can be detached/deleted without issue once linked; I can look into that. (Although feel free to just add the code for that and report back if there are any issues! :) )

[matthijsgroen]

I have implemented a particle emitter last week using WebGL, it is almost stable. When it is, I would like to contribute it here, but I think should get some extra pair of 👀 before merging.

[matthijsgroen]

The code so far is here:

https://github.com/speedlazer/speedlazer/blob/master/src/components/WebGLParticles.js
https://github.com/speedlazer/speedlazer/blob/master/src/components/ParticleEmitter.js