Computergrafik

Web GL Shader Programs

← WebGL Buffers | ● | WebGL Beispiel →

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>
[Get Code]
<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>
[Get Code]

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);
[Get Code]

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);
[Get Code]

Dann können z.B. Triangle Strips gezeichnet werden:

gl.drawArrays(gl.TRIANGLE_STRIP, 0, vtxBuffer.numItems);
[Get Code]


← WebGL Buffers | ● | WebGL Beispiel →

Options: