240 lines
8.0 KiB
HTML
240 lines
8.0 KiB
HTML
<!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 vColor;
|
|
attribute vec4 vPosition;
|
|
|
|
varying float v_Dot;
|
|
varying vec4 v_Color;
|
|
|
|
void main()
|
|
{
|
|
gl_Position = u_modelViewProjMatrix * vPosition;
|
|
v_Color = vColor;
|
|
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
|
|
|
|
varying float v_Dot;
|
|
varying vec4 v_Color;
|
|
|
|
void main()
|
|
{
|
|
gl_FragColor = vec4(v_Color.xyz * v_Dot, v_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);
|
|
|
|
gl.console.log("Starting init...");
|
|
|
|
// Set up a uniform variable for the shaders
|
|
gl.uniform3f(gl.getUniformLocation(gl.program, "lightDir"), 0, 0, 1);
|
|
|
|
// 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);
|
|
|
|
// Set up the array of colors for the cube's faces
|
|
var colors = new Uint8Array(
|
|
[ 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, // v0-v1-v2-v3 front
|
|
1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, // v0-v3-v4-v5 right
|
|
0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, // v0-v5-v6-v1 top
|
|
1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, // v1-v6-v7-v2 left
|
|
1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, // v7-v4-v3-v2 bottom
|
|
0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1 ] // v4-v7-v6-v5 back
|
|
);
|
|
|
|
// Set up the vertex buffer for the colors
|
|
gl.box.colorObject = gl.createBuffer();
|
|
gl.bindBuffer(gl.ARRAY_BUFFER, gl.box.colorObject);
|
|
gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);
|
|
|
|
// 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 colors
|
|
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.colorObject);
|
|
gl.vertexAttribPointer(1, 4, gl.UNSIGNED_BYTE, 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');
|
|
var windowWidth = window.innerWidth - 20;
|
|
var windowHeight = window.innerHeight - 40;
|
|
if (windowWidth == width && windowHeight == height)
|
|
return;
|
|
|
|
width = windowWidth;
|
|
height = windowHeight;
|
|
canvas.width = width;
|
|
canvas.height = 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);
|
|
|
|
// 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;
|
|
}
|
|
.text {
|
|
position:absolute;
|
|
top:100px;
|
|
left:20px;
|
|
font-size:2em;
|
|
color: blue;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body onload="start()">
|
|
<canvas id="example">
|
|
If you're seeing this your web browser doesn't support the <canvas>> element. Ouch!
|
|
</canvas>
|
|
<div class="text">This is some text over the canvas</div>
|
|
<div id="framerate"></div>
|
|
</body>
|
|
|
|
</html>
|