The demos I have seen all define shaders in html, and get them by name. Is there a way in javascript to create them from strings?
Instead of:
var fragmentShader = getShader(gl, "shader-fs");
something like:
var fragmentShader = createShader(gl,
"fragment code here "
);
Neither of the existing answers, I don't think, actually answer the question of how to set the source of a WebGL shader from a string in JavaScript. The missing bit is shaderSource:
const vertexShaderSource = `
attribute vec4 vertexPosition;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
void main() {
gl_Position = projectionMatrix * modelViewMatrix * vertexPosition;
}
`;
const vertexShader = context.createShader(context.VERTEX_SHADER);
context.shaderSource(vertexShader, vertexShaderSource);
context.compileShader(vertexShader);
I use this
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
and you can create your own shader program with GLSL in JavaScript like this
var fragmentShaderText =
[
'precision mediump float;',
'',
'varying vec3 fragColor;',
'void main()',
'{',
' gl_FragColor = vec4(fragColor, 1.0);',
'}',
].join('\n');
The best way I have seen so far:
var vertexShader = `attribute vec3 aVertexPosition;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
void main(void) {
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
}`;
