Commit initial. Import depuis webgl-tp6
This commit is contained in:
lhark
commit
063ceb5293
7 changed files with 3059 additions and 0 deletions
603
J3DI.js
Normal file
603
J3DI.js
Normal file
|
|
@ -0,0 +1,603 @@
|
||||||
|
/*
|
||||||
|
* 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.
|
||||||
|
*/
|
||||||
|
|
||||||
|
//
|
||||||
|
// initWebGL
|
||||||
|
//
|
||||||
|
// Initialize the Canvas element with the passed name as a WebGL object and return the
|
||||||
|
// WebGLRenderingContext.
|
||||||
|
function initWebGL(canvasName, vshader, fshader, attribs, clearColor, clearDepth)
|
||||||
|
{
|
||||||
|
var canvas = document.getElementById(canvasName);
|
||||||
|
return gl = WebGLUtils.setupWebGL(canvas);
|
||||||
|
}
|
||||||
|
|
||||||
|
function log(msg) {
|
||||||
|
if (window.console && window.console.log) {
|
||||||
|
window.console.log(msg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Load shaders with the passed names and create a program with them. Return this program
|
||||||
|
// in the 'program' property of the returned context.
|
||||||
|
//
|
||||||
|
// For each string in the passed attribs array, bind an attrib with that name at that index.
|
||||||
|
// Once the attribs are bound, link the program and then use it.
|
||||||
|
//
|
||||||
|
// Set the clear color to the passed array (4 values) and set the clear depth to the passed value.
|
||||||
|
// Enable depth testing and blending with a blend func of (SRC_ALPHA, ONE_MINUS_SRC_ALPHA)
|
||||||
|
//
|
||||||
|
// A console function is added to the context: console(string). This can be replaced
|
||||||
|
// by the caller. By default, it maps to the window.console() function on WebKit and to
|
||||||
|
// an empty function on other browsers.
|
||||||
|
//
|
||||||
|
function simpleSetup(gl, vshader, fshader, attribs, clearColor, clearDepth)
|
||||||
|
{
|
||||||
|
// create our shaders
|
||||||
|
var vertexShader = loadShader(gl, vshader);
|
||||||
|
var fragmentShader = loadShader(gl, fshader);
|
||||||
|
|
||||||
|
// Create the program object
|
||||||
|
var program = gl.createProgram();
|
||||||
|
|
||||||
|
// Attach our two shaders to the program
|
||||||
|
gl.attachShader (program, vertexShader);
|
||||||
|
gl.attachShader (program, fragmentShader);
|
||||||
|
|
||||||
|
// Bind attributes
|
||||||
|
for (var i = 0; i < attribs.length; ++i)
|
||||||
|
gl.bindAttribLocation (program, i, attribs[i]);
|
||||||
|
|
||||||
|
// Link the program
|
||||||
|
gl.linkProgram(program);
|
||||||
|
|
||||||
|
// Check the link status
|
||||||
|
var linked = gl.getProgramParameter(program, gl.LINK_STATUS);
|
||||||
|
if (!linked && !gl.isContextLost()) {
|
||||||
|
// something went wrong with the link
|
||||||
|
var error = gl.getProgramInfoLog (program);
|
||||||
|
log("Error in program linking:"+error);
|
||||||
|
|
||||||
|
gl.deleteProgram(program);
|
||||||
|
gl.deleteProgram(fragmentShader);
|
||||||
|
gl.deleteProgram(vertexShader);
|
||||||
|
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
gl.useProgram(program);
|
||||||
|
|
||||||
|
gl.clearColor(clearColor[0], clearColor[1], clearColor[2], clearColor[3]);
|
||||||
|
gl.clearDepth(clearDepth);
|
||||||
|
|
||||||
|
gl.enable(gl.DEPTH_TEST);
|
||||||
|
gl.enable(gl.BLEND);
|
||||||
|
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
|
||||||
|
|
||||||
|
return program;
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// loadShader
|
||||||
|
//
|
||||||
|
// 'shaderId' is the id of a <script> element containing the shader source string.
|
||||||
|
// Load this shader and return the WebGLShader object corresponding to it.
|
||||||
|
//
|
||||||
|
function loadShader(ctx, shaderId)
|
||||||
|
{
|
||||||
|
var shaderScript = document.getElementById(shaderId);
|
||||||
|
if (!shaderScript) {
|
||||||
|
log("*** Error: shader script '"+shaderId+"' not found");
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (shaderScript.type == "x-shader/x-vertex")
|
||||||
|
var shaderType = ctx.VERTEX_SHADER;
|
||||||
|
else if (shaderScript.type == "x-shader/x-fragment")
|
||||||
|
var shaderType = ctx.FRAGMENT_SHADER;
|
||||||
|
else {
|
||||||
|
log("*** Error: shader script '"+shaderId+"' of undefined type '"+shaderScript.type+"'");
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create the shader object
|
||||||
|
var shader = ctx.createShader(shaderType);
|
||||||
|
|
||||||
|
// Load the shader source
|
||||||
|
ctx.shaderSource(shader, shaderScript.text);
|
||||||
|
|
||||||
|
// Compile the shader
|
||||||
|
ctx.compileShader(shader);
|
||||||
|
|
||||||
|
// Check the compile status
|
||||||
|
var compiled = ctx.getShaderParameter(shader, ctx.COMPILE_STATUS);
|
||||||
|
if (!compiled && !ctx.isContextLost()) {
|
||||||
|
// Something went wrong during compilation; get the error
|
||||||
|
var error = ctx.getShaderInfoLog(shader);
|
||||||
|
log("*** Error compiling shader '"+shaderId+"':"+error);
|
||||||
|
ctx.deleteShader(shader);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return shader;
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// makeBox
|
||||||
|
//
|
||||||
|
// Create a box with vertices, normals and texCoords. Create VBOs for each as well as the index array.
|
||||||
|
// Return an object with the following properties:
|
||||||
|
//
|
||||||
|
// normalObject WebGLBuffer object for normals
|
||||||
|
// texCoordObject WebGLBuffer object for texCoords
|
||||||
|
// vertexObject WebGLBuffer object for vertices
|
||||||
|
// indexObject WebGLBuffer object for indices
|
||||||
|
// numIndices The number of indices in the indexObject
|
||||||
|
//
|
||||||
|
function makeBox(ctx)
|
||||||
|
{
|
||||||
|
// box
|
||||||
|
// v6----- v5
|
||||||
|
// /| /|
|
||||||
|
// v1------v0|
|
||||||
|
// | | | |
|
||||||
|
// | |v7---|-|v4
|
||||||
|
// |/ |/
|
||||||
|
// v2------v3
|
||||||
|
//
|
||||||
|
// vertex coords array
|
||||||
|
var vertices = new Float32Array(
|
||||||
|
[ 1, 1, 1, -1, 1, 1, -1,-1, 1, 1,-1, 1, // v0-v1-v2-v3 front
|
||||||
|
1, 1, 1, 1,-1, 1, 1,-1,-1, 1, 1,-1, // v0-v3-v4-v5 right
|
||||||
|
1, 1, 1, 1, 1,-1, -1, 1,-1, -1, 1, 1, // v0-v5-v6-v1 top
|
||||||
|
-1, 1, 1, -1, 1,-1, -1,-1,-1, -1,-1, 1, // v1-v6-v7-v2 left
|
||||||
|
-1,-1,-1, 1,-1,-1, 1,-1, 1, -1,-1, 1, // v7-v4-v3-v2 bottom
|
||||||
|
1,-1,-1, -1,-1,-1, -1, 1,-1, 1, 1,-1 ] // v4-v7-v6-v5 back
|
||||||
|
);
|
||||||
|
|
||||||
|
// normal array
|
||||||
|
var normals = new Float32Array(
|
||||||
|
[ 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, // v0-v1-v2-v3 front
|
||||||
|
1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, // v0-v3-v4-v5 right
|
||||||
|
0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, // v0-v5-v6-v1 top
|
||||||
|
-1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, // v1-v6-v7-v2 left
|
||||||
|
0,-1, 0, 0,-1, 0, 0,-1, 0, 0,-1, 0, // v7-v4-v3-v2 bottom
|
||||||
|
0, 0,-1, 0, 0,-1, 0, 0,-1, 0, 0,-1 ] // v4-v7-v6-v5 back
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
|
// texCoord array
|
||||||
|
var texCoords = new Float32Array(
|
||||||
|
[ 1, 1, 0, 1, 0, 0, 1, 0, // v0-v1-v2-v3 front
|
||||||
|
0, 1, 0, 0, 1, 0, 1, 1, // v0-v3-v4-v5 right
|
||||||
|
1, 0, 1, 1, 0, 1, 0, 0, // v0-v5-v6-v1 top
|
||||||
|
1, 1, 0, 1, 0, 0, 1, 0, // v1-v6-v7-v2 left
|
||||||
|
0, 0, 1, 0, 1, 1, 0, 1, // v7-v4-v3-v2 bottom
|
||||||
|
0, 0, 1, 0, 1, 1, 0, 1 ] // v4-v7-v6-v5 back
|
||||||
|
);
|
||||||
|
|
||||||
|
// index array
|
||||||
|
var indices = new Uint8Array(
|
||||||
|
[ 0, 1, 2, 0, 2, 3, // front
|
||||||
|
4, 5, 6, 4, 6, 7, // right
|
||||||
|
8, 9,10, 8,10,11, // top
|
||||||
|
12,13,14, 12,14,15, // left
|
||||||
|
16,17,18, 16,18,19, // bottom
|
||||||
|
20,21,22, 20,22,23 ] // back
|
||||||
|
);
|
||||||
|
|
||||||
|
var retval = { };
|
||||||
|
|
||||||
|
retval.normalObject = ctx.createBuffer();
|
||||||
|
ctx.bindBuffer(ctx.ARRAY_BUFFER, retval.normalObject);
|
||||||
|
ctx.bufferData(ctx.ARRAY_BUFFER, normals, ctx.STATIC_DRAW);
|
||||||
|
|
||||||
|
retval.texCoordObject = ctx.createBuffer();
|
||||||
|
ctx.bindBuffer(ctx.ARRAY_BUFFER, retval.texCoordObject);
|
||||||
|
ctx.bufferData(ctx.ARRAY_BUFFER, texCoords, ctx.STATIC_DRAW);
|
||||||
|
|
||||||
|
retval.vertexObject = ctx.createBuffer();
|
||||||
|
ctx.bindBuffer(ctx.ARRAY_BUFFER, retval.vertexObject);
|
||||||
|
ctx.bufferData(ctx.ARRAY_BUFFER, vertices, ctx.STATIC_DRAW);
|
||||||
|
|
||||||
|
ctx.bindBuffer(ctx.ARRAY_BUFFER, null);
|
||||||
|
|
||||||
|
retval.indexObject = ctx.createBuffer();
|
||||||
|
ctx.bindBuffer(ctx.ELEMENT_ARRAY_BUFFER, retval.indexObject);
|
||||||
|
ctx.bufferData(ctx.ELEMENT_ARRAY_BUFFER, indices, ctx.STATIC_DRAW);
|
||||||
|
ctx.bindBuffer(ctx.ELEMENT_ARRAY_BUFFER, null);
|
||||||
|
|
||||||
|
retval.numIndices = indices.length;
|
||||||
|
|
||||||
|
return retval;
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// makeSphere
|
||||||
|
//
|
||||||
|
// Create a sphere with the passed number of latitude and longitude bands and the passed radius.
|
||||||
|
// Sphere has vertices, normals and texCoords. Create VBOs for each as well as the index array.
|
||||||
|
// Return an object with the following properties:
|
||||||
|
//
|
||||||
|
// normalObject WebGLBuffer object for normals
|
||||||
|
// texCoordObject WebGLBuffer object for texCoords
|
||||||
|
// vertexObject WebGLBuffer object for vertices
|
||||||
|
// indexObject WebGLBuffer object for indices
|
||||||
|
// numIndices The number of indices in the indexObject
|
||||||
|
//
|
||||||
|
function makeSphere(ctx, radius, lats, longs)
|
||||||
|
{
|
||||||
|
var geometryData = [ ];
|
||||||
|
var normalData = [ ];
|
||||||
|
var texCoordData = [ ];
|
||||||
|
var indexData = [ ];
|
||||||
|
|
||||||
|
for (var latNumber = 0; latNumber <= lats; ++latNumber) {
|
||||||
|
for (var longNumber = 0; longNumber <= longs; ++longNumber) {
|
||||||
|
var theta = latNumber * Math.PI / lats;
|
||||||
|
var phi = longNumber * 2 * Math.PI / longs;
|
||||||
|
var sinTheta = Math.sin(theta);
|
||||||
|
var sinPhi = Math.sin(phi);
|
||||||
|
var cosTheta = Math.cos(theta);
|
||||||
|
var cosPhi = Math.cos(phi);
|
||||||
|
|
||||||
|
var x = cosPhi * sinTheta;
|
||||||
|
var y = cosTheta;
|
||||||
|
var z = sinPhi * sinTheta;
|
||||||
|
var u = 1-(longNumber/longs);
|
||||||
|
var v = latNumber/lats;
|
||||||
|
|
||||||
|
normalData.push(x);
|
||||||
|
normalData.push(y);
|
||||||
|
normalData.push(z);
|
||||||
|
texCoordData.push(u);
|
||||||
|
texCoordData.push(v);
|
||||||
|
geometryData.push(radius * x);
|
||||||
|
geometryData.push(radius * y);
|
||||||
|
geometryData.push(radius * z);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
for (var latNumber = 0; latNumber < lats; ++latNumber) {
|
||||||
|
for (var longNumber = 0; longNumber < longs; ++longNumber) {
|
||||||
|
var first = (latNumber * (longs+1)) + longNumber;
|
||||||
|
var second = first + longs + 1;
|
||||||
|
indexData.push(first);
|
||||||
|
indexData.push(second);
|
||||||
|
indexData.push(first+1);
|
||||||
|
|
||||||
|
indexData.push(second);
|
||||||
|
indexData.push(second+1);
|
||||||
|
indexData.push(first+1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var retval = { };
|
||||||
|
|
||||||
|
retval.normalObject = ctx.createBuffer();
|
||||||
|
ctx.bindBuffer(ctx.ARRAY_BUFFER, retval.normalObject);
|
||||||
|
ctx.bufferData(ctx.ARRAY_BUFFER, new Float32Array(normalData), ctx.STATIC_DRAW);
|
||||||
|
|
||||||
|
retval.texCoordObject = ctx.createBuffer();
|
||||||
|
ctx.bindBuffer(ctx.ARRAY_BUFFER, retval.texCoordObject);
|
||||||
|
ctx.bufferData(ctx.ARRAY_BUFFER, new Float32Array(texCoordData), ctx.STATIC_DRAW);
|
||||||
|
|
||||||
|
retval.vertexObject = ctx.createBuffer();
|
||||||
|
ctx.bindBuffer(ctx.ARRAY_BUFFER, retval.vertexObject);
|
||||||
|
ctx.bufferData(ctx.ARRAY_BUFFER, new Float32Array(geometryData), ctx.STATIC_DRAW);
|
||||||
|
|
||||||
|
retval.numIndices = indexData.length;
|
||||||
|
retval.indexObject = ctx.createBuffer();
|
||||||
|
ctx.bindBuffer(ctx.ELEMENT_ARRAY_BUFFER, retval.indexObject);
|
||||||
|
ctx.bufferData(ctx.ELEMENT_ARRAY_BUFFER, new Uint16Array(indexData), ctx.STREAM_DRAW);
|
||||||
|
|
||||||
|
return retval;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Array of Objects curently loading
|
||||||
|
var g_loadingObjects = [];
|
||||||
|
|
||||||
|
// Clears all the Objects currently loading.
|
||||||
|
// This is used to handle context lost events.
|
||||||
|
function clearLoadingObjects() {
|
||||||
|
for (var ii = 0; ii < g_loadingObjects.length; ++ii) {
|
||||||
|
g_loadingObjects[ii].onreadystatechange = undefined;
|
||||||
|
}
|
||||||
|
g_loadingObjects = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// loadObj
|
||||||
|
//
|
||||||
|
// Load a .obj file from the passed URL. Return an object with a 'loaded' property set to false.
|
||||||
|
// When the object load is complete, the 'loaded' property becomes true and the following
|
||||||
|
// properties are set:
|
||||||
|
//
|
||||||
|
// normalObject WebGLBuffer object for normals
|
||||||
|
// texCoordObject WebGLBuffer object for texCoords
|
||||||
|
// vertexObject WebGLBuffer object for vertices
|
||||||
|
// indexObject WebGLBuffer object for indices
|
||||||
|
// numIndices The number of indices in the indexObject
|
||||||
|
//
|
||||||
|
function loadObj(ctx, url)
|
||||||
|
{
|
||||||
|
var obj = { loaded : false };
|
||||||
|
obj.ctx = ctx;
|
||||||
|
var req = new XMLHttpRequest();
|
||||||
|
req.obj = obj;
|
||||||
|
g_loadingObjects.push(req);
|
||||||
|
req.onreadystatechange = function () { processLoadObj(req) };
|
||||||
|
req.open("GET", url, true);
|
||||||
|
req.send(null);
|
||||||
|
return obj;
|
||||||
|
}
|
||||||
|
|
||||||
|
function processLoadObj(req)
|
||||||
|
{
|
||||||
|
log("req="+req)
|
||||||
|
// only if req shows "complete"
|
||||||
|
if (req.readyState == 4) {
|
||||||
|
g_loadingObjects.splice(g_loadingObjects.indexOf(req), 1);
|
||||||
|
doLoadObj(req.obj, req.responseText);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function doLoadObj(obj, text)
|
||||||
|
{
|
||||||
|
vertexArray = [ ];
|
||||||
|
normalArray = [ ];
|
||||||
|
textureArray = [ ];
|
||||||
|
indexArray = [ ];
|
||||||
|
|
||||||
|
var vertex = [ ];
|
||||||
|
var normal = [ ];
|
||||||
|
var texture = [ ];
|
||||||
|
var facemap = { };
|
||||||
|
var index = 0;
|
||||||
|
|
||||||
|
// This is a map which associates a range of indices with a name
|
||||||
|
// The name comes from the 'g' tag (of the form "g NAME"). Indices
|
||||||
|
// are part of one group until another 'g' tag is seen. If any indices
|
||||||
|
// come before a 'g' tag, it is given the group name "_unnamed"
|
||||||
|
// 'group' is an object whose property names are the group name and
|
||||||
|
// whose value is a 2 element array with [<first index>, <num indices>]
|
||||||
|
var groups = { };
|
||||||
|
var currentGroup = [-1, 0];
|
||||||
|
groups["_unnamed"] = currentGroup;
|
||||||
|
|
||||||
|
var lines = text.split("\n");
|
||||||
|
for (var lineIndex in lines) {
|
||||||
|
var line = lines[lineIndex].replace(/[ \t]+/g, " ").replace(/\s\s*$/, "");
|
||||||
|
|
||||||
|
// ignore comments
|
||||||
|
if (line[0] == "#")
|
||||||
|
continue;
|
||||||
|
|
||||||
|
var array = line.split(" ");
|
||||||
|
if (array[0] == "g") {
|
||||||
|
// new group
|
||||||
|
currentGroup = [indexArray.length, 0];
|
||||||
|
groups[array[1]] = currentGroup;
|
||||||
|
}
|
||||||
|
else if (array[0] == "v") {
|
||||||
|
// vertex
|
||||||
|
vertex.push(parseFloat(array[1]));
|
||||||
|
vertex.push(parseFloat(array[2]));
|
||||||
|
vertex.push(parseFloat(array[3]));
|
||||||
|
}
|
||||||
|
else if (array[0] == "vt") {
|
||||||
|
// normal
|
||||||
|
texture.push(parseFloat(array[1]));
|
||||||
|
texture.push(parseFloat(array[2]));
|
||||||
|
}
|
||||||
|
else if (array[0] == "vn") {
|
||||||
|
// normal
|
||||||
|
normal.push(parseFloat(array[1]));
|
||||||
|
normal.push(parseFloat(array[2]));
|
||||||
|
normal.push(parseFloat(array[3]));
|
||||||
|
}
|
||||||
|
else if (array[0] == "f") {
|
||||||
|
// face
|
||||||
|
if (array.length != 4) {
|
||||||
|
log("*** Error: face '"+line+"' not handled");
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
for (var i = 1; i < 4; ++i) {
|
||||||
|
if (!(array[i] in facemap)) {
|
||||||
|
// add a new entry to the map and arrays
|
||||||
|
var f = array[i].split("/");
|
||||||
|
var vtx, nor, tex;
|
||||||
|
|
||||||
|
if (f.length == 1) {
|
||||||
|
vtx = parseInt(f[0]) - 1;
|
||||||
|
nor = vtx;
|
||||||
|
tex = vtx;
|
||||||
|
}
|
||||||
|
else if (f.length = 3) {
|
||||||
|
vtx = parseInt(f[0]) - 1;
|
||||||
|
tex = parseInt(f[1]) - 1;
|
||||||
|
nor = parseInt(f[2]) - 1;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
obj.ctx.console.log("*** Error: did not understand face '"+array[i]+"'");
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// do the vertices
|
||||||
|
var x = 0;
|
||||||
|
var y = 0;
|
||||||
|
var z = 0;
|
||||||
|
if (vtx * 3 + 2 < vertex.length) {
|
||||||
|
x = vertex[vtx*3];
|
||||||
|
y = vertex[vtx*3+1];
|
||||||
|
z = vertex[vtx*3+2];
|
||||||
|
}
|
||||||
|
vertexArray.push(x);
|
||||||
|
vertexArray.push(y);
|
||||||
|
vertexArray.push(z);
|
||||||
|
|
||||||
|
// do the textures
|
||||||
|
x = 0;
|
||||||
|
y = 0;
|
||||||
|
if (tex * 2 + 1 < texture.length) {
|
||||||
|
x = texture[tex*2];
|
||||||
|
y = texture[tex*2+1];
|
||||||
|
}
|
||||||
|
textureArray.push(x);
|
||||||
|
textureArray.push(y);
|
||||||
|
|
||||||
|
// do the normals
|
||||||
|
x = 0;
|
||||||
|
y = 0;
|
||||||
|
z = 1;
|
||||||
|
if (nor * 3 + 2 < normal.length) {
|
||||||
|
x = normal[nor*3];
|
||||||
|
y = normal[nor*3+1];
|
||||||
|
z = normal[nor*3+2];
|
||||||
|
}
|
||||||
|
normalArray.push(x);
|
||||||
|
normalArray.push(y);
|
||||||
|
normalArray.push(z);
|
||||||
|
|
||||||
|
facemap[array[i]] = index++;
|
||||||
|
}
|
||||||
|
|
||||||
|
indexArray.push(facemap[array[i]]);
|
||||||
|
currentGroup[1]++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// set the VBOs
|
||||||
|
obj.normalObject = obj.ctx.createBuffer();
|
||||||
|
obj.ctx.bindBuffer(obj.ctx.ARRAY_BUFFER, obj.normalObject);
|
||||||
|
obj.ctx.bufferData(obj.ctx.ARRAY_BUFFER, new Float32Array(normalArray), obj.ctx.STATIC_DRAW);
|
||||||
|
|
||||||
|
obj.texCoordObject = obj.ctx.createBuffer();
|
||||||
|
obj.ctx.bindBuffer(obj.ctx.ARRAY_BUFFER, obj.texCoordObject);
|
||||||
|
obj.ctx.bufferData(obj.ctx.ARRAY_BUFFER, new Float32Array(textureArray), obj.ctx.STATIC_DRAW);
|
||||||
|
|
||||||
|
obj.vertexObject = obj.ctx.createBuffer();
|
||||||
|
obj.ctx.bindBuffer(obj.ctx.ARRAY_BUFFER, obj.vertexObject);
|
||||||
|
obj.ctx.bufferData(obj.ctx.ARRAY_BUFFER, new Float32Array(vertexArray), obj.ctx.STATIC_DRAW);
|
||||||
|
|
||||||
|
obj.numIndices = indexArray.length;
|
||||||
|
obj.indexObject = obj.ctx.createBuffer();
|
||||||
|
obj.ctx.bindBuffer(obj.ctx.ELEMENT_ARRAY_BUFFER, obj.indexObject);
|
||||||
|
obj.ctx.bufferData(obj.ctx.ELEMENT_ARRAY_BUFFER, new Uint16Array(indexArray), obj.ctx.STREAM_DRAW);
|
||||||
|
|
||||||
|
obj.groups = groups;
|
||||||
|
|
||||||
|
obj.loaded = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Array of images curently loading
|
||||||
|
var g_loadingImages = [];
|
||||||
|
|
||||||
|
// Clears all the images currently loading.
|
||||||
|
// This is used to handle context lost events.
|
||||||
|
function clearLoadingImages() {
|
||||||
|
for (var ii = 0; ii < g_loadingImages.length; ++ii) {
|
||||||
|
g_loadingImages[ii].onload = undefined;
|
||||||
|
}
|
||||||
|
g_loadingImages = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// loadImageTexture
|
||||||
|
//
|
||||||
|
// Load the image at the passed url, place it in a new WebGLTexture object and return the WebGLTexture.
|
||||||
|
//
|
||||||
|
function loadImageTexture(ctx, url)
|
||||||
|
{
|
||||||
|
var texture = ctx.createTexture();
|
||||||
|
var image = new Image();
|
||||||
|
g_loadingImages.push(image);
|
||||||
|
image.onload = function() { doLoadImageTexture(ctx, image, texture) }
|
||||||
|
image.src = url;
|
||||||
|
return texture;
|
||||||
|
}
|
||||||
|
|
||||||
|
function doLoadImageTexture(ctx, image, texture)
|
||||||
|
{
|
||||||
|
g_loadingImages.splice(g_loadingImages.indexOf(image), 1);
|
||||||
|
ctx.bindTexture(ctx.TEXTURE_2D, texture);
|
||||||
|
ctx.texImage2D(ctx.TEXTURE_2D, 0, ctx.RGBA, ctx.RGBA, ctx.UNSIGNED_BYTE, image);
|
||||||
|
ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_MAG_FILTER, ctx.LINEAR);
|
||||||
|
ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_MIN_FILTER, ctx.LINEAR);
|
||||||
|
ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_WRAP_S, ctx.CLAMP_TO_EDGE);
|
||||||
|
ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_WRAP_T, ctx.CLAMP_TO_EDGE);
|
||||||
|
//ctx.generateMipmap(ctx.TEXTURE_2D)
|
||||||
|
ctx.bindTexture(ctx.TEXTURE_2D, null);
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Framerate object
|
||||||
|
//
|
||||||
|
// This object keeps track of framerate and displays it as the innerHTML text of the
|
||||||
|
// HTML element with the passed id. Once created you call snapshot at the end
|
||||||
|
// of every rendering cycle. Every 500ms the framerate is updated in the HTML element.
|
||||||
|
//
|
||||||
|
Framerate = function(id)
|
||||||
|
{
|
||||||
|
this.numFramerates = 10;
|
||||||
|
this.framerateUpdateInterval = 500;
|
||||||
|
this.id = id;
|
||||||
|
|
||||||
|
this.renderTime = -1;
|
||||||
|
this.framerates = [ ];
|
||||||
|
self = this;
|
||||||
|
var fr = function() { self.updateFramerate() }
|
||||||
|
setInterval(fr, this.framerateUpdateInterval);
|
||||||
|
}
|
||||||
|
|
||||||
|
Framerate.prototype.updateFramerate = function()
|
||||||
|
{
|
||||||
|
var tot = 0;
|
||||||
|
for (var i = 0; i < this.framerates.length; ++i)
|
||||||
|
tot += this.framerates[i];
|
||||||
|
|
||||||
|
var framerate = tot / this.framerates.length;
|
||||||
|
framerate = Math.round(framerate);
|
||||||
|
document.getElementById(this.id).innerHTML = "Framerate:"+framerate+"fps";
|
||||||
|
}
|
||||||
|
|
||||||
|
Framerate.prototype.snapshot = function()
|
||||||
|
{
|
||||||
|
if (this.renderTime < 0)
|
||||||
|
this.renderTime = new Date().getTime();
|
||||||
|
else {
|
||||||
|
var newTime = new Date().getTime();
|
||||||
|
var t = newTime - this.renderTime;
|
||||||
|
if (t == 0)
|
||||||
|
return;
|
||||||
|
var framerate = 1000/t;
|
||||||
|
this.framerates.push(framerate);
|
||||||
|
while (this.framerates.length > this.numFramerates)
|
||||||
|
this.framerates.shift();
|
||||||
|
this.renderTime = newTime;
|
||||||
|
}
|
||||||
|
}
|
||||||
1065
J3DIMath.js
Normal file
1065
J3DIMath.js
Normal file
File diff suppressed because it is too large
Load diff
70
index.html
Normal file
70
index.html
Normal file
|
|
@ -0,0 +1,70 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||||
|
<title>TP - WebGL</title>
|
||||||
|
<link rel="stylesheet" href="tp.css" type="text/css" media="all">
|
||||||
|
|
||||||
|
<script type="text/javascript" src="webgl-utils.js"></script>
|
||||||
|
<script type="text/javascript" src="webgl-debug.js"></script>
|
||||||
|
<script type="text/javascript" src="J3DI.js"></script>
|
||||||
|
<script type="text/javascript" src="J3DIMath.js"></script>
|
||||||
|
<script type="text/javascript" src="main.js"></script>
|
||||||
|
|
||||||
|
<script id="nuanceurSommets" type="x-shader/x-vertex">
|
||||||
|
uniform mat4 u_modelViewProjMatrix;
|
||||||
|
uniform mat4 u_normalMatrix;
|
||||||
|
uniform vec3 lightDir;
|
||||||
|
|
||||||
|
attribute vec4 vPosition;
|
||||||
|
attribute vec4 vColor;
|
||||||
|
|
||||||
|
varying float v_NdotL;
|
||||||
|
varying vec4 v_color;
|
||||||
|
|
||||||
|
void main()
|
||||||
|
{
|
||||||
|
// assigner la position du sommet
|
||||||
|
gl_Position = u_modelViewProjMatrix * vPosition;
|
||||||
|
|
||||||
|
// assigner les coordonnées de texture
|
||||||
|
v_color = vColor;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script id="nuanceurFragments" type="x-shader/x-fragment">
|
||||||
|
// informer du degré de précision qu'on veut dans les calculs
|
||||||
|
// (Plus à ce sujet: http://stackoverflow.com/questions/5366416/in-opengl-es-2-0-glsl-where-do-you-need-precision-specifiers/6336285#6336285 )
|
||||||
|
precision mediump float;
|
||||||
|
|
||||||
|
uniform sampler2D laTexture;
|
||||||
|
uniform vec2 positionSouris;
|
||||||
|
|
||||||
|
varying float v_NdotL;
|
||||||
|
varying vec4 v_color;
|
||||||
|
|
||||||
|
void main()
|
||||||
|
{
|
||||||
|
// obtenir la couleur de la texture
|
||||||
|
vec4 coul = v_color;
|
||||||
|
if ( length( positionSouris - gl_FragCoord.xy ) < 50.0 )
|
||||||
|
{
|
||||||
|
vec4 coulCercle = vec4( 1.0, 0.0, 0.0, 0.7 );
|
||||||
|
coul = coul * (1.0-coulCercle.a) + coulCercle * coulCercle.a;
|
||||||
|
// coul = coul * coulCercle; // réponse aussi acceptée
|
||||||
|
}
|
||||||
|
gl_FragColor = vec4( coul.rgb, coul.a );
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body onload="TPdebut()">
|
||||||
|
<canvas class="canevas" id="tp-canevas" height="600" width="900">
|
||||||
|
Si vous voyez ceci, votre navigateur ne supporte pas webgl.
|
||||||
|
</canvas>
|
||||||
|
|
||||||
|
<div class="text">Les <a href="http://www.khronos.org/registry/webgl/specs/latest/1.0/">spécifications de Webgl</a> sont<br>remplies d'informations intéressantes.</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
254
main.js
Normal file
254
main.js
Normal file
|
|
@ -0,0 +1,254 @@
|
||||||
|
// Prénoms, noms et matricule des membres de l'équipe:
|
||||||
|
// - Prénom1 NOM1 (matricule1)
|
||||||
|
// - Prénom2 NOM2 (matricule2)
|
||||||
|
|
||||||
|
|
||||||
|
// déclaration d'une structure pour contenir toutes les variables globales
|
||||||
|
var glob = { };
|
||||||
|
|
||||||
|
function handleMouseDown(event)
|
||||||
|
{
|
||||||
|
glob.mouseDown = true;
|
||||||
|
glob.positionSourisX = event.clientX-15;
|
||||||
|
glob.positionSourisY = event.clientY-15;
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleMouseUp(event)
|
||||||
|
{
|
||||||
|
glob.mouseDown = false;
|
||||||
|
glob.positionSourisX = null;
|
||||||
|
glob.positionSourisY = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleMouseMove(event)
|
||||||
|
{
|
||||||
|
if (!glob.mouseDown) return;
|
||||||
|
glob.positionSourisX = event.clientX-15;
|
||||||
|
glob.positionSourisY = event.clientY-15;
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// makeRepere
|
||||||
|
//
|
||||||
|
// Create a repere with vertices, normals and texCoords. Create VBOs for each as well as the index array.
|
||||||
|
// Return an object with the following properties:
|
||||||
|
//
|
||||||
|
// normalObject WebGLBuffer object for normals
|
||||||
|
// texCoordObject WebGLBuffer object for texCoords
|
||||||
|
// vertexObject WebGLBuffer object for vertices
|
||||||
|
// indexObject WebGLBuffer object for indices
|
||||||
|
// numIndices The number of indices in the indexObject
|
||||||
|
//
|
||||||
|
function makeRepere(ctx)
|
||||||
|
{
|
||||||
|
// box
|
||||||
|
// v2
|
||||||
|
// |
|
||||||
|
// |
|
||||||
|
// |
|
||||||
|
// v0 o------v1
|
||||||
|
// /
|
||||||
|
// v3
|
||||||
|
//
|
||||||
|
// vertex coords array
|
||||||
|
var vertices = new Float32Array(
|
||||||
|
[ 0, 0, 0, 1, 0, 0, // v0 -> v1 vec X
|
||||||
|
0, 0, 0, 0, 1, 0, // v0 -> v2 vec Y
|
||||||
|
0, 0, 0, 0, 0, 1 ]// v0 -> v3 vec Z
|
||||||
|
);
|
||||||
|
|
||||||
|
// colors array
|
||||||
|
var colors = new Float32Array(
|
||||||
|
[ 1, 0, 0, 1, 0, 0, // v0 -> v1 vec X
|
||||||
|
0, 1, 0, 0, 1, 0, // v0 -> v2 vec Y
|
||||||
|
0, 0, 1, 0, 0, 1 ]// v0 -> v3 vec Z
|
||||||
|
);
|
||||||
|
|
||||||
|
// index array
|
||||||
|
var indices = new Uint8Array(
|
||||||
|
[ 0, 1,
|
||||||
|
2, 3,
|
||||||
|
4, 5 ]
|
||||||
|
);
|
||||||
|
|
||||||
|
var retval = { };
|
||||||
|
|
||||||
|
retval.vertexObject = ctx.createBuffer();
|
||||||
|
ctx.bindBuffer(ctx.ARRAY_BUFFER, retval.vertexObject);
|
||||||
|
ctx.bufferData(ctx.ARRAY_BUFFER, vertices, ctx.STATIC_DRAW);
|
||||||
|
|
||||||
|
retval.colorObject = ctx.createBuffer();
|
||||||
|
ctx.bindBuffer(ctx.ARRAY_BUFFER, retval.colorObject);
|
||||||
|
ctx.bufferData(ctx.ARRAY_BUFFER, colors, ctx.STATIC_DRAW);
|
||||||
|
|
||||||
|
ctx.bindBuffer(ctx.ARRAY_BUFFER, null);
|
||||||
|
|
||||||
|
retval.indexObject = ctx.createBuffer();
|
||||||
|
ctx.bindBuffer(ctx.ELEMENT_ARRAY_BUFFER, retval.indexObject);
|
||||||
|
ctx.bufferData(ctx.ELEMENT_ARRAY_BUFFER, indices, ctx.STATIC_DRAW);
|
||||||
|
ctx.bindBuffer(ctx.ELEMENT_ARRAY_BUFFER, null);
|
||||||
|
|
||||||
|
retval.numIndices = indices.length;
|
||||||
|
|
||||||
|
return retval;
|
||||||
|
}
|
||||||
|
function TPchargerTextures()
|
||||||
|
{
|
||||||
|
// Charger une image utilisée comme texture. (Retourne un objet WebGLTexture)
|
||||||
|
glob.texture1 = loadImageTexture( gl, "images/Brouillard.jpg" );
|
||||||
|
glob.texture2 = loadImageTexture( gl, "images/Exploration.jpg" );
|
||||||
|
//glob.texture3 = loadImageTexture( gl, "images/Modelisation.jpg" );
|
||||||
|
}
|
||||||
|
|
||||||
|
function TPcreerModele()
|
||||||
|
{
|
||||||
|
// Créer une boîte. Au retour, 'glob.box' contient une structure avec
|
||||||
|
// les VBOs pour les sommets, normales, coordonnées de texture et connectivité.
|
||||||
|
glob.box = makeRepere( gl );
|
||||||
|
|
||||||
|
// Initialiser les attributs pour les sommets, les normales et les coordonnées de texture
|
||||||
|
// (dans le même ordre qu'à l'appel à simpleSetup() dans la fonction TPinitialiser())
|
||||||
|
gl.enableVertexAttribArray( 0 );
|
||||||
|
gl.bindBuffer( gl.ARRAY_BUFFER, glob.box.vertexObject );
|
||||||
|
gl.vertexAttribPointer( 0, 3, gl.FLOAT, false, 0, 0 );
|
||||||
|
|
||||||
|
gl.enableVertexAttribArray( 1 );
|
||||||
|
gl.bindBuffer( gl.ARRAY_BUFFER, glob.box.colorObject );
|
||||||
|
gl.vertexAttribPointer( 1, 3, gl.FLOAT, false, 0, 0 );
|
||||||
|
|
||||||
|
// Lier le tableau de connectivité
|
||||||
|
gl.bindBuffer( gl.ELEMENT_ARRAY_BUFFER, glob.box.indexObject );
|
||||||
|
}
|
||||||
|
|
||||||
|
function TPinitialiser()
|
||||||
|
{
|
||||||
|
// Initialiser webgl
|
||||||
|
var gl = initWebGL( "tp-canevas" ); // L'identificateur du canevas
|
||||||
|
if (!gl) return;
|
||||||
|
|
||||||
|
glob.program = simpleSetup( gl,
|
||||||
|
// Les identificateurs des deux nuanceurs
|
||||||
|
"nuanceurSommets", "nuanceurFragments",
|
||||||
|
// Les attributs utilisés par les nuanceurs (donnés dans le même ordre que leur indice)
|
||||||
|
[ "vPosition", "vColor" ],
|
||||||
|
// La couleur de fond et la profondeur
|
||||||
|
[ 0, 0, 0.3, 1 ], 100);
|
||||||
|
|
||||||
|
// Les angles courants de rotation
|
||||||
|
glob.angleRotX = 0, glob.angleRotY = 0, glob.angleRotZ = 0;
|
||||||
|
// Les incréments à chaque affichage
|
||||||
|
glob.incrRotX = 0.2; glob.incrRotY = 0.3; glob.incrRotZ = 0.4;
|
||||||
|
|
||||||
|
// Créer les matrices nécessaires et assigner les assigner dans le programme
|
||||||
|
glob.modelViewMatrix = new J3DIMatrix4();
|
||||||
|
// glob.u_modelViewMatrixLoc n'est pas utile car modelViewMatrix n'est pas utilisé dans les nuanceurs
|
||||||
|
glob.mvpMatrix = new J3DIMatrix4();
|
||||||
|
glob.u_modelViewProjMatrixLoc = gl.getUniformLocation( glob.program, "u_modelViewProjMatrix" );
|
||||||
|
glob.normalMatrix = new J3DIMatrix4();
|
||||||
|
glob.u_normalMatrixLoc = gl.getUniformLocation( glob.program, "u_normalMatrix" );
|
||||||
|
|
||||||
|
// terminer l'initialisation
|
||||||
|
TPchargerTextures();
|
||||||
|
TPcreerModele();
|
||||||
|
|
||||||
|
glob.mouseDown = false;
|
||||||
|
glob.positionSourisX = null;
|
||||||
|
glob.positionSourisY = null;
|
||||||
|
glob.canevas.onmousedown = handleMouseDown;
|
||||||
|
glob.canevas.onmouseup = handleMouseUp;
|
||||||
|
glob.canevas.onmousemove = handleMouseMove;
|
||||||
|
|
||||||
|
// Initialiser les variables uniformes pour les nuanceurs
|
||||||
|
gl.uniform3f( gl.getUniformLocation( glob.program, "lightDir" ), 0, 0, 1 );
|
||||||
|
gl.uniform1i( gl.getUniformLocation( glob.program, "laTexture" ), 0 );
|
||||||
|
gl.uniform2f( gl.getUniformLocation( glob.program, "positionSouris" ), glob.positionSourisX, glob.positionSourisY );
|
||||||
|
|
||||||
|
return gl;
|
||||||
|
}
|
||||||
|
|
||||||
|
function TPafficherModele( gl, num )
|
||||||
|
{
|
||||||
|
// Incrémenter les angles de rotation
|
||||||
|
glob.angleRotX += glob.incrRotX; if ( glob.angleRotX >= 360.0 ) glob.angleRotX -= 360.0;
|
||||||
|
glob.angleRotY += glob.incrRotY; if ( glob.angleRotY >= 360.0 ) glob.angleRotY -= 360.0;
|
||||||
|
glob.angleRotZ += glob.incrRotZ; if ( glob.angleRotZ >= 360.0 ) glob.angleRotZ -= 360.0;
|
||||||
|
|
||||||
|
// Construire la matrice de modélisation
|
||||||
|
glob.modelViewMatrix.makeIdentity();
|
||||||
|
glob.modelViewMatrix.lookat( 0, 0, 7, 0, 0, 0, 0, 1, 0 );
|
||||||
|
var sens = ( num == 1 ) ? +1 : -1;
|
||||||
|
glob.modelViewMatrix.rotate( sens*glob.angleRotX, 1.0, 0.0, 0.0 );
|
||||||
|
glob.modelViewMatrix.rotate( sens*glob.angleRotY, 0.0, 1.0, 0.0 );
|
||||||
|
glob.modelViewMatrix.rotate( sens*glob.angleRotZ, 0.0, 0.0, 1.0 );
|
||||||
|
|
||||||
|
// Construire le produit de matrice "modélisation * projection" et la passer aux nuanceurs
|
||||||
|
glob.mvpMatrix.load( glob.perspectiveMatrix );
|
||||||
|
glob.mvpMatrix.multiply( glob.modelViewMatrix );
|
||||||
|
glob.mvpMatrix.setUniform( gl, glob.u_modelViewProjMatrixLoc, false );
|
||||||
|
|
||||||
|
// Construire la matrice de transformation des normales et la passer aux nuanceurs
|
||||||
|
glob.normalMatrix.load( glob.modelViewMatrix );
|
||||||
|
glob.normalMatrix.invert();
|
||||||
|
glob.normalMatrix.transpose();
|
||||||
|
glob.normalMatrix.setUniform( gl, glob.u_normalMatrixLoc, false );
|
||||||
|
|
||||||
|
// Activer la texture à utiliser
|
||||||
|
gl.bindTexture( gl.TEXTURE_2D, ( num == 1 ) ? glob.texture1 : glob.texture2 );
|
||||||
|
|
||||||
|
gl.uniform2f( gl.getUniformLocation( glob.program, "positionSouris" ), glob.positionSourisX, glob.canevas.height-glob.positionSourisY );
|
||||||
|
|
||||||
|
// Tracer le cube
|
||||||
|
gl.drawElements( gl.LINES, glob.box.numIndices, gl.UNSIGNED_BYTE, 0 );
|
||||||
|
}
|
||||||
|
|
||||||
|
function TPafficherScene(gl)
|
||||||
|
{
|
||||||
|
glob.perspectiveMatrix = new J3DIMatrix4();
|
||||||
|
glob.perspectiveMatrix.perspective( 40, glob.canevas.width / glob.canevas.height, 1, 10 );
|
||||||
|
|
||||||
|
// Effacer le canevas
|
||||||
|
gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT );
|
||||||
|
|
||||||
|
// Définir la clôture 1
|
||||||
|
gl.viewport( 0, 0, glob.canevas.width, glob.canevas.height );
|
||||||
|
// Tracer le modèle
|
||||||
|
TPafficherModele( gl, 1 );
|
||||||
|
}
|
||||||
|
|
||||||
|
var requestId;
|
||||||
|
function TPdebut()
|
||||||
|
{
|
||||||
|
glob.canevas = document.getElementById('tp-canevas');
|
||||||
|
//glob.canevas = WebGLDebugUtils.makeLostContextSimulatingCanvas(c);
|
||||||
|
// indiquer de perdre le contexte afin de tester
|
||||||
|
//glob.canevas.loseContextInNCalls(15);
|
||||||
|
glob.canevas.addEventListener('webglcontextlost', handleContextLost, false);
|
||||||
|
glob.canevas.addEventListener('webglcontextrestored', handleContextRestored, false);
|
||||||
|
|
||||||
|
var gl = TPinitialiser();
|
||||||
|
if ( !gl ) return;
|
||||||
|
|
||||||
|
var displayFunc = function()
|
||||||
|
{
|
||||||
|
TPafficherScene(gl);
|
||||||
|
requestId = window.requestAnimFrame( displayFunc, glob.canevas );
|
||||||
|
};
|
||||||
|
displayFunc();
|
||||||
|
|
||||||
|
function handleContextLost(e)
|
||||||
|
{
|
||||||
|
e.preventDefault();
|
||||||
|
clearLoadingImages();
|
||||||
|
if ( requestId !== undefined )
|
||||||
|
{
|
||||||
|
window.cancelAnimFrame(requestId);
|
||||||
|
requestId = undefined;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleContextRestored()
|
||||||
|
{
|
||||||
|
TPinitialiser();
|
||||||
|
displayFunc();
|
||||||
|
}
|
||||||
|
}
|
||||||
16
tp.css
Normal file
16
tp.css
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
.text {
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
left: 20px;
|
||||||
|
font-size: 1em;
|
||||||
|
color: orange;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:link { color: yellow; }
|
||||||
|
a:hover { color: #bbaa00; }
|
||||||
|
|
||||||
|
.canevas {
|
||||||
|
height: 600px;
|
||||||
|
width: 900px;
|
||||||
|
border: 5px solid orange;
|
||||||
|
}
|
||||||
875
webgl-debug.js
Normal file
875
webgl-debug.js
Normal file
|
|
@ -0,0 +1,875 @@
|
||||||
|
/*
|
||||||
|
** Copyright (c) 2012 The Khronos Group Inc.
|
||||||
|
**
|
||||||
|
** Permission is hereby granted, free of charge, to any person obtaining a
|
||||||
|
** copy of this software and/or associated documentation files (the
|
||||||
|
** "Materials"), to deal in the Materials without restriction, including
|
||||||
|
** without limitation the rights to use, copy, modify, merge, publish,
|
||||||
|
** distribute, sublicense, and/or sell copies of the Materials, and to
|
||||||
|
** permit persons to whom the Materials are furnished to do so, subject to
|
||||||
|
** the following conditions:
|
||||||
|
**
|
||||||
|
** The above copyright notice and this permission notice shall be included
|
||||||
|
** in all copies or substantial portions of the Materials.
|
||||||
|
**
|
||||||
|
** THE MATERIALS ARE PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||||
|
** EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||||||
|
** MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
|
||||||
|
** IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
|
||||||
|
** CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
|
||||||
|
** TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
|
||||||
|
** MATERIALS OR THE USE OR OTHER DEALINGS IN THE MATERIALS.
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Various functions for helping debug WebGL apps.
|
||||||
|
|
||||||
|
WebGLDebugUtils = function() {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Wrapped logging function.
|
||||||
|
* @param {string} msg Message to log.
|
||||||
|
*/
|
||||||
|
var log = function(msg) {
|
||||||
|
if (window.console && window.console.log) {
|
||||||
|
window.console.log(msg);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Wrapped error logging function.
|
||||||
|
* @param {string} msg Message to log.
|
||||||
|
*/
|
||||||
|
var error = function(msg) {
|
||||||
|
if (window.console && window.console.error) {
|
||||||
|
window.console.error(msg);
|
||||||
|
} else {
|
||||||
|
log(msg);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Which arguements are enums.
|
||||||
|
* @type {!Object.<number, string>}
|
||||||
|
*/
|
||||||
|
var glValidEnumContexts = {
|
||||||
|
|
||||||
|
// Generic setters and getters
|
||||||
|
|
||||||
|
'enable': { 0:true },
|
||||||
|
'disable': { 0:true },
|
||||||
|
'getParameter': { 0:true },
|
||||||
|
|
||||||
|
// Rendering
|
||||||
|
|
||||||
|
'drawArrays': { 0:true },
|
||||||
|
'drawElements': { 0:true, 2:true },
|
||||||
|
|
||||||
|
// Shaders
|
||||||
|
|
||||||
|
'createShader': { 0:true },
|
||||||
|
'getShaderParameter': { 1:true },
|
||||||
|
'getProgramParameter': { 1:true },
|
||||||
|
|
||||||
|
// Vertex attributes
|
||||||
|
|
||||||
|
'getVertexAttrib': { 1:true },
|
||||||
|
'vertexAttribPointer': { 2:true },
|
||||||
|
|
||||||
|
// Textures
|
||||||
|
|
||||||
|
'bindTexture': { 0:true },
|
||||||
|
'activeTexture': { 0:true },
|
||||||
|
'getTexParameter': { 0:true, 1:true },
|
||||||
|
'texParameterf': { 0:true, 1:true },
|
||||||
|
'texParameteri': { 0:true, 1:true, 2:true },
|
||||||
|
'texImage2D': { 0:true, 2:true, 6:true, 7:true },
|
||||||
|
'texSubImage2D': { 0:true, 6:true, 7:true },
|
||||||
|
'copyTexImage2D': { 0:true, 2:true },
|
||||||
|
'copyTexSubImage2D': { 0:true },
|
||||||
|
'generateMipmap': { 0:true },
|
||||||
|
|
||||||
|
// Buffer objects
|
||||||
|
|
||||||
|
'bindBuffer': { 0:true },
|
||||||
|
'bufferData': { 0:true, 2:true },
|
||||||
|
'bufferSubData': { 0:true },
|
||||||
|
'getBufferParameter': { 0:true, 1:true },
|
||||||
|
|
||||||
|
// Renderbuffers and framebuffers
|
||||||
|
|
||||||
|
'pixelStorei': { 0:true, 1:true },
|
||||||
|
'readPixels': { 4:true, 5:true },
|
||||||
|
'bindRenderbuffer': { 0:true },
|
||||||
|
'bindFramebuffer': { 0:true },
|
||||||
|
'checkFramebufferStatus': { 0:true },
|
||||||
|
'framebufferRenderbuffer': { 0:true, 1:true, 2:true },
|
||||||
|
'framebufferTexture2D': { 0:true, 1:true, 2:true },
|
||||||
|
'getFramebufferAttachmentParameter': { 0:true, 1:true, 2:true },
|
||||||
|
'getRenderbufferParameter': { 0:true, 1:true },
|
||||||
|
'renderbufferStorage': { 0:true, 1:true },
|
||||||
|
|
||||||
|
// Frame buffer operations (clear, blend, depth test, stencil)
|
||||||
|
|
||||||
|
'clear': { 0:true },
|
||||||
|
'depthFunc': { 0:true },
|
||||||
|
'blendFunc': { 0:true, 1:true },
|
||||||
|
'blendFuncSeparate': { 0:true, 1:true, 2:true, 3:true },
|
||||||
|
'blendEquation': { 0:true },
|
||||||
|
'blendEquationSeparate': { 0:true, 1:true },
|
||||||
|
'stencilFunc': { 0:true },
|
||||||
|
'stencilFuncSeparate': { 0:true, 1:true },
|
||||||
|
'stencilMaskSeparate': { 0:true },
|
||||||
|
'stencilOp': { 0:true, 1:true, 2:true },
|
||||||
|
'stencilOpSeparate': { 0:true, 1:true, 2:true, 3:true },
|
||||||
|
|
||||||
|
// Culling
|
||||||
|
|
||||||
|
'cullFace': { 0:true },
|
||||||
|
'frontFace': { 0:true },
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Map of numbers to names.
|
||||||
|
* @type {Object}
|
||||||
|
*/
|
||||||
|
var glEnums = null;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Initializes this module. Safe to call more than once.
|
||||||
|
* @param {!WebGLRenderingContext} ctx A WebGL context. If
|
||||||
|
* you have more than one context it doesn't matter which one
|
||||||
|
* you pass in, it is only used to pull out constants.
|
||||||
|
*/
|
||||||
|
function init(ctx) {
|
||||||
|
if (glEnums == null) {
|
||||||
|
glEnums = { };
|
||||||
|
for (var propertyName in ctx) {
|
||||||
|
if (typeof ctx[propertyName] == 'number') {
|
||||||
|
glEnums[ctx[propertyName]] = propertyName;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Checks the utils have been initialized.
|
||||||
|
*/
|
||||||
|
function checkInit() {
|
||||||
|
if (glEnums == null) {
|
||||||
|
throw 'WebGLDebugUtils.init(ctx) not called';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns true or false if value matches any WebGL enum
|
||||||
|
* @param {*} value Value to check if it might be an enum.
|
||||||
|
* @return {boolean} True if value matches one of the WebGL defined enums
|
||||||
|
*/
|
||||||
|
function mightBeEnum(value) {
|
||||||
|
checkInit();
|
||||||
|
return (glEnums[value] !== undefined);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Gets an string version of an WebGL enum.
|
||||||
|
*
|
||||||
|
* Example:
|
||||||
|
* var str = WebGLDebugUtil.glEnumToString(ctx.getError());
|
||||||
|
*
|
||||||
|
* @param {number} value Value to return an enum for
|
||||||
|
* @return {string} The string version of the enum.
|
||||||
|
*/
|
||||||
|
function glEnumToString(value) {
|
||||||
|
checkInit();
|
||||||
|
var name = glEnums[value];
|
||||||
|
return (name !== undefined) ? name :
|
||||||
|
("*UNKNOWN WebGL ENUM (0x" + value.toString(16) + ")");
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns the string version of a WebGL argument.
|
||||||
|
* Attempts to convert enum arguments to strings.
|
||||||
|
* @param {string} functionName the name of the WebGL function.
|
||||||
|
* @param {number} argumentIndx the index of the argument.
|
||||||
|
* @param {*} value The value of the argument.
|
||||||
|
* @return {string} The value as a string.
|
||||||
|
*/
|
||||||
|
function glFunctionArgToString(functionName, argumentIndex, value) {
|
||||||
|
var funcInfo = glValidEnumContexts[functionName];
|
||||||
|
if (funcInfo !== undefined) {
|
||||||
|
if (funcInfo[argumentIndex]) {
|
||||||
|
return glEnumToString(value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (value === null) {
|
||||||
|
return "null";
|
||||||
|
} else if (value === undefined) {
|
||||||
|
return "undefined";
|
||||||
|
} else {
|
||||||
|
return value.toString();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Converts the arguments of a WebGL function to a string.
|
||||||
|
* Attempts to convert enum arguments to strings.
|
||||||
|
*
|
||||||
|
* @param {string} functionName the name of the WebGL function.
|
||||||
|
* @param {number} args The arguments.
|
||||||
|
* @return {string} The arguments as a string.
|
||||||
|
*/
|
||||||
|
function glFunctionArgsToString(functionName, args) {
|
||||||
|
// apparently we can't do args.join(",");
|
||||||
|
var argStr = "";
|
||||||
|
for (var ii = 0; ii < args.length; ++ii) {
|
||||||
|
argStr += ((ii == 0) ? '' : ', ') +
|
||||||
|
glFunctionArgToString(functionName, ii, args[ii]);
|
||||||
|
}
|
||||||
|
return argStr;
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
function makePropertyWrapper(wrapper, original, propertyName) {
|
||||||
|
//log("wrap prop: " + propertyName);
|
||||||
|
wrapper.__defineGetter__(propertyName, function() {
|
||||||
|
return original[propertyName];
|
||||||
|
});
|
||||||
|
// TODO(gmane): this needs to handle properties that take more than
|
||||||
|
// one value?
|
||||||
|
wrapper.__defineSetter__(propertyName, function(value) {
|
||||||
|
//log("set: " + propertyName);
|
||||||
|
original[propertyName] = value;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Makes a function that calls a function on another object.
|
||||||
|
function makeFunctionWrapper(original, functionName) {
|
||||||
|
//log("wrap fn: " + functionName);
|
||||||
|
var f = original[functionName];
|
||||||
|
return function() {
|
||||||
|
//log("call: " + functionName);
|
||||||
|
var result = f.apply(original, arguments);
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Given a WebGL context returns a wrapped context that calls
|
||||||
|
* gl.getError after every command and calls a function if the
|
||||||
|
* result is not gl.NO_ERROR.
|
||||||
|
*
|
||||||
|
* @param {!WebGLRenderingContext} ctx The webgl context to
|
||||||
|
* wrap.
|
||||||
|
* @param {!function(err, funcName, args): void} opt_onErrorFunc
|
||||||
|
* The function to call when gl.getError returns an
|
||||||
|
* error. If not specified the default function calls
|
||||||
|
* console.log with a message.
|
||||||
|
* @param {!function(funcName, args): void} opt_onFunc The
|
||||||
|
* function to call when each webgl function is called.
|
||||||
|
* You can use this to log all calls for example.
|
||||||
|
*/
|
||||||
|
function makeDebugContext(ctx, opt_onErrorFunc, opt_onFunc) {
|
||||||
|
init(ctx);
|
||||||
|
opt_onErrorFunc = opt_onErrorFunc || function(err, functionName, args) {
|
||||||
|
// apparently we can't do args.join(",");
|
||||||
|
var argStr = "";
|
||||||
|
for (var ii = 0; ii < args.length; ++ii) {
|
||||||
|
argStr += ((ii == 0) ? '' : ', ') +
|
||||||
|
glFunctionArgToString(functionName, ii, args[ii]);
|
||||||
|
}
|
||||||
|
error("WebGL error "+ glEnumToString(err) + " in "+ functionName +
|
||||||
|
"(" + argStr + ")");
|
||||||
|
};
|
||||||
|
|
||||||
|
// Holds booleans for each GL error so after we get the error ourselves
|
||||||
|
// we can still return it to the client app.
|
||||||
|
var glErrorShadow = { };
|
||||||
|
|
||||||
|
// Makes a function that calls a WebGL function and then calls getError.
|
||||||
|
function makeErrorWrapper(ctx, functionName) {
|
||||||
|
return function() {
|
||||||
|
if (opt_onFunc) {
|
||||||
|
opt_onFunc(functionName, arguments);
|
||||||
|
}
|
||||||
|
var result = ctx[functionName].apply(ctx, arguments);
|
||||||
|
var err = ctx.getError();
|
||||||
|
if (err != 0) {
|
||||||
|
glErrorShadow[err] = true;
|
||||||
|
opt_onErrorFunc(err, functionName, arguments);
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// Make a an object that has a copy of every property of the WebGL context
|
||||||
|
// but wraps all functions.
|
||||||
|
var wrapper = {};
|
||||||
|
for (var propertyName in ctx) {
|
||||||
|
if (typeof ctx[propertyName] == 'function') {
|
||||||
|
wrapper[propertyName] = makeErrorWrapper(ctx, propertyName);
|
||||||
|
} else {
|
||||||
|
makePropertyWrapper(wrapper, ctx, propertyName);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Override the getError function with one that returns our saved results.
|
||||||
|
wrapper.getError = function() {
|
||||||
|
for (var err in glErrorShadow) {
|
||||||
|
if (glErrorShadow.hasOwnProperty(err)) {
|
||||||
|
if (glErrorShadow[err]) {
|
||||||
|
glErrorShadow[err] = false;
|
||||||
|
return err;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return ctx.NO_ERROR;
|
||||||
|
};
|
||||||
|
|
||||||
|
return wrapper;
|
||||||
|
}
|
||||||
|
|
||||||
|
function resetToInitialState(ctx) {
|
||||||
|
var numAttribs = ctx.getParameter(ctx.MAX_VERTEX_ATTRIBS);
|
||||||
|
var tmp = ctx.createBuffer();
|
||||||
|
ctx.bindBuffer(ctx.ARRAY_BUFFER, tmp);
|
||||||
|
for (var ii = 0; ii < numAttribs; ++ii) {
|
||||||
|
ctx.disableVertexAttribArray(ii);
|
||||||
|
ctx.vertexAttribPointer(ii, 4, ctx.FLOAT, false, 0, 0);
|
||||||
|
ctx.vertexAttrib1f(ii, 0);
|
||||||
|
}
|
||||||
|
ctx.deleteBuffer(tmp);
|
||||||
|
|
||||||
|
var numTextureUnits = ctx.getParameter(ctx.MAX_TEXTURE_IMAGE_UNITS);
|
||||||
|
for (var ii = 0; ii < numTextureUnits; ++ii) {
|
||||||
|
ctx.activeTexture(ctx.TEXTURE0 + ii);
|
||||||
|
ctx.bindTexture(ctx.TEXTURE_CUBE_MAP, null);
|
||||||
|
ctx.bindTexture(ctx.TEXTURE_2D, null);
|
||||||
|
}
|
||||||
|
|
||||||
|
ctx.activeTexture(ctx.TEXTURE0);
|
||||||
|
ctx.useProgram(null);
|
||||||
|
ctx.bindBuffer(ctx.ARRAY_BUFFER, null);
|
||||||
|
ctx.bindBuffer(ctx.ELEMENT_ARRAY_BUFFER, null);
|
||||||
|
ctx.bindFramebuffer(ctx.FRAMEBUFFER, null);
|
||||||
|
ctx.bindRenderbuffer(ctx.RENDERBUFFER, null);
|
||||||
|
ctx.disable(ctx.BLEND);
|
||||||
|
ctx.disable(ctx.CULL_FACE);
|
||||||
|
ctx.disable(ctx.DEPTH_TEST);
|
||||||
|
ctx.disable(ctx.DITHER);
|
||||||
|
ctx.disable(ctx.SCISSOR_TEST);
|
||||||
|
ctx.blendColor(0, 0, 0, 0);
|
||||||
|
ctx.blendEquation(ctx.FUNC_ADD);
|
||||||
|
ctx.blendFunc(ctx.ONE, ctx.ZERO);
|
||||||
|
ctx.clearColor(0, 0, 0, 0);
|
||||||
|
ctx.clearDepth(1);
|
||||||
|
ctx.clearStencil(-1);
|
||||||
|
ctx.colorMask(true, true, true, true);
|
||||||
|
ctx.cullFace(ctx.BACK);
|
||||||
|
ctx.depthFunc(ctx.LESS);
|
||||||
|
ctx.depthMask(true);
|
||||||
|
ctx.depthRange(0, 1);
|
||||||
|
ctx.frontFace(ctx.CCW);
|
||||||
|
ctx.hint(ctx.GENERATE_MIPMAP_HINT, ctx.DONT_CARE);
|
||||||
|
ctx.lineWidth(1);
|
||||||
|
ctx.pixelStorei(ctx.PACK_ALIGNMENT, 4);
|
||||||
|
ctx.pixelStorei(ctx.UNPACK_ALIGNMENT, 4);
|
||||||
|
ctx.pixelStorei(ctx.UNPACK_FLIP_Y_WEBGL, false);
|
||||||
|
ctx.pixelStorei(ctx.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
|
||||||
|
// TODO: Delete this IF.
|
||||||
|
if (ctx.UNPACK_COLORSPACE_CONVERSION_WEBGL) {
|
||||||
|
ctx.pixelStorei(ctx.UNPACK_COLORSPACE_CONVERSION_WEBGL, ctx.BROWSER_DEFAULT_WEBGL);
|
||||||
|
}
|
||||||
|
ctx.polygonOffset(0, 0);
|
||||||
|
ctx.sampleCoverage(1, false);
|
||||||
|
ctx.scissor(0, 0, ctx.canvas.width, ctx.canvas.height);
|
||||||
|
ctx.stencilFunc(ctx.ALWAYS, 0, 0xFFFFFFFF);
|
||||||
|
ctx.stencilMask(0xFFFFFFFF);
|
||||||
|
ctx.stencilOp(ctx.KEEP, ctx.KEEP, ctx.KEEP);
|
||||||
|
ctx.viewport(0, 0, ctx.canvas.width, ctx.canvas.height);
|
||||||
|
ctx.clear(ctx.COLOR_BUFFER_BIT | ctx.DEPTH_BUFFER_BIT | ctx.STENCIL_BUFFER_BIT);
|
||||||
|
|
||||||
|
// TODO: This should NOT be needed but Firefox fails with 'hint'
|
||||||
|
while(ctx.getError());
|
||||||
|
}
|
||||||
|
|
||||||
|
function makeLostContextSimulatingCanvas(canvas) {
|
||||||
|
var unwrappedContext_;
|
||||||
|
var wrappedContext_;
|
||||||
|
var onLost_ = [];
|
||||||
|
var onRestored_ = [];
|
||||||
|
var wrappedContext_ = {};
|
||||||
|
var contextId_ = 1;
|
||||||
|
var contextLost_ = false;
|
||||||
|
var resourceId_ = 0;
|
||||||
|
var resourceDb_ = [];
|
||||||
|
var numCallsToLoseContext_ = 0;
|
||||||
|
var numCalls_ = 0;
|
||||||
|
var canRestore_ = false;
|
||||||
|
var restoreTimeout_ = 0;
|
||||||
|
|
||||||
|
// Holds booleans for each GL error so can simulate errors.
|
||||||
|
var glErrorShadow_ = { };
|
||||||
|
|
||||||
|
canvas.getContext = function(f) {
|
||||||
|
return function() {
|
||||||
|
var ctx = f.apply(canvas, arguments);
|
||||||
|
// Did we get a context and is it a WebGL context?
|
||||||
|
if (ctx instanceof WebGLRenderingContext) {
|
||||||
|
if (ctx != unwrappedContext_) {
|
||||||
|
if (unwrappedContext_) {
|
||||||
|
throw "got different context"
|
||||||
|
}
|
||||||
|
unwrappedContext_ = ctx;
|
||||||
|
wrappedContext_ = makeLostContextSimulatingContext(unwrappedContext_);
|
||||||
|
}
|
||||||
|
return wrappedContext_;
|
||||||
|
}
|
||||||
|
return ctx;
|
||||||
|
}
|
||||||
|
}(canvas.getContext);
|
||||||
|
|
||||||
|
function wrapEvent(listener) {
|
||||||
|
if (typeof(listener) == "function") {
|
||||||
|
return listener;
|
||||||
|
} else {
|
||||||
|
return function(info) {
|
||||||
|
listener.handleEvent(info);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var addOnContextLostListener = function(listener) {
|
||||||
|
onLost_.push(wrapEvent(listener));
|
||||||
|
};
|
||||||
|
|
||||||
|
var addOnContextRestoredListener = function(listener) {
|
||||||
|
onRestored_.push(wrapEvent(listener));
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
function wrapAddEventListener(canvas) {
|
||||||
|
var f = canvas.addEventListener;
|
||||||
|
canvas.addEventListener = function(type, listener, bubble) {
|
||||||
|
switch (type) {
|
||||||
|
case 'webglcontextlost':
|
||||||
|
addOnContextLostListener(listener);
|
||||||
|
break;
|
||||||
|
case 'webglcontextrestored':
|
||||||
|
addOnContextRestoredListener(listener);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
f.apply(canvas, arguments);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
wrapAddEventListener(canvas);
|
||||||
|
|
||||||
|
canvas.loseContext = function() {
|
||||||
|
if (!contextLost_) {
|
||||||
|
contextLost_ = true;
|
||||||
|
numCallsToLoseContext_ = 0;
|
||||||
|
++contextId_;
|
||||||
|
while (unwrappedContext_.getError());
|
||||||
|
clearErrors();
|
||||||
|
glErrorShadow_[unwrappedContext_.CONTEXT_LOST_WEBGL] = true;
|
||||||
|
var event = makeWebGLContextEvent("context lost");
|
||||||
|
var callbacks = onLost_.slice();
|
||||||
|
setTimeout(function() {
|
||||||
|
//log("numCallbacks:" + callbacks.length);
|
||||||
|
for (var ii = 0; ii < callbacks.length; ++ii) {
|
||||||
|
//log("calling callback:" + ii);
|
||||||
|
callbacks[ii](event);
|
||||||
|
}
|
||||||
|
if (restoreTimeout_ >= 0) {
|
||||||
|
setTimeout(function() {
|
||||||
|
canvas.restoreContext();
|
||||||
|
}, restoreTimeout_);
|
||||||
|
}
|
||||||
|
}, 0);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
canvas.restoreContext = function() {
|
||||||
|
if (contextLost_) {
|
||||||
|
if (onRestored_.length) {
|
||||||
|
setTimeout(function() {
|
||||||
|
if (!canRestore_) {
|
||||||
|
throw "can not restore. webglcontestlost listener did not call event.preventDefault";
|
||||||
|
}
|
||||||
|
freeResources();
|
||||||
|
resetToInitialState(unwrappedContext_);
|
||||||
|
contextLost_ = false;
|
||||||
|
numCalls_ = 0;
|
||||||
|
canRestore_ = false;
|
||||||
|
var callbacks = onRestored_.slice();
|
||||||
|
var event = makeWebGLContextEvent("context restored");
|
||||||
|
for (var ii = 0; ii < callbacks.length; ++ii) {
|
||||||
|
callbacks[ii](event);
|
||||||
|
}
|
||||||
|
}, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
canvas.loseContextInNCalls = function(numCalls) {
|
||||||
|
if (contextLost_) {
|
||||||
|
throw "You can not ask a lost contet to be lost";
|
||||||
|
}
|
||||||
|
numCallsToLoseContext_ = numCalls_ + numCalls;
|
||||||
|
};
|
||||||
|
|
||||||
|
canvas.getNumCalls = function() {
|
||||||
|
return numCalls_;
|
||||||
|
};
|
||||||
|
|
||||||
|
canvas.setRestoreTimeout = function(timeout) {
|
||||||
|
restoreTimeout_ = timeout;
|
||||||
|
};
|
||||||
|
|
||||||
|
function isWebGLObject(obj) {
|
||||||
|
//return false;
|
||||||
|
return (obj instanceof WebGLBuffer ||
|
||||||
|
obj instanceof WebGLFramebuffer ||
|
||||||
|
obj instanceof WebGLProgram ||
|
||||||
|
obj instanceof WebGLRenderbuffer ||
|
||||||
|
obj instanceof WebGLShader ||
|
||||||
|
obj instanceof WebGLTexture);
|
||||||
|
}
|
||||||
|
|
||||||
|
function checkResources(args) {
|
||||||
|
for (var ii = 0; ii < args.length; ++ii) {
|
||||||
|
var arg = args[ii];
|
||||||
|
if (isWebGLObject(arg)) {
|
||||||
|
return arg.__webglDebugContextLostId__ == contextId_;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearErrors() {
|
||||||
|
var k = Object.keys(glErrorShadow_);
|
||||||
|
for (var ii = 0; ii < k.length; ++ii) {
|
||||||
|
delete glErrorShadow_[k];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function loseContextIfTime() {
|
||||||
|
++numCalls_;
|
||||||
|
if (!contextLost_) {
|
||||||
|
if (numCallsToLoseContext_ == numCalls_) {
|
||||||
|
canvas.loseContext();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Makes a function that simulates WebGL when out of context.
|
||||||
|
function makeLostContextFunctionWrapper(ctx, functionName) {
|
||||||
|
var f = ctx[functionName];
|
||||||
|
return function() {
|
||||||
|
// log("calling:" + functionName);
|
||||||
|
// Only call the functions if the context is not lost.
|
||||||
|
loseContextIfTime();
|
||||||
|
if (!contextLost_) {
|
||||||
|
//if (!checkResources(arguments)) {
|
||||||
|
// glErrorShadow_[wrappedContext_.INVALID_OPERATION] = true;
|
||||||
|
// return;
|
||||||
|
//}
|
||||||
|
var result = f.apply(ctx, arguments);
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function freeResources() {
|
||||||
|
for (var ii = 0; ii < resourceDb_.length; ++ii) {
|
||||||
|
var resource = resourceDb_[ii];
|
||||||
|
if (resource instanceof WebGLBuffer) {
|
||||||
|
unwrappedContext_.deleteBuffer(resource);
|
||||||
|
} else if (resource instanceof WebGLFramebuffer) {
|
||||||
|
unwrappedContext_.deleteFramebuffer(resource);
|
||||||
|
} else if (resource instanceof WebGLProgram) {
|
||||||
|
unwrappedContext_.deleteProgram(resource);
|
||||||
|
} else if (resource instanceof WebGLRenderbuffer) {
|
||||||
|
unwrappedContext_.deleteRenderbuffer(resource);
|
||||||
|
} else if (resource instanceof WebGLShader) {
|
||||||
|
unwrappedContext_.deleteShader(resource);
|
||||||
|
} else if (resource instanceof WebGLTexture) {
|
||||||
|
unwrappedContext_.deleteTexture(resource);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function makeWebGLContextEvent(statusMessage) {
|
||||||
|
return {
|
||||||
|
statusMessage: statusMessage,
|
||||||
|
preventDefault: function() {
|
||||||
|
canRestore_ = true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return canvas;
|
||||||
|
|
||||||
|
function makeLostContextSimulatingContext(ctx) {
|
||||||
|
// copy all functions and properties to wrapper
|
||||||
|
for (var propertyName in ctx) {
|
||||||
|
if (typeof ctx[propertyName] == 'function') {
|
||||||
|
wrappedContext_[propertyName] = makeLostContextFunctionWrapper(
|
||||||
|
ctx, propertyName);
|
||||||
|
} else {
|
||||||
|
makePropertyWrapper(wrappedContext_, ctx, propertyName);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Wrap a few functions specially.
|
||||||
|
wrappedContext_.getError = function() {
|
||||||
|
loseContextIfTime();
|
||||||
|
if (!contextLost_) {
|
||||||
|
var err;
|
||||||
|
while (err = unwrappedContext_.getError()) {
|
||||||
|
glErrorShadow_[err] = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
for (var err in glErrorShadow_) {
|
||||||
|
if (glErrorShadow_[err]) {
|
||||||
|
delete glErrorShadow_[err];
|
||||||
|
return err;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return wrappedContext_.NO_ERROR;
|
||||||
|
};
|
||||||
|
|
||||||
|
var creationFunctions = [
|
||||||
|
"createBuffer",
|
||||||
|
"createFramebuffer",
|
||||||
|
"createProgram",
|
||||||
|
"createRenderbuffer",
|
||||||
|
"createShader",
|
||||||
|
"createTexture"
|
||||||
|
];
|
||||||
|
for (var ii = 0; ii < creationFunctions.length; ++ii) {
|
||||||
|
var functionName = creationFunctions[ii];
|
||||||
|
wrappedContext_[functionName] = function(f) {
|
||||||
|
return function() {
|
||||||
|
loseContextIfTime();
|
||||||
|
if (contextLost_) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
var obj = f.apply(ctx, arguments);
|
||||||
|
obj.__webglDebugContextLostId__ = contextId_;
|
||||||
|
resourceDb_.push(obj);
|
||||||
|
return obj;
|
||||||
|
};
|
||||||
|
}(ctx[functionName]);
|
||||||
|
}
|
||||||
|
|
||||||
|
var functionsThatShouldReturnNull = [
|
||||||
|
"getActiveAttrib",
|
||||||
|
"getActiveUniform",
|
||||||
|
"getBufferParameter",
|
||||||
|
"getContextAttributes",
|
||||||
|
"getAttachedShaders",
|
||||||
|
"getFramebufferAttachmentParameter",
|
||||||
|
"getParameter",
|
||||||
|
"getProgramParameter",
|
||||||
|
"getProgramInfoLog",
|
||||||
|
"getRenderbufferParameter",
|
||||||
|
"getShaderParameter",
|
||||||
|
"getShaderInfoLog",
|
||||||
|
"getShaderSource",
|
||||||
|
"getTexParameter",
|
||||||
|
"getUniform",
|
||||||
|
"getUniformLocation",
|
||||||
|
"getVertexAttrib"
|
||||||
|
];
|
||||||
|
for (var ii = 0; ii < functionsThatShouldReturnNull.length; ++ii) {
|
||||||
|
var functionName = functionsThatShouldReturnNull[ii];
|
||||||
|
wrappedContext_[functionName] = function(f) {
|
||||||
|
return function() {
|
||||||
|
loseContextIfTime();
|
||||||
|
if (contextLost_) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
return f.apply(ctx, arguments);
|
||||||
|
}
|
||||||
|
}(wrappedContext_[functionName]);
|
||||||
|
}
|
||||||
|
|
||||||
|
var isFunctions = [
|
||||||
|
"isBuffer",
|
||||||
|
"isEnabled",
|
||||||
|
"isFramebuffer",
|
||||||
|
"isProgram",
|
||||||
|
"isRenderbuffer",
|
||||||
|
"isShader",
|
||||||
|
"isTexture"
|
||||||
|
];
|
||||||
|
for (var ii = 0; ii < isFunctions.length; ++ii) {
|
||||||
|
var functionName = isFunctions[ii];
|
||||||
|
wrappedContext_[functionName] = function(f) {
|
||||||
|
return function() {
|
||||||
|
loseContextIfTime();
|
||||||
|
if (contextLost_) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return f.apply(ctx, arguments);
|
||||||
|
}
|
||||||
|
}(wrappedContext_[functionName]);
|
||||||
|
}
|
||||||
|
|
||||||
|
wrappedContext_.checkFramebufferStatus = function(f) {
|
||||||
|
return function() {
|
||||||
|
loseContextIfTime();
|
||||||
|
if (contextLost_) {
|
||||||
|
return wrappedContext_.FRAMEBUFFER_UNSUPPORTED;
|
||||||
|
}
|
||||||
|
return f.apply(ctx, arguments);
|
||||||
|
};
|
||||||
|
}(wrappedContext_.checkFramebufferStatus);
|
||||||
|
|
||||||
|
wrappedContext_.getAttribLocation = function(f) {
|
||||||
|
return function() {
|
||||||
|
loseContextIfTime();
|
||||||
|
if (contextLost_) {
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
return f.apply(ctx, arguments);
|
||||||
|
};
|
||||||
|
}(wrappedContext_.getAttribLocation);
|
||||||
|
|
||||||
|
wrappedContext_.getVertexAttribOffset = function(f) {
|
||||||
|
return function() {
|
||||||
|
loseContextIfTime();
|
||||||
|
if (contextLost_) {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
return f.apply(ctx, arguments);
|
||||||
|
};
|
||||||
|
}(wrappedContext_.getVertexAttribOffset);
|
||||||
|
|
||||||
|
wrappedContext_.isContextLost = function() {
|
||||||
|
return contextLost_;
|
||||||
|
};
|
||||||
|
|
||||||
|
return wrappedContext_;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
/**
|
||||||
|
* Initializes this module. Safe to call more than once.
|
||||||
|
* @param {!WebGLRenderingContext} ctx A WebGL context. If
|
||||||
|
}
|
||||||
|
* you have more than one context it doesn't matter which one
|
||||||
|
* you pass in, it is only used to pull out constants.
|
||||||
|
*/
|
||||||
|
'init': init,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns true or false if value matches any WebGL enum
|
||||||
|
* @param {*} value Value to check if it might be an enum.
|
||||||
|
* @return {boolean} True if value matches one of the WebGL defined enums
|
||||||
|
*/
|
||||||
|
'mightBeEnum': mightBeEnum,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Gets an string version of an WebGL enum.
|
||||||
|
*
|
||||||
|
* Example:
|
||||||
|
* WebGLDebugUtil.init(ctx);
|
||||||
|
* var str = WebGLDebugUtil.glEnumToString(ctx.getError());
|
||||||
|
*
|
||||||
|
* @param {number} value Value to return an enum for
|
||||||
|
* @return {string} The string version of the enum.
|
||||||
|
*/
|
||||||
|
'glEnumToString': glEnumToString,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Converts the argument of a WebGL function to a string.
|
||||||
|
* Attempts to convert enum arguments to strings.
|
||||||
|
*
|
||||||
|
* Example:
|
||||||
|
* WebGLDebugUtil.init(ctx);
|
||||||
|
* var str = WebGLDebugUtil.glFunctionArgToString('bindTexture', 0, gl.TEXTURE_2D);
|
||||||
|
*
|
||||||
|
* would return 'TEXTURE_2D'
|
||||||
|
*
|
||||||
|
* @param {string} functionName the name of the WebGL function.
|
||||||
|
* @param {number} argumentIndx the index of the argument.
|
||||||
|
* @param {*} value The value of the argument.
|
||||||
|
* @return {string} The value as a string.
|
||||||
|
*/
|
||||||
|
'glFunctionArgToString': glFunctionArgToString,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Converts the arguments of a WebGL function to a string.
|
||||||
|
* Attempts to convert enum arguments to strings.
|
||||||
|
*
|
||||||
|
* @param {string} functionName the name of the WebGL function.
|
||||||
|
* @param {number} args The arguments.
|
||||||
|
* @return {string} The arguments as a string.
|
||||||
|
*/
|
||||||
|
'glFunctionArgsToString': glFunctionArgsToString,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Given a WebGL context returns a wrapped context that calls
|
||||||
|
* gl.getError after every command and calls a function if the
|
||||||
|
* result is not NO_ERROR.
|
||||||
|
*
|
||||||
|
* You can supply your own function if you want. For example, if you'd like
|
||||||
|
* an exception thrown on any GL error you could do this
|
||||||
|
*
|
||||||
|
* function throwOnGLError(err, funcName, args) {
|
||||||
|
* throw WebGLDebugUtils.glEnumToString(err) +
|
||||||
|
* " was caused by call to " + funcName;
|
||||||
|
* };
|
||||||
|
*
|
||||||
|
* ctx = WebGLDebugUtils.makeDebugContext(
|
||||||
|
* canvas.getContext("webgl"), throwOnGLError);
|
||||||
|
*
|
||||||
|
* @param {!WebGLRenderingContext} ctx The webgl context to wrap.
|
||||||
|
* @param {!function(err, funcName, args): void} opt_onErrorFunc The function
|
||||||
|
* to call when gl.getError returns an error. If not specified the default
|
||||||
|
* function calls console.log with a message.
|
||||||
|
* @param {!function(funcName, args): void} opt_onFunc The
|
||||||
|
* function to call when each webgl function is called. You
|
||||||
|
* can use this to log all calls for example.
|
||||||
|
*/
|
||||||
|
'makeDebugContext': makeDebugContext,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Given a canvas element returns a wrapped canvas element that will
|
||||||
|
* simulate lost context. The canvas returned adds the following functions.
|
||||||
|
*
|
||||||
|
* loseContext:
|
||||||
|
* simulates a lost context event.
|
||||||
|
*
|
||||||
|
* restoreContext:
|
||||||
|
* simulates the context being restored.
|
||||||
|
*
|
||||||
|
* lostContextInNCalls:
|
||||||
|
* loses the context after N gl calls.
|
||||||
|
*
|
||||||
|
* getNumCalls:
|
||||||
|
* tells you how many gl calls there have been so far.
|
||||||
|
*
|
||||||
|
* setRestoreTimeout:
|
||||||
|
* sets the number of milliseconds until the context is restored
|
||||||
|
* after it has been lost. Defaults to 0. Pass -1 to prevent
|
||||||
|
* automatic restoring.
|
||||||
|
*
|
||||||
|
* @param {!Canvas} canvas The canvas element to wrap.
|
||||||
|
*/
|
||||||
|
'makeLostContextSimulatingCanvas': makeLostContextSimulatingCanvas,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Resets a context to the initial state.
|
||||||
|
* @param {!WebGLRenderingContext} ctx The webgl context to
|
||||||
|
* reset.
|
||||||
|
*/
|
||||||
|
'resetToInitialState': resetToInitialState
|
||||||
|
};
|
||||||
|
|
||||||
|
}();
|
||||||
|
|
||||||
176
webgl-utils.js
Normal file
176
webgl-utils.js
Normal file
|
|
@ -0,0 +1,176 @@
|
||||||
|
/*
|
||||||
|
* Copyright 2010, Google 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:
|
||||||
|
*
|
||||||
|
* * Redistributions of source code must retain the above copyright
|
||||||
|
* notice, this list of conditions and the following disclaimer.
|
||||||
|
* * 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.
|
||||||
|
* * Neither the name of Google Inc. nor the names of its
|
||||||
|
* contributors may be used to endorse or promote products derived from
|
||||||
|
* this software without specific prior written permission.
|
||||||
|
*
|
||||||
|
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
|
||||||
|
* "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 THE COPYRIGHT
|
||||||
|
* OWNER 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.
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @fileoverview This file contains functions every webgl program will need
|
||||||
|
* a version of one way or another.
|
||||||
|
*
|
||||||
|
* Instead of setting up a context manually it is recommended to
|
||||||
|
* use. This will check for success or failure. On failure it
|
||||||
|
* will attempt to present an approriate message to the user.
|
||||||
|
*
|
||||||
|
* gl = WebGLUtils.setupWebGL(canvas);
|
||||||
|
*
|
||||||
|
* For animated WebGL apps use of setTimeout or setInterval are
|
||||||
|
* discouraged. It is recommended you structure your rendering
|
||||||
|
* loop like this.
|
||||||
|
*
|
||||||
|
* function render() {
|
||||||
|
* window.requestAnimFrame(render, canvas);
|
||||||
|
*
|
||||||
|
* // do rendering
|
||||||
|
* ...
|
||||||
|
* }
|
||||||
|
* render();
|
||||||
|
*
|
||||||
|
* This will call your rendering function up to the refresh rate
|
||||||
|
* of your display but will stop rendering if your app is not
|
||||||
|
* visible.
|
||||||
|
*/
|
||||||
|
|
||||||
|
WebGLUtils = function() {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Creates the HTLM for a failure message
|
||||||
|
* @param {string} canvasContainerId id of container of th
|
||||||
|
* canvas.
|
||||||
|
* @return {string} The html.
|
||||||
|
*/
|
||||||
|
var makeFailHTML = function(msg) {
|
||||||
|
return '' +
|
||||||
|
'<table style="background-color: #8CE; width: 100%; height: 100%;"><tr>' +
|
||||||
|
'<td align="center">' +
|
||||||
|
'<div style="display: table-cell; vertical-align: middle;">' +
|
||||||
|
'<div style="">' + msg + '</div>' +
|
||||||
|
'</div>' +
|
||||||
|
'</td></tr></table>';
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Mesasge for getting a webgl browser
|
||||||
|
* @type {string}
|
||||||
|
*/
|
||||||
|
var GET_A_WEBGL_BROWSER = '' +
|
||||||
|
'This page requires a browser that supports WebGL.<br/>' +
|
||||||
|
'<a href="http://get.webgl.org">Click here to upgrade your browser.</a>';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Mesasge for need better hardware
|
||||||
|
* @type {string}
|
||||||
|
*/
|
||||||
|
var OTHER_PROBLEM = '' +
|
||||||
|
"It doesn't appear your computer can support WebGL.<br/>" +
|
||||||
|
'<a href="http://get.webgl.org/troubleshooting/">Click here for more information.</a>';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Creates a webgl context. If creation fails it will
|
||||||
|
* change the contents of the container of the <canvas>
|
||||||
|
* tag to an error message with the correct links for WebGL.
|
||||||
|
* @param {Element} canvas. The canvas element to create a
|
||||||
|
* context from.
|
||||||
|
* @param {WebGLContextCreationAttirbutes} opt_attribs Any
|
||||||
|
* creation attributes you want to pass in.
|
||||||
|
* @return {WebGLRenderingContext} The created context.
|
||||||
|
*/
|
||||||
|
var setupWebGL = function(canvas, opt_attribs) {
|
||||||
|
function showLink(str) {
|
||||||
|
var container = canvas.parentNode;
|
||||||
|
if (container) {
|
||||||
|
container.innerHTML = makeFailHTML(str);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!window.WebGLRenderingContext) {
|
||||||
|
showLink(GET_A_WEBGL_BROWSER);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
var context = create3DContext(canvas, opt_attribs);
|
||||||
|
if (!context) {
|
||||||
|
showLink(OTHER_PROBLEM);
|
||||||
|
}
|
||||||
|
return context;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Creates a webgl context.
|
||||||
|
* @param {!Canvas} canvas The canvas tag to get context
|
||||||
|
* from. If one is not passed in one will be created.
|
||||||
|
* @return {!WebGLContext} The created context.
|
||||||
|
*/
|
||||||
|
var create3DContext = function(canvas, opt_attribs) {
|
||||||
|
var names = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"];
|
||||||
|
var context = null;
|
||||||
|
for (var ii = 0; ii < names.length; ++ii) {
|
||||||
|
try {
|
||||||
|
context = canvas.getContext(names[ii], opt_attribs);
|
||||||
|
} catch(e) {}
|
||||||
|
if (context) {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return context;
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
create3DContext: create3DContext,
|
||||||
|
setupWebGL: setupWebGL
|
||||||
|
};
|
||||||
|
}();
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Provides requestAnimationFrame in a cross browser way.
|
||||||
|
*/
|
||||||
|
window.requestAnimFrame = (function() {
|
||||||
|
return window.requestAnimationFrame ||
|
||||||
|
window.webkitRequestAnimationFrame ||
|
||||||
|
window.mozRequestAnimationFrame ||
|
||||||
|
window.oRequestAnimationFrame ||
|
||||||
|
window.msRequestAnimationFrame ||
|
||||||
|
function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
|
||||||
|
return window.setTimeout(callback, 1000/60);
|
||||||
|
};
|
||||||
|
})();
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Provides cancelAnimationFrame in a cross browser way.
|
||||||
|
*/
|
||||||
|
window.cancelAnimFrame = (function() {
|
||||||
|
return window.cancelAnimationFrame ||
|
||||||
|
window.webkitCancelAnimationFrame ||
|
||||||
|
window.mozCancelAnimationFrame ||
|
||||||
|
window.oCancelAnimationFrame ||
|
||||||
|
window.msCancelAnimationFrame ||
|
||||||
|
window.clearTimeout;
|
||||||
|
})();
|
||||||
|
|
||||||
|
|
||||||
Loading…
Reference in a new issue