En boks

Fragment shader | Vertex shader | Javascript | Interaktiv løsning

Hva

En enkel gul boks

Vi skal lage en gul boks som roterer. Eksempelet er modifisert fra Mozilla Development Network [1] .

Det kan være lurt å kikke på OpenGL Shading Language (GLSL) Reference Pages [2] for å få en forklaring av de enkelte metodene i shading-eksemplene og OpenGL ES 2.0 Reference Pages [3] for å få en forklaring av de enkelte metodene i javascriptet.

Fragment shader

Fragment shaderen arbeider med en farge og en lysretning. Begge er satt fra vertex shader. Merk at de har kvalifiseringen varying.

varying mediump vec3 vLighting;
varying lowp vec4 vColor;        
void main(void) {
  gl_FragColor = vec4(vColor.rgb * vLighting, vColor.a);
}

Vertex shader

De tre variablene: uMVMatrix, uPMatrix og uNormalMatrix blir satt fra Javascriptkoden. aVertexPosition representerer det aktuelle punktet, slik det er ordnet i en buffer fra Javascriptet og aVertexNormal er normalen i punktet.

Merk at hele lyssettingen etableres i shaderen.

attribute mediump vec3 aVertexNormal; // or in
attribute mediump vec3 aVertexPosition;
attribute vec4 aVertexColor;
    
uniform mediump mat4 uNormalMatrix;
uniform mediump mat4 uMVMatrix;
uniform mediump mat4 uPMatrix;
varying lowp vec4 vColor;
varying mediump vec3 vLighting;
    
void main(void) {
    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
    // Apply lighting effect        
    mediump vec3 ambientLight = vec3(0.6, 0.6, 0.6);
    mediump vec3 directionalLightColor = vec3(0.5, 0.5, 0.75);
    mediump vec3 directionalVector = vec3(0.85, 0.8, 0.75);
    mediump vec4 transformedNormal = uNormalMatrix * vec4(aVertexNormal, 1.0);
    mediump float directional = max(dot(transformedNormal.xyz, directionalVector), 0.0);
    vLighting = ambientLight + (directionalLightColor * directional);
    // set color
    vColor = aVertexColor;
    // since we have a uniform color we may as well:
    //vColor=vec4(1.0,  1.0,  0.0,  1.0);
}

Javascript

Javascriptet som handterer vår tegning er inkludert som egen fil. De viktigste delene av denne koden er kommentert funksjon for funksjon nedenfor. Hele fila ser slik ut: cubescript.js

Det kan være lurt å kikke på OpenGL ES 2.0 Reference Pages [3] for å få en forklaring av de enkelte metodene.

Følgende globale variable er definert.

var canvas;
var gl;
var cubeVerticesBuffer;
var cubeVerticesIndexBuffer;
var cubeVerticesColorBuffer;
var cubeVerticesNormalBuffer;
var cubeRotation = 0.0;
var lastCubeUpdateTime = 0;
var mvMatrix;
var perspectiveMatrix;
var shaderProgram;
var vertexPositionAttribute;
var vertexNormalAttribute;
var vertexColorAttribute;

Funkjsonen start() kalles typisk enten ved body onload, eller ved et script i bunnen (etter canvas) i selve websiden. I dette eksempelet er det denne funksjone som drar hele jobben.

function start() {
  canvas = document.getElementById("glcanvas");
  initWebGL(canvas); 
  
  if (gl) {
    gl.clearColor(0.5, 0.5, 0.5, 1.0); 
    gl.clearDepth(1.0); 
    gl.enable(gl.DEPTH_TEST); 
    gl.depthFunc(gl.LEQUAL); 
      
    initShaders();
     
    initBuffers();
      
    setInterval(drawScene, 15);
  }
}

Funksjonen initWebGL() forsøker å sette opp WebGL i canvas-elementet. Merk at konstanten "experimental-webgl" skal bytte sut med "webgl" etterhvert som denne teknologien modnes hos nettleserne.

function initWebGL() {
    gl = null;
    var names = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"];
    for(var i = 0; i < names.length; i++){
        try {gl = canvas.getContext("experimental-webgl");}
        catch(e) {}
        if(gl){break;}
    }
    if (!gl) {
        alert("Unable to initialize WebGL. Your browser may not support it.");
    }
}

I funksjonen initBuffers() setter vi opp de punktene som beskriver modellen vår og ssom etterhvert skal sendes til vertex-shaderen.

