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> |
|||
<head> |
|||
<title> Oh my Gosh </title> |
|||
<link rel="stylesheet" href="main.css"> |
|||
</head> |
|||
|
|||
<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> |
|||
</html> |
|||
<!-- 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