blob: b1a5989999e15b2904505514cd126b3a0360fd76 [file] [log] [blame]
<!DOCTYPE html>
<!--
/*
* Copyright (C) 2009 Apple Inc. All Rights Reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions
* are met:
* 1. Redistributions of source code must retain the above copyright
* notice, this list of conditions and the following disclaimer.
* 2. Redistributions in binary form must reproduce the above copyright
* notice, this list of conditions and the following disclaimer in the
* documentation and/or other materials provided with the distribution.
*
* THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
* IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
* PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR
* CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
* EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
* PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
* PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
* OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
* (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Spinning WebGL Box</title>
<script src="resources/J3DI.js"> </script>
<script src="resources/J3DIMath.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">
#ifdef GL_ES
precision mediump float;
#endif
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.5, 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 J3DIMatrix4();
gl.u_normalMatrixLoc = gl.getUniformLocation(gl.program, "u_normalMatrix");
gl.normalMatrix = new J3DIMatrix4();
gl.u_modelViewProjMatrixLoc =
gl.getUniformLocation(gl.program, "u_modelViewProjMatrix");
gl.mvpMatrix = new J3DIMatrix4();
// 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.width == width && canvas.height == height)
return;
width = canvas.width;
height = canvas.height;
// Set the viewport and projection matrix for the scene
gl.viewport(0, 0, width, height);
gl.perspectiveMatrix = new J3DIMatrix4();
gl.perspectiveMatrix.perspective(30, width/height, 1, 10000);
gl.perspectiveMatrix.lookat(0, 0, 7, 0, 0, 0, 0, 1, 0);
}
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(20, 1,0,0);
gl.mvMatrix.rotate(currentAngle, 0,1,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.normalMatrix.setUniform(gl, gl.u_normalMatrixLoc, false);
// Construct the model-view * projection matrix and pass it in
gl.mvpMatrix.load(gl.perspectiveMatrix);
gl.mvpMatrix.multiply(gl.mvMatrix);
gl.mvpMatrix.setUniform(gl, gl.u_modelViewProjMatrixLoc, false);
// 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 &lt;canvas>&gt; element. Ouch!
</canvas>
<div id="framerate"></div>
</body>
</html>