Computergrafik

Web GL Shader Beispiel

← WebGL Shader Programs | ● | WebGL Textures →

Der fertige Web GL Shader.

<html>

<script type="text/javascript"
        src="http://raw.githubusercontent.com/toji/gl-matrix/master/dist/gl-matrix-min.js">
</script>

<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>

<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>

<script type="text/javascript">

   var gl;

   function createBuffer(data, items, size)
   {
      var buffer = gl.createBuffer();
      gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW);

      buffer.numItems = items;
      buffer.itemSize = size;

      return(buffer);
   }

   var triVtxBuffer;
   var triColBuffer;

   function initBuffers()
   {
      var vertices = [
         0.0, 1.0, 0.0,
         -1.0, -1.0, 0.0,
         1.0, -1.0, 0.0
      ];

      triVtxBuffer = createBuffer(vertices, 3, 3);

      var colors = [
         1.0, 0.0, 0.0, 1.0,
         0.0, 1.0, 0.0, 1.0,
         0.0, 0.0, 1.0, 1.0
      ];

      triColBuffer = createBuffer(colors, 3, 4);
   }

   function getShader(id)
   {
      var shaderScript = document.getElementById(id);

      if (!shaderScript)
         return(null);

      var str = "";
      var k = shaderScript.firstChild;
      while (k)
      {
         if (k.nodeType == 3) str += k.textContent;
         k = k.nextSibling;
      }

      console.log("load "+shaderScript.type+": "+str);

      var shader;

      if (shaderScript.type == "x-shader/x-fragment")
         shader = gl.createShader(gl.FRAGMENT_SHADER);
      else if (shaderScript.type == "x-shader/x-vertex")
         shader = gl.createShader(gl.VERTEX_SHADER);
      else
         return(null);

      gl.shaderSource(shader, str);
      gl.compileShader(shader);

      if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS))
      {
         alert(gl.getShaderInfoLog(shader));
         return(null);
      }

      return(shader);
   }

   var shader;

   function initShader()
   {
      var fragmentShader = getShader("simple-frag-shader");
      var vertexShader = getShader("simple-vrtx-shader");

      shader = gl.createProgram();
      gl.attachShader(shader, vertexShader);
      gl.attachShader(shader, fragmentShader);
      gl.linkProgram(shader);

      if (!gl.getProgramParameter(shader, gl.LINK_STATUS))
         alert("Could not create shader program!");

      gl.useProgram(shader);

      shader.vertexPositionAttribute = gl.getAttribLocation(shader, "vertexPosition");
      gl.enableVertexAttribArray(shader.vertexPositionAttribute);

      shader.vertexColorAttribute = gl.getAttribLocation(shader, "vertexColor");
      gl.enableVertexAttribArray(shader.vertexColorAttribute);

      shader.mvpMatrixUniform = gl.getUniformLocation(shader, "mvpMatrix");
   }

   function setMatrices(pMatrix, mvMatrix)
   {
      var mvpMatrix = mat4.create();
      mat4.multiply(pMatrix, mvMatrix, mvpMatrix);

      gl.uniformMatrix4fv(shader.mvpMatrixUniform, false, mvpMatrix);
   }

   function renderStrip(vtxBuffer, colBuffer)
   {
      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.drawArrays(gl.TRIANGLE_STRIP, 0, vtxBuffer.numItems);
   }

   var angle=0.5;

   function drawScene()
   {
      gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);

      gl.clearColor(0.0, 0.0, 0.0, 1.0);
      gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

      var pMatrix = mat4.create();
      var mvMatrix = mat4.create();

      mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);

      mat4.lookAt([0, 0, 1], [0, 0, 0], [0, 1, 0], mvMatrix);
      mat4.translate(mvMatrix, [0.0, 0.0, -10.0]);
      mat4.rotate(mvMatrix, angle, [0.0, 1.0, 0.0]);

      setMatrices(pMatrix, mvMatrix);

      renderStrip(triVtxBuffer, triColBuffer);
   }

   function webGLStart()
   {
      var canvas = document.getElementById("webgl-canvas");

      try
      {
         gl = canvas.getContext("experimental-webgl");
      }
      catch (e)
      {
         alert("Your browser does not support WebGL!");
      }

      gl.viewportWidth = canvas.width;
      gl.viewportHeight = canvas.height;

      gl.enable(gl.DEPTH_TEST);

      initBuffers();
      initShader();

      drawScene();
   }

</script>

<body onload="webGLStart();">
   <canvas id="webgl-canvas" width=500 height=500> </canvas>
</body>

</html>
[Get Code]


← WebGL Shader Programs | ● | WebGL Textures →

Options: