8 changed files with 868 additions and 798 deletions
-
283cube.html
-
252cube.js
-
27index.html
-
62main.css
-
181square.html
-
151square.js
-
385texture.html
-
325texture.js
@ -0,0 +1,252 @@ |
|||||
|
var projectionMatrix, modelViewMatrix; |
||||
|
var rotationAxis; |
||||
|
var shaderProgram, shaderVertexPositionAttribute |
||||
|
var shaderVertexColorAttribute; |
||||
|
var shaderProjectionMatrixUniform, shaderModelViewMatrixUniform; |
||||
|
|
||||
|
var duration = 5000; // ms
|
||||
|
var currentTime = Date.now(); |
||||
|
|
||||
|
function initWebGL(canvas) { |
||||
|
var gl = null; |
||||
|
var msg = "Your browser does not support WebGL, " + |
||||
|
"or it is not enabled by default."; |
||||
|
try { |
||||
|
gl = canvas.getContext("experimental-webgl"); |
||||
|
} |
||||
|
catch (e) { |
||||
|
msg = "Error creating WebGL Context!: " + e.toString(); |
||||
|
} |
||||
|
if (!gl) { |
||||
|
alert(msg); |
||||
|
throw new Error(msg); |
||||
|
} |
||||
|
|
||||
|
return gl; |
||||
|
} |
||||
|
|
||||
|
function initViewport(gl, canvas) { |
||||
|
gl.viewport(0, 0, canvas.width, canvas.height); |
||||
|
} |
||||
|
|
||||
|
// Create the vertex, color, and index data for a
|
||||
|
// multicolored cube
|
||||
|
function createCube(gl) { |
||||
|
// Vertex Data
|
||||
|
var vertexBuffer; |
||||
|
vertexBuffer = gl.createBuffer(); |
||||
|
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); |
||||
|
var verts = [ |
||||
|
// 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 |
||||
|
]; |
||||
|
gl.bufferData( |
||||
|
gl.ARRAY_BUFFER, |
||||
|
new Float32Array(verts), |
||||
|
gl.STATIC_DRAW); |
||||
|
// Color data
|
||||
|
var colorBuffer = gl.createBuffer(); |
||||
|
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer); |
||||
|
var faceColors = [ |
||||
|
[1.0, 0.0, 0.0, 1.0], // Front face
|
||||
|
[0.0, 1.0, 0.0, 1.0], // Back face
|
||||
|
[0.0, 0.0, 1.0, 1.0], // Top face
|
||||
|
[1.0, 1.0, 0.0, 1.0], // Bottom face
|
||||
|
[1.0, 0.0, 1.0, 1.0], // Right face
|
||||
|
[0.0, 1.0, 1.0, 1.0] // Left face
|
||||
|
]; |
||||
|
var vertexColors = []; |
||||
|
for (var i in faceColors) { |
||||
|
var color = faceColors[i]; |
||||
|
for (var j=0; j < 4; j++) { |
||||
|
vertexColors = vertexColors.concat(color); |
||||
|
} |
||||
|
} |
||||
|
gl.bufferData( |
||||
|
gl.ARRAY_BUFFER, |
||||
|
new Float32Array(vertexColors), |
||||
|
gl.STATIC_DRAW); |
||||
|
// Index data (defines the triangles to be drawn)
|
||||
|
var cubeIndexBuffer = gl.createBuffer(); |
||||
|
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeIndexBuffer); |
||||
|
var cubeIndices = [ |
||||
|
0, 1, 2, 0, 2, 3, // Front face
|
||||
|
4, 5, 6, 4, 6, 7, // Back face
|
||||
|
8, 9, 10, 8, 10, 11, // Top face
|
||||
|
12, 13, 14, 12, 14, 15, // Bottom face
|
||||
|
16, 17, 18, 16, 18, 19, // Right face
|
||||
|
20, 21, 22, 20, 22, 23 // Left face
|
||||
|
]; |
||||
|
gl.bufferData( |
||||
|
gl.ELEMENT_ARRAY_BUFFER, |
||||
|
new Uint16Array(cubeIndices), |
||||
|
gl.STATIC_DRAW); |
||||
|
var cube = { |
||||
|
buffer:vertexBuffer, |
||||
|
colorBuffer:colorBuffer, |
||||
|
indices:cubeIndexBuffer, |
||||
|
vertSize:3, |
||||
|
nVerts:24, |
||||
|
colorSize:4, |
||||
|
nColors: 24, |
||||
|
nIndices:36, |
||||
|
primtype:gl.TRIANGLES}; |
||||
|
|
||||
|
return cube; |
||||
|
} |
||||
|
|
||||
|
function initMatrices(canvas) { |
||||
|
modelViewMatrix = mat4.create(); |
||||
|
mat4.translate( |
||||
|
modelViewMatrix, modelViewMatrix, [0, 0, -4.6]); |
||||
|
|
||||
|
// Create a project matrix with 45 degree field of view
|
||||
|
projectionMatrix = mat4.create(); |
||||
|
mat4.perspective(projectionMatrix, Math.PI / 4, |
||||
|
canvas.width / canvas.height, 1, 10000); |
||||
|
|
||||
|
rotationAxis = vec3.create(); |
||||
|
vec3.normalize(rotationAxis, [1, 1, 1]); |
||||
|
} |
||||
|
|
||||
|
function createShader(gl, id, type) { |
||||
|
var shader; |
||||
|
var str = document.getElementById(id).text; |
||||
|
if (type == "fragment") { |
||||
|
shader = gl.createShader(gl.FRAGMENT_SHADER); |
||||
|
} else if (type == "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; |
||||
|
} |
||||
|
|
||||
|
function initShader(gl, vertex, fragment) { |
||||
|
// load and compile the fragment and vertex shader
|
||||
|
var fragmentShader = createShader(gl, fragment, "fragment"); |
||||
|
var vertexShader = createShader(gl, vertex, "vertex"); |
||||
|
|
||||
|
// link them together into a new program
|
||||
|
shaderProgram = gl.createProgram(); |
||||
|
gl.attachShader(shaderProgram, vertexShader); |
||||
|
gl.attachShader(shaderProgram, fragmentShader); |
||||
|
gl.linkProgram(shaderProgram); |
||||
|
|
||||
|
// get pointers to the shader params
|
||||
|
shaderVertexPositionAttribute = gl.getAttribLocation( |
||||
|
shaderProgram, "vertexPos"); |
||||
|
gl.enableVertexAttribArray(shaderVertexPositionAttribute); |
||||
|
shaderVertexColorAttribute = gl.getAttribLocation( |
||||
|
shaderProgram, "vertexColor"); |
||||
|
gl.enableVertexAttribArray(shaderVertexColorAttribute); |
||||
|
|
||||
|
shaderProjectionMatrixUniform = gl.getUniformLocation( |
||||
|
shaderProgram, "projectionMatrix"); |
||||
|
shaderModelViewMatrixUniform = gl.getUniformLocation( |
||||
|
shaderProgram, "modelViewMatrix"); |
||||
|
|
||||
|
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { |
||||
|
alert("Could not initialise shaders"); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function draw(gl, obj) { |
||||
|
// clear the background (transparent)
|
||||
|
gl.clearColor(0.0, 0.0, 0.0, 0.0); |
||||
|
// // clear the background (black)
|
||||
|
// gl.clearColor(0.0, 0.0, 0.0, 1.0);
|
||||
|
gl.enable(gl.DEPTH_TEST); |
||||
|
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); |
||||
|
|
||||
|
// set the shader to use
|
||||
|
gl.useProgram(shaderProgram); |
||||
|
|
||||
|
// connect up the shader parameters: vertex position,
|
||||
|
// color, and projection/model matrices
|
||||
|
// set up the buffers
|
||||
|
gl.bindBuffer(gl.ARRAY_BUFFER, obj.buffer); |
||||
|
gl.vertexAttribPointer(shaderVertexPositionAttribute, |
||||
|
obj.vertSize, gl.FLOAT, false, 0, 0); |
||||
|
gl.bindBuffer(gl.ARRAY_BUFFER, obj.colorBuffer); |
||||
|
gl.vertexAttribPointer(shaderVertexColorAttribute, |
||||
|
obj.colorSize, gl.FLOAT, false, 0, 0); |
||||
|
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, obj.indices); |
||||
|
gl.uniformMatrix4fv(shaderProjectionMatrixUniform, false, |
||||
|
projectionMatrix); |
||||
|
gl.uniformMatrix4fv(shaderModelViewMatrixUniform, false, |
||||
|
modelViewMatrix); |
||||
|
|
||||
|
// draw the object
|
||||
|
gl.drawElements( |
||||
|
obj.primtype, obj.nIndices, gl.UNSIGNED_SHORT, 0); |
||||
|
} |
||||
|
|
||||
|
function animate() { |
||||
|
var now = Date.now(); |
||||
|
var deltat = now - currentTime; |
||||
|
currentTime = now; |
||||
|
var fract = deltat / duration; |
||||
|
var angle = Math.PI * 2 * fract; |
||||
|
mat4.rotate( |
||||
|
modelViewMatrix, modelViewMatrix, angle, rotationAxis); |
||||
|
} |
||||
|
|
||||
|
function run(gl, cube) { |
||||
|
requestAnimationFrame(function() { run(gl, cube); }); |
||||
|
draw(gl, cube); |
||||
|
animate(); |
||||
|
} |
||||
|
|
||||
|
function startGl() { |
||||
|
// Get A WebGL context
|
||||
|
var canvas = document.getElementById("cube"); |
||||
|
var gl = initWebGL(canvas); |
||||
|
var obj = createCube(gl); |
||||
|
|
||||
|
initViewport(gl, canvas); |
||||
|
initMatrices(canvas); |
||||
|
initShader( |
||||
|
gl, |
||||
|
"cube-vertex-shader", |
||||
|
"cube-fragment-shader"); |
||||
|
run(gl, obj); |
||||
|
} |
||||
|
/* vim: set ts=4 sw=4: */ |
||||
@ -1,17 +1,28 @@ |
|||||
<html> |
<html> |
||||
<head> |
<head> |
||||
<title> Oh my Gosh </title> |
<title> Oh my Gosh </title> |
||||
|
<link rel="stylesheet" href="main.css"> |
||||
</head> |
</head> |
||||
|
|
||||
<body> |
<body> |
||||
<h1>Some WebGL tests</h1> |
|
||||
<hr> |
|
||||
<ul> |
|
||||
<li><a href="square.html">square</a></li> |
|
||||
<li><a href="cube.html">cube</a></li> |
|
||||
<li><a href="texture.html">texture</a></li> |
|
||||
</ul> |
|
||||
<hr> |
|
||||
|
<div id="background"></div> |
||||
|
<div class="content text"> |
||||
|
<h1>Some WebGL tests</h1> |
||||
|
<p> |
||||
|
This is my WebGL playground. The examples are taken from the |
||||
|
book <a href="http://oreil.ly/program-3d-apps-html5-webGL"> |
||||
|
Programming 3D Applications with HTML5 and WebGL</a> written |
||||
|
by Tony Parisi and published at O'Reily. |
||||
|
</p> |
||||
|
<h2>Examples</h2> |
||||
|
<p> |
||||
|
<ul> |
||||
|
<li><a href="square.html">square</a></li> |
||||
|
<li><a href="cube.html">cube</a></li> |
||||
|
<li><a href="texture.html">texture</a></li> |
||||
|
</ul> |
||||
|
</p> |
||||
|
</div> |
||||
</body> |
</body> |
||||
</html> |
</html> |
||||
<!-- vim: set ts=4 sw=4: --> |
<!-- vim: set ts=4 sw=4: --> |
||||
@ -0,0 +1,62 @@ |
|||||
|
* { |
||||
|
font-family: Verdana, sans-serif; |
||||
|
} |
||||
|
.gl { |
||||
|
position: absolute; |
||||
|
left: 50%; |
||||
|
transform: translate(-50%, 0); |
||||
|
width: 200px; |
||||
|
height: 200px; |
||||
|
z-index: 2; |
||||
|
} |
||||
|
.text { |
||||
|
background: white; |
||||
|
border-style: solid; |
||||
|
border-color: rgb(100, 190, 12); |
||||
|
border-radius: 30px; |
||||
|
border-width: 3px; |
||||
|
padding: 10px; |
||||
|
} |
||||
|
.content { |
||||
|
position: fixed; |
||||
|
top: 50%; |
||||
|
left: 50%; |
||||
|
/* bring your own prefixes */ |
||||
|
transform: translate(-50%, -50%); |
||||
|
width: 800px; |
||||
|
z-index: 1; |
||||
|
} |
||||
|
#background { |
||||
|
position: absolute; |
||||
|
left: 0px; |
||||
|
top: 0px; |
||||
|
width: 1920px; |
||||
|
height: 1200px; |
||||
|
background-image: url(./background1.jpg); |
||||
|
padding: 0px; |
||||
|
margin: 0px; |
||||
|
z-index: -1; |
||||
|
} |
||||
|
#back { |
||||
|
position: fixed; |
||||
|
border-radius: 15px; |
||||
|
border-width: 2px; |
||||
|
z-index: 1; |
||||
|
} |
||||
|
h1,h2,h3,h4,h5,h6 { |
||||
|
font-weight: normal; |
||||
|
} |
||||
|
h1,h4 { |
||||
|
text-decoration: underline; |
||||
|
} |
||||
|
h1 { |
||||
|
font-size: x-large; |
||||
|
} |
||||
|
a { |
||||
|
text-decoration: none; |
||||
|
color: rgb(110, 210, 12); |
||||
|
} |
||||
|
a:visited { |
||||
|
color: rgb(60, 130, 12); |
||||
|
} |
||||
|
/* vim: set ts=4 sw=4: */ |
||||
@ -0,0 +1,151 @@ |
|||||
|
var projectionMatrix, modelViewMatrix; |
||||
|
var shaderProgram, shaderVertexPositionAttribute; |
||||
|
var shaderProjectionMatrixUniform, shaderModelViewMatrixUniform; |
||||
|
|
||||
|
function initWebGL(canvas) { |
||||
|
var gl = null; |
||||
|
var msg = "Your browser does not support WebGL, " + |
||||
|
"or it is not enabled by default."; |
||||
|
try { |
||||
|
gl = canvas.getContext("experimental-webgl"); |
||||
|
} |
||||
|
catch (e) { |
||||
|
msg = "Error creating WebGL Context!: " + e.toString(); |
||||
|
} |
||||
|
if (!gl) { |
||||
|
alert(msg); |
||||
|
throw new Error(msg); |
||||
|
} |
||||
|
|
||||
|
return gl; |
||||
|
} |
||||
|
|
||||
|
function initViewport(gl, canvas) { |
||||
|
gl.viewport(0, 0, canvas.width, canvas.height); |
||||
|
} |
||||
|
|
||||
|
// Create the vertex data for a square to be drawn
|
||||
|
function createSquare(gl) { |
||||
|
var vertexBuffer; |
||||
|
vertexBuffer = gl.createBuffer(); |
||||
|
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); |
||||
|
var verts = [ |
||||
|
.5, .5, 0.0, |
||||
|
-.5, .5, 0.0, |
||||
|
.5, -.5, 0.0, |
||||
|
-.5, -.5, 0.0 |
||||
|
]; |
||||
|
gl.bufferData( |
||||
|
gl.ARRAY_BUFFER, |
||||
|
new Float32Array(verts), |
||||
|
gl.STATIC_DRAW); |
||||
|
var square = { |
||||
|
buffer:vertexBuffer, |
||||
|
vertSize:3, |
||||
|
nVerts:4, |
||||
|
primtype:gl.TRIANGLE_STRIP}; |
||||
|
return square; |
||||
|
} |
||||
|
|
||||
|
function initMatrices(canvas) { |
||||
|
// Create a model view matrix with camera at 0, 0, −3.333
|
||||
|
modelViewMatrix = mat4.create(); |
||||
|
mat4.translate( |
||||
|
modelViewMatrix, modelViewMatrix, [0, 0, -3.333]); |
||||
|
|
||||
|
// Create a project matrix with 45 degree field of view
|
||||
|
projectionMatrix = mat4.create(); |
||||
|
mat4.perspective(projectionMatrix, Math.PI / 4, |
||||
|
canvas.width / canvas.height, 1, 10000); |
||||
|
} |
||||
|
|
||||
|
function createShader(gl, id, type) { |
||||
|
var shader; |
||||
|
var str = document.getElementById(id).text; |
||||
|
if (type == "fragment") { |
||||
|
shader = gl.createShader(gl.FRAGMENT_SHADER); |
||||
|
} else if (type == "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; |
||||
|
} |
||||
|
|
||||
|
function initShader(gl, vertex, fragment) { |
||||
|
// load and compile the fragment and vertex shader
|
||||
|
var fragmentShader = createShader(gl, fragment, "fragment"); |
||||
|
var vertexShader = createShader(gl, vertex, "vertex"); |
||||
|
|
||||
|
// link them together into a new program
|
||||
|
shaderProgram = gl.createProgram(); |
||||
|
gl.attachShader(shaderProgram, vertexShader); |
||||
|
gl.attachShader(shaderProgram, fragmentShader); |
||||
|
gl.linkProgram(shaderProgram); |
||||
|
|
||||
|
// get pointers to the shader params
|
||||
|
shaderVertexPositionAttribute = gl.getAttribLocation( |
||||
|
shaderProgram, "vertexPos"); |
||||
|
gl.enableVertexAttribArray(shaderVertexPositionAttribute); |
||||
|
|
||||
|
shaderProjectionMatrixUniform = gl.getUniformLocation( |
||||
|
shaderProgram, "projectionMatrix"); |
||||
|
shaderModelViewMatrixUniform = gl.getUniformLocation( |
||||
|
shaderProgram, "modelViewMatrix"); |
||||
|
|
||||
|
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { |
||||
|
alert("Could not initialise shaders"); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function draw(gl, obj) { |
||||
|
// clear the background (with black)
|
||||
|
gl.clearColor(0.0, 0.0, 0.0, 1.0); |
||||
|
gl.clear(gl.COLOR_BUFFER_BIT); |
||||
|
|
||||
|
// set the vertex buffer to be drawn
|
||||
|
gl.bindBuffer(gl.ARRAY_BUFFER, obj.buffer); |
||||
|
|
||||
|
// set the shader to use
|
||||
|
gl.useProgram(shaderProgram); |
||||
|
|
||||
|
// connect up the shader parameters: vertex position and
|
||||
|
// projection/model matrices
|
||||
|
gl.vertexAttribPointer( |
||||
|
shaderVertexPositionAttribute, |
||||
|
obj.vertSize, |
||||
|
gl.FLOAT, false, 0, 0); |
||||
|
gl.uniformMatrix4fv( |
||||
|
shaderProjectionMatrixUniform, |
||||
|
false, projectionMatrix); |
||||
|
gl.uniformMatrix4fv( |
||||
|
shaderModelViewMatrixUniform, false, modelViewMatrix); |
||||
|
|
||||
|
// draw the object
|
||||
|
gl.drawArrays(obj.primtype, 0, obj.nVerts); |
||||
|
} |
||||
|
|
||||
|
function startGl() { |
||||
|
// Get A WebGL context
|
||||
|
var canvas = document.getElementById("square"); |
||||
|
var gl = initWebGL(canvas); |
||||
|
var obj = createSquare(gl); |
||||
|
|
||||
|
initViewport(gl, canvas); |
||||
|
initMatrices(canvas); |
||||
|
initShader( |
||||
|
gl, |
||||
|
"square-vertex-shader", |
||||
|
"square-fragment-shader"); |
||||
|
draw(gl, obj); |
||||
|
} |
||||
|
// vim: set ts=4 sw=4:
|
||||
@ -0,0 +1,325 @@ |
|||||
|
var projectionMatrix, modelViewMatrix; |
||||
|
var rotationAxis; |
||||
|
var shaderProgram, shaderVertexPositionAttribute |
||||
|
var shaderTexCoordAttribute, shaderSamplerUniform; |
||||
|
var shaderProjectionMatrixUniform, shaderModelViewMatrixUniform; |
||||
|
|
||||
|
var duration = 5000; // ms
|
||||
|
var currentTime = Date.now(); |
||||
|
|
||||
|
var okToRun = false; |
||||
|
var webGLTexture; |
||||
|
|
||||
|
function handleTextureLoaded(gl, texture) { |
||||
|
gl.bindTexture(gl.TEXTURE_2D, texture); |
||||
|
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true); |
||||
|
gl.texImage2D( |
||||
|
gl.TEXTURE_2D, |
||||
|
0, |
||||
|
gl.RGBA, |
||||
|
gl.RGBA, |
||||
|
gl.UNSIGNED_BYTE, |
||||
|
texture.image); |
||||
|
gl.texParameteri( |
||||
|
gl.TEXTURE_2D, |
||||
|
gl.TEXTURE_MAG_FILTER, |
||||
|
gl.NEAREST); |
||||
|
gl.texParameteri( |
||||
|
gl.TEXTURE_2D, |
||||
|
gl.TEXTURE_MIN_FILTER, |
||||
|
gl.NEAREST); |
||||
|
gl.bindTexture(gl.TEXTURE_2D, null); |
||||
|
okToRun = true; |
||||
|
} |
||||
|
|
||||
|
function initTexture(gl) { |
||||
|
webGLTexture = gl.createTexture(); |
||||
|
webGLTexture.image = new Image(); |
||||
|
webGLTexture.image.onload = function () { |
||||
|
handleTextureLoaded(gl, webGLTexture) |
||||
|
} |
||||
|
//webGLTexture.image.src = "P3D/images/webgl-logo-256.jpg";
|
||||
|
webGLTexture.image.src = "gravatar-256.jpg"; |
||||
|
} |
||||
|
|
||||
|
function initWebGL(canvas) { |
||||
|
var gl = null; |
||||
|
var msg = "Your browser does not support WebGL, " + |
||||
|
"or it is not enabled by default."; |
||||
|
try { |
||||
|
gl = canvas.getContext("experimental-webgl"); |
||||
|
} |
||||
|
catch (e) { |
||||
|
msg = "Error creating WebGL Context!: " + e.toString(); |
||||
|
} |
||||
|
if (!gl) { |
||||
|
alert(msg); |
||||
|
throw new Error(msg); |
||||
|
} |
||||
|
|
||||
|
return gl; |
||||
|
} |
||||
|
|
||||
|
function initViewport(gl, canvas) { |
||||
|
gl.viewport(0, 0, canvas.width, canvas.height); |
||||
|
} |
||||
|
|
||||
|
// Create the vertex, color, and index data for a
|
||||
|
// multicolored cube
|
||||
|
function createCube(gl) { |
||||
|
// Vertex Data
|
||||
|
var vertexBuffer; |
||||
|
vertexBuffer = gl.createBuffer(); |
||||
|
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); |
||||
|
var verts = [ |
||||
|
// 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 |
||||
|
]; |
||||
|
gl.bufferData( |
||||
|
gl.ARRAY_BUFFER, |
||||
|
new Float32Array(verts), |
||||
|
gl.STATIC_DRAW); |
||||
|
|
||||
|
var texCoordBuffer = gl.createBuffer(); |
||||
|
gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer); |
||||
|
var textureCoords = [ |
||||
|
// Front face
|
||||
|
0.0, 0.0, |
||||
|
1.0, 0.0, |
||||
|
1.0, 1.0, |
||||
|
0.0, 1.0, |
||||
|
|
||||
|
// Back face
|
||||
|
1.0, 0.0, |
||||
|
1.0, 1.0, |
||||
|
0.0, 1.0, |
||||
|
0.0, 0.0, |
||||
|
|
||||
|
// Top face
|
||||
|
0.0, 1.0, |
||||
|
0.0, 0.0, |
||||
|
1.0, 0.0, |
||||
|
1.0, 1.0, |
||||
|
|
||||
|
// Bottom face
|
||||
|
1.0, 1.0, |
||||
|
0.0, 1.0, |
||||
|
0.0, 0.0, |
||||
|
1.0, 0.0, |
||||
|
|
||||
|
// Right face
|
||||
|
1.0, 0.0, |
||||
|
1.0, 1.0, |
||||
|
0.0, 1.0, |
||||
|
0.0, 0.0, |
||||
|
|
||||
|
// Left face
|
||||
|
0.0, 0.0, |
||||
|
1.0, 0.0, |
||||
|
1.0, 1.0, |
||||
|
0.0, 1.0, |
||||
|
]; |
||||
|
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoords), gl.STATIC_DRAW); |
||||
|
|
||||
|
// Index data (defines the triangles to be drawn)
|
||||
|
var cubeIndexBuffer = gl.createBuffer(); |
||||
|
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeIndexBuffer); |
||||
|
var cubeIndices = [ |
||||
|
0, 1, 2, 0, 2, 3, // Front face
|
||||
|
4, 5, 6, 4, 6, 7, // Back face
|
||||
|
8, 9, 10, 8, 10, 11, // Top face
|
||||
|
12, 13, 14, 12, 14, 15, // Bottom face
|
||||
|
16, 17, 18, 16, 18, 19, // Right face
|
||||
|
20, 21, 22, 20, 22, 23 // Left face
|
||||
|
]; |
||||
|
gl.bufferData( |
||||
|
gl.ELEMENT_ARRAY_BUFFER, |
||||
|
new Uint16Array(cubeIndices), |
||||
|
gl.STATIC_DRAW); |
||||
|
var cube = { |
||||
|
buffer:vertexBuffer, |
||||
|
texCoordBuffer:texCoordBuffer, |
||||
|
indices:cubeIndexBuffer, |
||||
|
vertSize:3, |
||||
|
nVerts:24, |
||||
|
texCoordSize:2, |
||||
|
nTexCoords: 24, |
||||
|
nIndices:36, |
||||
|
primtype:gl.TRIANGLES}; |
||||
|
|
||||
|
return cube; |
||||
|
} |
||||
|
|
||||
|
function initMatrices(canvas) { |
||||
|
modelViewMatrix = mat4.create(); |
||||
|
mat4.translate( |
||||
|
modelViewMatrix, modelViewMatrix, [0, 0, -4.6]); |
||||
|
|
||||
|
// Create a project matrix with 45 degree field of view
|
||||
|
projectionMatrix = mat4.create(); |
||||
|
mat4.perspective(projectionMatrix, Math.PI / 4, |
||||
|
canvas.width / canvas.height, 1, 10000); |
||||
|
|
||||
|
rotationAxis = vec3.create(); |
||||
|
vec3.normalize(rotationAxis, [1, 1, 1]); |
||||
|
} |
||||
|
|
||||
|
function createShader(gl, id, type) { |
||||
|
var shader; |
||||
|
var str = document.getElementById(id).text; |
||||
|
if (type == "fragment") { |
||||
|
shader = gl.createShader(gl.FRAGMENT_SHADER); |
||||
|
} else if (type == "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; |
||||
|
} |
||||
|
|
||||
|
function initShader(gl, vertex, fragment) { |
||||
|
// load and compile the fragment and vertex shader
|
||||
|
var fragmentShader = createShader(gl, fragment, "fragment"); |
||||
|
var vertexShader = createShader(gl, vertex, "vertex"); |
||||
|
|
||||
|
// link them together into a new program
|
||||
|
shaderProgram = gl.createProgram(); |
||||
|
gl.attachShader(shaderProgram, vertexShader); |
||||
|
gl.attachShader(shaderProgram, fragmentShader); |
||||
|
gl.linkProgram(shaderProgram); |
||||
|
|
||||
|
// get pointers to the shader params
|
||||
|
shaderVertexPositionAttribute = gl.getAttribLocation( |
||||
|
shaderProgram, "vertexPos"); |
||||
|
gl.enableVertexAttribArray(shaderVertexPositionAttribute); |
||||
|
shaderTexCoordAttribute = gl.getAttribLocation( |
||||
|
shaderProgram, "texCoord"); |
||||
|
gl.enableVertexAttribArray(shaderTexCoordAttribute); |
||||
|
|
||||
|
shaderProjectionMatrixUniform = gl.getUniformLocation( |
||||
|
shaderProgram, "projectionMatrix"); |
||||
|
shaderModelViewMatrixUniform = gl.getUniformLocation( |
||||
|
shaderProgram, "modelViewMatrix"); |
||||
|
shaderSamplerUniform = gl.getUniformLocation( |
||||
|
shaderProgram, "uSampler"); |
||||
|
|
||||
|
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { |
||||
|
alert("Could not initialise shaders"); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function draw(gl, obj) { |
||||
|
// clear the background (transparent)
|
||||
|
gl.clearColor(0.0, 0.0, 0.0, 0.0); |
||||
|
// // clear the background (black)
|
||||
|
// gl.clearColor(0.0, 0.0, 0.0, 1.0);
|
||||
|
gl.enable(gl.DEPTH_TEST); |
||||
|
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); |
||||
|
|
||||
|
// set the shader to use
|
||||
|
gl.useProgram(shaderProgram); |
||||
|
|
||||
|
// connect up the shader parameters: vertex position,
|
||||
|
// color, and projection/model matrices
|
||||
|
// set up the buffers
|
||||
|
gl.bindBuffer(gl.ARRAY_BUFFER, obj.buffer); |
||||
|
gl.vertexAttribPointer( |
||||
|
shaderVertexPositionAttribute, |
||||
|
obj.vertSize, |
||||
|
gl.FLOAT, |
||||
|
false, 0, 0); |
||||
|
gl.bindBuffer(gl.ARRAY_BUFFER, obj.texCoordBuffer); |
||||
|
gl.vertexAttribPointer( |
||||
|
shaderTexCoordAttribute, |
||||
|
obj.texCoordSize, |
||||
|
gl.FLOAT, |
||||
|
false, 0, 0); |
||||
|
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, obj.indices); |
||||
|
gl.uniformMatrix4fv(shaderProjectionMatrixUniform, false, |
||||
|
projectionMatrix); |
||||
|
gl.uniformMatrix4fv(shaderModelViewMatrixUniform, false, |
||||
|
modelViewMatrix); |
||||
|
|
||||
|
gl.activeTexture(gl.TEXTURE0); |
||||
|
gl.bindTexture(gl.TEXTURE_2D, webGLTexture); |
||||
|
gl.uniform1i(shaderSamplerUniform, 0); |
||||
|
|
||||
|
// draw the object
|
||||
|
gl.drawElements( |
||||
|
obj.primtype, obj.nIndices, gl.UNSIGNED_SHORT, 0); |
||||
|
} |
||||
|
|
||||
|
function animate() { |
||||
|
var now = Date.now(); |
||||
|
var deltat = now - currentTime; |
||||
|
currentTime = now; |
||||
|
var fract = deltat / duration; |
||||
|
var angle = Math.PI * 2 * fract; |
||||
|
mat4.rotate( |
||||
|
modelViewMatrix, |
||||
|
modelViewMatrix, |
||||
|
angle, |
||||
|
rotationAxis); |
||||
|
} |
||||
|
|
||||
|
function run(gl, cube) { |
||||
|
requestAnimationFrame(function() { run(gl, cube); }); |
||||
|
if (okToRun) { |
||||
|
draw(gl, cube); |
||||
|
animate(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function startGl() { |
||||
|
// Get A WebGL context
|
||||
|
var canvas = document.getElementById("cube"); |
||||
|
var gl = initWebGL(canvas); |
||||
|
var obj = createCube(gl); |
||||
|
|
||||
|
initViewport(gl, canvas); |
||||
|
initMatrices(canvas); |
||||
|
initShader( |
||||
|
gl, |
||||
|
"texture-vertex-shader", |
||||
|
"texture-fragment-shader"); |
||||
|
initTexture(gl); |
||||
|
run(gl, obj); |
||||
|
} |
||||
|
/* vim: set ts=4 sw=4: */ |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue