Computergrafik
Web GL Shader Programs
WebGL (und OpenGL ES) besitzt keine Fixed Function Pipeline. Daher müssen auch einfache WebGL Programmer immer einen Fragment- und Vertex-Shader bereitstellen.
Diese geschieht mit einem Script-Tag, z.B. anhand eines einfachen Shaders:
- Vertex Position und Farbe als Attribut
- Projektions- und ModelView-Matrix als Uniform
- Baryzentrische Interpolation der Farbe mittels Varying
<script id="simple-frag-shader" type="x-shader/x-fragment">
#ifdef GL_ES
precision highp float;
#endif
varying vec4 color;
void main()
{
gl_FragColor = color;
}
</script>
#ifdef GL_ES
precision highp float;
#endif
varying vec4 color;
void main()
{
gl_FragColor = color;
}
</script>
<script id="simple-vrtx-shader" type="x-shader/x-vertex">
attribute vec3 vertexPosition;
attribute vec4 vertexColor;
varying vec4 color;
uniform mat4 mvpMatrix;
void main()
{
color = vertexColor;
gl_Position = mvpMatrix * vec4(vertexPosition, 1.0);
}
</script>
attribute vec3 vertexPosition;
attribute vec4 vertexColor;
varying vec4 color;
uniform mat4 mvpMatrix;
void main()
{
color = vertexColor;
gl_Position = mvpMatrix * vec4(vertexPosition, 1.0);
}
</script>
Die kombinierte Projektions- und Modelview-Matrix kann nun dem Shader als Uniform mitgeteilt werden:
var mvpMatrix = mat4.create();
mat4.multiply(pMatrix, mvMatrix, mvpMatrix);
gl.uniformMatrix4fv(shader.mvpMatrixUniform, false, mvpMatrix);
mat4.multiply(pMatrix, mvMatrix, mvpMatrix);
gl.uniformMatrix4fv(shader.mvpMatrixUniform, false, mvpMatrix);
Und die Vertex- und Farb-VBOs können dem Shader als Attribute mitgeteilt werden:
gl.bindBuffer(gl.ARRAY_BUFFER, vtxBuffer);
gl.vertexAttribPointer(shader.vertexPositionAttribute, vtxBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, colBuffer);
gl.vertexAttribPointer(shader.vertexColorAttribute, colBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.vertexAttribPointer(shader.vertexPositionAttribute, vtxBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, colBuffer);
gl.vertexAttribPointer(shader.vertexColorAttribute, colBuffer.itemSize, gl.FLOAT, false, 0, 0);
Dann können z.B. Triangle Strips gezeichnet werden:
gl.drawArrays(gl.TRIANGLE_STRIP, 0, vtxBuffer.numItems);