function initBuffers() {
  
  // Buffer for the cube's vertices.  
  cubeVerticesBuffer = gl.createBuffer(); 
  gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesBuffer);
  
  // Vertices for the cube.  
  var vertices = [
    // Front face
    -1.0, -1.0,  1.0,
     1.0, -1.0,  1.0,
     1.0,  1.0,  1.0,
    -1.0,  1.0,  1.0,
    
    // Back face
    -1.0, -1.0, -1.0,
    -1.0,  1.0, -1.0,
     1.0,  1.0, -1.0,
     1.0, -1.0, -1.0,
    
    // Top face
    -1.0,  1.0, -1.0,
    -1.0,  1.0,  1.0,
     1.0,  1.0,  1.0,
     1.0,  1.0, -1.0,
    
    // Bottom face
    -1.0, -1.0, -1.0,
     1.0, -1.0, -1.0,
     1.0, -1.0,  1.0,
    -1.0, -1.0,  1.0,
    
    // Right face
     1.0, -1.0, -1.0,
     1.0,  1.0, -1.0,
     1.0,  1.0,  1.0,
     1.0, -1.0,  1.0,
    
    // Left face
    -1.0, -1.0, -1.0,
    -1.0, -1.0,  1.0,
    -1.0,  1.0,  1.0,
    -1.0,  1.0, -1.0
  ];
  
  // Pass the list of vertices into WebGL to build the shape.
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
  
  // Now set up the colors for the faces.
  // Since we use a uniform color, we may solved this in the vertex-shader
  // see comment
  var generatedColors = [];
  // all 6 X 4 =24 corner colors is yellow
  for (j=0; j<24; j++) {
    generatedColors = generatedColors.concat([1.0,  1.0,  0.0,  1.0]);
  }
  cubeVerticesColorBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesColorBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(generatedColors), gl.STATIC_DRAW);
  // Specify the indices into the vertex array for each face's vertices. 
  cubeVerticesIndexBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
  
  // Each face as two triangles
  var cubeVertexIndices = [
    0,  1,  2,      0,  2,  3,    // front
    4,  5,  6,      4,  6,  7,    // back
    8,  9,  10,     8,  10, 11,   // top
    12, 13, 14,     12, 14, 15,   // bottom
    16, 17, 18,     16, 18, 19,   // right
    20, 21, 22,     20, 22, 23    // left
  ]
  
  // Send the element array to GL  
  gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,
      new Uint16Array(cubeVertexIndices), gl.STATIC_DRAW);
 // Normals for each vertex
 cubeVerticesNormalBuffer = gl.createBuffer();
      gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesNormalBuffer);
       
      var vertexNormals = [
        // Front
         0.0,  0.0,  1.0,
         0.0,  0.0,  1.0,
         0.0,  0.0,  1.0,
         0.0,  0.0,  1.0,         
        // Back
         0.0,  0.0, -1.0,
         0.0,  0.0, -1.0,
         0.0,  0.0, -1.0,
         0.0,  0.0, -1.0,         
        // Top
         0.0,  1.0,  0.0,
         0.0,  1.0,  0.0,
         0.0,  1.0,  0.0,
         0.0,  1.0,  0.0,         
        // Bottom
         0.0, -1.0,  0.0,
         0.0, -1.0,  0.0,
         0.0, -1.0,  0.0,
         0.0, -1.0,  0.0,         
        // Right
         1.0,  0.0,  0.0,
         1.0,  0.0,  0.0,
         1.0,  0.0,  0.0,
         1.0,  0.0,  0.0,         
        // Left
        -1.0,  0.0,  0.0,
        -1.0,  0.0,  0.0,
        -1.0,  0.0,  0.0,
        -1.0,  0.0,  0.0
      ];       
      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexNormals), gl.STATIC_DRAW);      
}

Funksjonen drawScene() skiller seg fra det vi kjenner fra tradisjonell OpenGL på den måten at vi ikke lenger "tegner" hjørne for hjørne. I stedet sender vi en punktliste til shaderen, sammen med de to matrisene (modelview og perspective). Deretter starter vi tegningen med gl.drawArrays

function drawScene() {
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  
  perspectiveMatrix = makePerspective(45, 640.0/480.0, 0.1, 100.0);
  
  loadIdentity();
  
  // Move the drawing a bit from default eye-pos
  mvTranslate([-0.0, 0.0, -6.0]);
  
  // Save the current matrix, then rotate before we draw. 
  mvPushMatrix();
  mvRotate(cubeRotation, [1, 0, 1]);
   
  // Draw the cube by binding the array buffer to the cube's vertices
  // array, setting attributes, and pushing it to GL. 
  gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesBuffer);
  gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
  
  // Set the color attribute for the vertices. 
  gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesColorBuffer);
  gl.vertexAttribPointer(vertexColorAttribute, 4, gl.FLOAT, false, 0, 0);
  
  // Set the normal attribute for the vertices. 
  gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesNormalBuffer);
  gl.vertexAttribPointer(vertexNormalAttribute, 3, gl.FLOAT, false, 0, 0);
  
  // Draw the cube.
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
  setMatrixUniforms();
  gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);
  
  // Restore the original matrix  
  mvPopMatrix();
  
  // Update the rotation for the next draw, if it's time to do so.
  var currentTime = (new Date).getTime();
  if (lastCubeUpdateTime) {
    var delta = currentTime - lastCubeUpdateTime;    
    cubeRotation += (30 * delta) / 1000.0;
  }  
  lastCubeUpdateTime = currentTime;
}

Funksjonen setMatrixUniforms() setter status på transformasjonsmatriser til shaderen.

