|
|
| (7 intermediate revisions by 4 users not shown) |
| Line 1: |
Line 1: |
| Here is the complete code for the textured spinning box (SpiritBox.html):
| | To see the source code for SpiritBox.html [https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/sdk/demos/webkit/SpiritBox.html click this link] and choose "view source" in your browser. |
| <source lang="javascript">
| |
| <!DOCTYPE html>
| |
| <html>
| |
| <head>
| |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
| |
| <title>Spinning WebGL Box</title>
| |
| | |
| <script src="resources/CanvasMatrix.js" type="text/javascript"> </script>
| |
| <script src="resources/utils3d.js" type="text/javascript"> </script>
| |
| <script id="vshader" type="x-shader/x-vertex">
| |
| uniform mat4 u_modelViewProjMatrix;
| |
| uniform mat4 u_normalMatrix;
| |
| uniform vec3 lightDir;
| |
| | |
| attribute vec3 vNormal;
| |
| attribute vec4 vTexCoord;
| |
| attribute vec4 vPosition;
| |
| | |
| varying float v_Dot;
| |
| varying vec2 v_texCoord;
| |
| | |
| void main()
| |
| {
| |
| gl_Position = u_modelViewProjMatrix * vPosition;
| |
| v_texCoord = vTexCoord.st;
| |
| vec4 transNormal = u_normalMatrix * vec4(vNormal, 1);
| |
| v_Dot = max(dot(transNormal.xyz, lightDir), 0.0);
| |
| }
| |
| </script>
| |
| | |
| <script id="fshader" type="x-shader/x-fragment">
| |
| uniform sampler2D sampler2d;
| |
| | |
| varying float v_Dot;
| |
| varying vec2 v_texCoord;
| |
| | |
| void main()
| |
| {
| |
| vec2 texCoord = vec2(v_texCoord.s, 1.0 - v_texCoord.t);
| |
| vec4 color = texture2D(sampler2d, texCoord);
| |
| color += vec4(0.1, 0.1, 0.1, 1);
| |
| gl_FragColor = vec4(color.xyz * v_Dot, color.a);
| |
| }
| |
| </script>
| |
| | |
| <script>
| |
| function init()
| |
| {
| |
| // Initialize
| |
| var gl = initWebGL(
| |
| // The id of the Canvas Element
| |
| "example",
| |
| // The ids of the vertex and fragment shaders
| |
| "vshader", "fshader",
| |
| // The vertex attribute names used by the shaders.
| |
| // The order they appear here corresponds to their index
| |
| // used later.
| |
| [ "vNormal", "vColor", "vPosition"],
| |
| // The clear color and depth values
| |
| [ 0, 0, 0, 1 ], 10000);
| |
| | |
| // Set some uniform variables for the shaders
| |
| gl.uniform3f(gl.getUniformLocation(gl.program, "lightDir"), 0, 0, 1);
| |
| gl.uniform1i(gl.getUniformLocation(gl.program, "sampler2d"), 0);
| |
| | |
| // Enable texturing
| |
| gl.enable(gl.TEXTURE_2D);
| |
| | |
| // Create a box. On return 'gl' contains a 'box' property with
| |
| // the BufferObjects containing the arrays for vertices,
| |
| // normals, texture coords, and indices.
| |
| gl.box = makeBox(gl);
| |
| | |
| // Load an image to use. Returns a WebGLTexture object
| |
| spiritTexture = loadImageTexture(gl, "resources/spirit.jpg");
| |
| | |
| // Create some matrices to use later and save their locations in the shaders
| |
| gl.mvMatrix = new CanvasMatrix4();
| |
| gl.u_normalMatrixLoc = gl.getUniformLocation(gl.program, "u_normalMatrix");
| |
| gl.normalMatrix = new CanvasMatrix4();
| |
| gl.u_modelViewProjMatrixLoc =
| |
| gl.getUniformLocation(gl.program, "u_modelViewProjMatrix");
| |
| gl.mvpMatrix = new CanvasMatrix4();
| |
| | |
| // Enable all of the vertex attribute arrays.
| |
| gl.enableVertexAttribArray(0);
| |
| gl.enableVertexAttribArray(1);
| |
| gl.enableVertexAttribArray(2);
| |
| | |
| // Set up all the vertex attributes for vertices, normals and texCoords
| |
| gl.bindBuffer(gl.ARRAY_BUFFER, gl.box.vertexObject);
| |
| gl.vertexAttribPointer(2, 3, gl.FLOAT, false, 0, 0);
| |
| | |
| gl.bindBuffer(gl.ARRAY_BUFFER, gl.box.normalObject);
| |
| gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
| |
| | |
| gl.bindBuffer(gl.ARRAY_BUFFER, gl.box.texCoordObject);
| |
| gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 0, 0);
| |
| | |
| // Bind the index array
| |
| gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gl.box.indexObject);
| |
| | |
| return gl;
| |
| }
| |
| | |
| width = -1;
| |
| height = -1;
| |
| | |
| function reshape(gl)
| |
| {
| |
| var canvas = document.getElementById('example');
| |
| if (canvas.clientWidth == width && canvas.clientHeight == height)
| |
| return;
| |
| | |
| width = canvas.clientWidth;
| |
| height = canvas.clientHeight;
| |
| | |
| // Set the viewport and projection matrix for the scene
| |
| gl.viewport(0, 0, width, height);
| |
| gl.perspectiveMatrix = new CanvasMatrix4();
| |
| gl.perspectiveMatrix.lookat(0, 0, 7, 0, 0, 0, 0, 1, 0);
| |
| gl.perspectiveMatrix.perspective(30, width/height, 1, 10000);
| |
| }
| |
| | |
| function drawPicture(gl)
| |
| {
| |
| // Make sure the canvas is sized correctly.
| |
| reshape(gl);
| |
| | |
| // Clear the canvas
| |
| gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
| |
| | |
| // Make a model/view matrix.
| |
| gl.mvMatrix.makeIdentity();
| |
| gl.mvMatrix.rotate(currentAngle, 0,1,0);
| |
| gl.mvMatrix.rotate(20, 1,0,0);
| |
| | |
| // Construct the normal matrix from the model-view matrix and pass it in
| |
| gl.normalMatrix.load(gl.mvMatrix);
| |
| gl.normalMatrix.invert();
| |
| gl.normalMatrix.transpose();
| |
| gl.uniformMatrix4fv(gl.u_normalMatrixLoc, false,
| |
| gl.normalMatrix.getAsWebGLFloatArray());
| |
| | |
| // Construct the model-view * projection matrix and pass it in
| |
| gl.mvpMatrix.load(gl.mvMatrix);
| |
| gl.mvpMatrix.multRight(gl.perspectiveMatrix);
| |
| gl.uniformMatrix4fv(gl.u_modelViewProjMatrixLoc, false,
| |
| gl.mvpMatrix.getAsWebGLFloatArray());
| |
| | |
| // Bind the texture to use
| |
| gl.bindTexture(gl.TEXTURE_2D, spiritTexture);
| |
| | |
| // Draw the cube
| |
| gl.drawElements(gl.TRIANGLES, gl.box.numIndices, gl.UNSIGNED_BYTE, 0);
| |
| | |
| // Finish up.
| |
| gl.flush();
| |
| | |
| // Show the framerate
| |
| framerate.snapshot();
| |
| | |
| currentAngle += incAngle;
| |
| if (currentAngle > 360)
| |
| currentAngle -= 360;
| |
| }
| |
| | |
| function start()
| |
| {
| |
| var c = document.getElementById("example");
| |
| var w = Math.floor(window.innerWidth * 0.9);
| |
| var h = Math.floor(window.innerHeight * 0.9);
| |
| | |
| c.width = w;
| |
| c.height = h;
| |
| | |
| var gl = init();
| |
| currentAngle = 0;
| |
| incAngle = 0.5;
| |
| framerate = new Framerate("framerate");
| |
| setInterval(function() { drawPicture(gl) }, 10);
| |
| }
| |
| </script>
| |
| <style type="text/css">
| |
| canvas {
| |
| border: 2px solid black;
| |
| }
| |
| </style>
| |
| </head>
| |
| | |
| <body onload="start()">
| |
| <canvas id="example">
| |
| If you're seeing this your web browser doesn't support the <canvas>> element. Ouch!
| |
| </canvas>
| |
| </body>
| |
| | |
| </html>
| |
| </source>
| |
| </source>
| |