function setMatrixUniforms() {
    var pUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
    gl.uniformMatrix4fv(pUniform, false, new Float32Array(perspectiveMatrix.flatten()));
    var mvUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
    gl.uniformMatrix4fv(mvUniform, false, new Float32Array(mvMatrix.flatten()));
  
    var normalMatrix = mvMatrix.inverse();
    normalMatrix = normalMatrix.transpose();
    var nUniform = gl.getUniformLocation(shaderProgram, "uNormalMatrix");
    gl.uniformMatrix4fv(nUniform, false, new Float32Array(normalMatrix.flatten()));
}

De to funksjonene initShaders() og getShader() laster inn shaderne, kompilerer dem og etablerer shaderprogrammet.

function initShaders() {
  var fragmentShader = getShader(gl, "shader-fs");
  var vertexShader = getShader(gl, "shader-vs");
  
  // Create the shader program  
  shaderProgram = gl.createProgram();
  gl.attachShader(shaderProgram, vertexShader);
  gl.attachShader(shaderProgram, fragmentShader);
  gl.linkProgram(shaderProgram);
  
  // ok? 
  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
    alert("Unable to initialize the shader program.");
  }
  
  gl.useProgram(shaderProgram);
  
  // connect shader attribute to buffers.
  // attributes, understood as attributes to verteces 
  vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
  gl.enableVertexAttribArray(vertexPositionAttribute);
  
  vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor");
  gl.enableVertexAttribArray(vertexColorAttribute);
  
 vertexNormalAttribute = gl.getAttribLocation(shaderProgram, "aVertexNormal");
  gl.enableVertexAttribArray(vertexNormalAttribute);
}

function getShader(gl, id) {
  var shaderScript = document.getElementById(id);
  
  // ok? 
  if (!shaderScript) {
    return null;
  }
  
  // Building the shader source string. 
  var theSource = "";
  var currentChild = shaderScript.firstChild;
  
  while(currentChild) {
    if (currentChild.nodeType == 3) {
      theSource += currentChild.textContent;
    }   
    currentChild = currentChild.nextSibling;
  }
  
  // What type of shader, based on its MIME type.  
  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;  // Unknown shader type
  }
  
  // Send the source to the shader object
  gl.shaderSource(shader, theSource);
  
  // Compile the shader program  
  gl.compileShader(shader);
  
  // See if it compiled successfully  
  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    alert("An error occurred compiling the shaders: " + gl.getShaderInfoLog(shader));
    return null;
  }
  
  return shader;
}

Dette er resultatet:

Du kan også inspisere resultatet og kildekoden på en enklere side:
index.html http://www.it.hiof.no/~borres/dw/wgl/cube/index.html

Interaktiv løsning

Vi kan gjøre framstillingen interaktiv ved å introdusere følgende funksjon, som kalles etter at canvas er identifisert:

function initMousing(){
  canvas.onmousedown = function ( ev ){
     drag  = 1;
     xOffs = ev.clientX;  
     yOffs = ev.clientY;
  }
  canvas.onmouseup = function ( ev ){
     drag  = 0;
     xOffs = ev.clientX;  
     yOffs = ev.clientY;
  }
  canvas.onmousemove = function ( ev ){
     if ( drag == 0 ) return;
     if ( ev.shiftKey ) {
        transl *= 1 + (ev.clientY - yOffs)/1000;
        //yRot = - xOffs + ev.clientX; 
    }
     else {
        yRot += - xOffs + ev.clientX;  
        xRot += - yOffs + ev.clientY; 
    }
     xOffs = ev.clientX;;
     yOffs = ev.clientY;
     drawScene();
  }
 }

DrawScene endres slik:

function drawScene() {
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  
  perspectiveMatrix = makePerspective(45, 640.0/480.0, 0.1, 100.0);
  
  loadIdentity();
  
  mvPushMatrix();
  // zoom and rotate according to user action
  mvTranslate([-0.0, 0.0, transl]);  
  mvRotate(xRot, [1, 0, 0]);
  mvRotate(yRot, [0, 1, 0]);
   
  // Draw the cube by binding the array buffer to the cube's vertices
  gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesBuffer);
  gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
  
  // Set the color attribute for the vertices. 
  gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesColorBuffer);
  gl.vertexAttribPointer(vertexColorAttribute, 4, gl.FLOAT, false, 0, 0);
  
  // Set the normal attribute for the vertices. 
  gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesNormalBuffer);
  gl.vertexAttribPointer(vertexNormalAttribute, 3, gl.FLOAT, false, 0, 0);
  
  // Draw the cube.
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
  setMatrixUniforms();
  gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);
  
  // Restore the original matrix 
    mvPopMatrix();
}

Du kan inspisere resultatet og kildekoden her:
index.html http://www.it.hiof.no/~borres/dw/wgl/cube/indexIA.html

Referanser

WebGL Mozilla Developer Network https://developer.mozilla.org/en/WebGL 14-05-2011

OpenGL Shading Language (GLSL) Reference Pages Opengl.org www.opengl.org/sdk/docs/manglsl/ 14-05-2011

OpenGL ES Software Development Kit Khronos Group www.khronos.org/opengles/sdk/docs/man/ 14-05-2011

Sylvester sylvester.jcoglan.com/ 14-05-2011

Vedlikehold

Børre Stenseth, mai 2011

( Velkommen ) WebGL >En boks ( En smultring )