3677 lines
119 KiB
JavaScript
3677 lines
119 KiB
JavaScript
/*
|
|
Copyright (c) 2019 The Khronos Group Inc.
|
|
Use of this source code is governed by an MIT-style license that can be
|
|
found in the LICENSE.txt file.
|
|
*/
|
|
var WebGLTestUtils = (function() {
|
|
"use strict";
|
|
|
|
/**
|
|
* Wrapped logging function.
|
|
* @param {string} msg The message to log.
|
|
*/
|
|
var log = function(msg) {
|
|
bufferedLogToConsole(msg);
|
|
};
|
|
|
|
/**
|
|
* Wrapped logging function.
|
|
* @param {string} msg The message to log.
|
|
*/
|
|
var error = function(msg) {
|
|
// For the time being, diverting this to window.console.log rather
|
|
// than window.console.error. If anyone cares enough they can
|
|
// generalize the mechanism in js-test-pre.js.
|
|
log(msg);
|
|
};
|
|
|
|
/**
|
|
* Turn off all logging.
|
|
*/
|
|
var loggingOff = function() {
|
|
log = function() {};
|
|
error = function() {};
|
|
};
|
|
|
|
const ENUM_NAME_REGEX = RegExp('[A-Z][A-Z0-9_]*');
|
|
const ENUM_NAME_BY_VALUE = {};
|
|
const ENUM_NAME_PROTOTYPES = new Map();
|
|
|
|
/**
|
|
* Converts a WebGL enum to a string.
|
|
* @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
|
|
* @param {number} value The enum value.
|
|
* @return {string} The enum as a string.
|
|
*/
|
|
var glEnumToString = function(glOrExt, value) {
|
|
if (value === undefined)
|
|
throw new Error('glEnumToString: `value` must not be undefined');
|
|
|
|
const proto = glOrExt.__proto__;
|
|
if (!ENUM_NAME_PROTOTYPES.has(proto)) {
|
|
ENUM_NAME_PROTOTYPES.set(proto, true);
|
|
|
|
for (const k in proto) {
|
|
if (!ENUM_NAME_REGEX.test(k)) continue;
|
|
|
|
const v = glOrExt[k];
|
|
if (ENUM_NAME_BY_VALUE[v] === undefined) {
|
|
ENUM_NAME_BY_VALUE[v] = k;
|
|
} else {
|
|
ENUM_NAME_BY_VALUE[v] += '/' + k;
|
|
}
|
|
}
|
|
}
|
|
|
|
const key = ENUM_NAME_BY_VALUE[value];
|
|
if (key !== undefined) return key;
|
|
|
|
return "0x" + Number(value).toString(16);
|
|
};
|
|
|
|
var lastError = "";
|
|
|
|
/**
|
|
* Returns the last compiler/linker error.
|
|
* @return {string} The last compiler/linker error.
|
|
*/
|
|
var getLastError = function() {
|
|
return lastError;
|
|
};
|
|
|
|
/**
|
|
* Whether a haystack ends with a needle.
|
|
* @param {string} haystack String to search
|
|
* @param {string} needle String to search for.
|
|
* @param {boolean} True if haystack ends with needle.
|
|
*/
|
|
var endsWith = function(haystack, needle) {
|
|
return haystack.substr(haystack.length - needle.length) === needle;
|
|
};
|
|
|
|
/**
|
|
* Whether a haystack starts with a needle.
|
|
* @param {string} haystack String to search
|
|
* @param {string} needle String to search for.
|
|
* @param {boolean} True if haystack starts with needle.
|
|
*/
|
|
var startsWith = function(haystack, needle) {
|
|
return haystack.substr(0, needle.length) === needle;
|
|
};
|
|
|
|
/**
|
|
* A vertex shader for a single texture.
|
|
* @type {string}
|
|
*/
|
|
var simpleTextureVertexShader = [
|
|
'attribute vec4 vPosition;',
|
|
'attribute vec2 texCoord0;',
|
|
'varying vec2 texCoord;',
|
|
'void main() {',
|
|
' gl_Position = vPosition;',
|
|
' texCoord = texCoord0;',
|
|
'}'].join('\n');
|
|
|
|
/**
|
|
* A vertex shader for a single texture.
|
|
* @type {string}
|
|
*/
|
|
var simpleTextureVertexShaderESSL300 = [
|
|
'#version 300 es',
|
|
'layout(location=0) in vec4 vPosition;',
|
|
'layout(location=1) in vec2 texCoord0;',
|
|
'out vec2 texCoord;',
|
|
'void main() {',
|
|
' gl_Position = vPosition;',
|
|
' texCoord = texCoord0;',
|
|
'}'].join('\n');
|
|
|
|
/**
|
|
* A fragment shader for a single texture.
|
|
* @type {string}
|
|
*/
|
|
var simpleTextureFragmentShader = [
|
|
'precision mediump float;',
|
|
'uniform sampler2D tex;',
|
|
'varying vec2 texCoord;',
|
|
'void main() {',
|
|
' gl_FragData[0] = texture2D(tex, texCoord);',
|
|
'}'].join('\n');
|
|
|
|
/**
|
|
* A fragment shader for a single texture.
|
|
* @type {string}
|
|
*/
|
|
var simpleTextureFragmentShaderESSL300 = [
|
|
'#version 300 es',
|
|
'precision highp float;',
|
|
'uniform highp sampler2D tex;',
|
|
'in vec2 texCoord;',
|
|
'out vec4 out_color;',
|
|
'void main() {',
|
|
' out_color = texture(tex, texCoord);',
|
|
'}'].join('\n');
|
|
|
|
/**
|
|
* A fragment shader for a single texture with high precision.
|
|
* @type {string}
|
|
*/
|
|
var simpleHighPrecisionTextureFragmentShader = [
|
|
'precision highp float;',
|
|
'uniform highp sampler2D tex;',
|
|
'varying vec2 texCoord;',
|
|
'void main() {',
|
|
' gl_FragData[0] = texture2D(tex, texCoord);',
|
|
'}'].join('\n');
|
|
|
|
/**
|
|
* A fragment shader for a single cube map texture.
|
|
* @type {string}
|
|
*/
|
|
var simpleCubeMapTextureFragmentShader = [
|
|
'precision mediump float;',
|
|
'uniform samplerCube tex;',
|
|
'uniform highp int face;',
|
|
'varying vec2 texCoord;',
|
|
'void main() {',
|
|
// Transform [0, 1] -> [-1, 1]
|
|
' vec2 texC2 = (texCoord * 2.) - 1.;',
|
|
// Transform 2d tex coord. to each face of TEXTURE_CUBE_MAP coord.
|
|
' vec3 texCube = vec3(0., 0., 0.);',
|
|
' if (face == 34069) {', // TEXTURE_CUBE_MAP_POSITIVE_X
|
|
' texCube = vec3(1., -texC2.y, -texC2.x);',
|
|
' } else if (face == 34070) {', // TEXTURE_CUBE_MAP_NEGATIVE_X
|
|
' texCube = vec3(-1., -texC2.y, texC2.x);',
|
|
' } else if (face == 34071) {', // TEXTURE_CUBE_MAP_POSITIVE_Y
|
|
' texCube = vec3(texC2.x, 1., texC2.y);',
|
|
' } else if (face == 34072) {', // TEXTURE_CUBE_MAP_NEGATIVE_Y
|
|
' texCube = vec3(texC2.x, -1., -texC2.y);',
|
|
' } else if (face == 34073) {', // TEXTURE_CUBE_MAP_POSITIVE_Z
|
|
' texCube = vec3(texC2.x, -texC2.y, 1.);',
|
|
' } else if (face == 34074) {', // TEXTURE_CUBE_MAP_NEGATIVE_Z
|
|
' texCube = vec3(-texC2.x, -texC2.y, -1.);',
|
|
' }',
|
|
' gl_FragData[0] = textureCube(tex, texCube);',
|
|
'}'].join('\n');
|
|
|
|
/**
|
|
* A vertex shader for a single texture.
|
|
* @type {string}
|
|
*/
|
|
var noTexCoordTextureVertexShader = [
|
|
'attribute vec4 vPosition;',
|
|
'varying vec2 texCoord;',
|
|
'void main() {',
|
|
' gl_Position = vPosition;',
|
|
' texCoord = vPosition.xy * 0.5 + 0.5;',
|
|
'}'].join('\n');
|
|
|
|
/**
|
|
* A vertex shader for a uniform color.
|
|
* @type {string}
|
|
*/
|
|
var simpleVertexShader = [
|
|
'attribute vec4 vPosition;',
|
|
'void main() {',
|
|
' gl_Position = vPosition;',
|
|
'}'].join('\n');
|
|
|
|
/**
|
|
* A vertex shader for a uniform color.
|
|
* @type {string}
|
|
*/
|
|
var simpleVertexShaderESSL300 = [
|
|
'#version 300 es',
|
|
'in vec4 vPosition;',
|
|
'void main() {',
|
|
' gl_Position = vPosition;',
|
|
'}'].join('\n');
|
|
|
|
/**
|
|
* A fragment shader for a uniform color.
|
|
* @type {string}
|
|
*/
|
|
var simpleColorFragmentShader = [
|
|
'precision mediump float;',
|
|
'uniform vec4 u_color;',
|
|
'void main() {',
|
|
' gl_FragData[0] = u_color;',
|
|
'}'].join('\n');
|
|
|
|
/**
|
|
* A fragment shader for a uniform color.
|
|
* @type {string}
|
|
*/
|
|
var simpleColorFragmentShaderESSL300 = [
|
|
'#version 300 es',
|
|
'precision mediump float;',
|
|
'out vec4 out_color;',
|
|
'uniform vec4 u_color;',
|
|
'void main() {',
|
|
' out_color = u_color;',
|
|
'}'].join('\n');
|
|
|
|
/**
|
|
* A vertex shader for vertex colors.
|
|
* @type {string}
|
|
*/
|
|
var simpleVertexColorVertexShader = [
|
|
'attribute vec4 vPosition;',
|
|
'attribute vec4 a_color;',
|
|
'varying vec4 v_color;',
|
|
'void main() {',
|
|
' gl_Position = vPosition;',
|
|
' v_color = a_color;',
|
|
'}'].join('\n');
|
|
|
|
/**
|
|
* A fragment shader for vertex colors.
|
|
* @type {string}
|
|
*/
|
|
var simpleVertexColorFragmentShader = [
|
|
'precision mediump float;',
|
|
'varying vec4 v_color;',
|
|
'void main() {',
|
|
' gl_FragData[0] = v_color;',
|
|
'}'].join('\n');
|
|
|
|
/**
|
|
* Creates a program, attaches shaders, binds attrib locations, links the
|
|
* program and calls useProgram.
|
|
* @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
|
|
* @param {!Array.<!WebGLShader|string>} shaders The shaders to
|
|
* attach, or the source, or the id of a script to get
|
|
* the source from.
|
|
* @param {!Array.<string>} opt_attribs The attribs names.
|
|
* @param {!Array.<number>} opt_locations The locations for the attribs.
|
|
* @param {boolean} opt_logShaders Whether to log shader source.
|
|
*/
|
|
var setupProgram = function(
|
|
gl, shaders, opt_attribs, opt_locations, opt_logShaders) {
|
|
var realShaders = [];
|
|
var program = gl.createProgram();
|
|
var shaderCount = 0;
|
|
for (var ii = 0; ii < shaders.length; ++ii) {
|
|
var shader = shaders[ii];
|
|
var shaderType = undefined;
|
|
if (typeof shader == 'string') {
|
|
var element = document.getElementById(shader);
|
|
if (element) {
|
|
if (element.type != "x-shader/x-vertex" && element.type != "x-shader/x-fragment")
|
|
shaderType = ii ? gl.FRAGMENT_SHADER : gl.VERTEX_SHADER;
|
|
shader = loadShaderFromScript(gl, shader, shaderType, undefined, opt_logShaders);
|
|
} else if (endsWith(shader, ".vert")) {
|
|
shader = loadShaderFromFile(gl, shader, gl.VERTEX_SHADER, undefined, opt_logShaders);
|
|
} else if (endsWith(shader, ".frag")) {
|
|
shader = loadShaderFromFile(gl, shader, gl.FRAGMENT_SHADER, undefined, opt_logShaders);
|
|
} else {
|
|
shader = loadShader(gl, shader, ii ? gl.FRAGMENT_SHADER : gl.VERTEX_SHADER, undefined, opt_logShaders);
|
|
}
|
|
} else if (opt_logShaders) {
|
|
throw 'Shader source logging requested but no shader source provided';
|
|
}
|
|
if (shader) {
|
|
++shaderCount;
|
|
gl.attachShader(program, shader);
|
|
}
|
|
}
|
|
if (shaderCount != 2) {
|
|
error("Error in compiling shader");
|
|
return null;
|
|
}
|
|
if (opt_attribs) {
|
|
for (var ii = 0; ii < opt_attribs.length; ++ii) {
|
|
gl.bindAttribLocation(
|
|
program,
|
|
opt_locations ? opt_locations[ii] : ii,
|
|
opt_attribs[ii]);
|
|
}
|
|
}
|
|
gl.linkProgram(program);
|
|
|
|
// Check the link status
|
|
var linked = gl.getProgramParameter(program, gl.LINK_STATUS);
|
|
if (!linked) {
|
|
// something went wrong with the link
|
|
lastError = gl.getProgramInfoLog (program);
|
|
error("Error in program linking:" + lastError);
|
|
|
|
gl.deleteProgram(program);
|
|
return null;
|
|
}
|
|
|
|
gl.useProgram(program);
|
|
return program;
|
|
};
|
|
|
|
/**
|
|
* Creates a program, attaches shader, sets up trasnform feedback varyings,
|
|
* binds attrib locations, links the program and calls useProgram.
|
|
* @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
|
|
* @param {!Array.<!WebGLShader|string>} shaders The shaders to
|
|
* attach, or the source, or the id of a script to get
|
|
* the source from.
|
|
* @param {!Array.<string>} varyings The transform feedback varying names.
|
|
* @param {number} bufferMode The mode used to capture the varying variables.
|
|
* @param {!Array.<string>} opt_attribs The attribs names.
|
|
* @param {!Array.<number>} opt_locations The locations for the attribs.
|
|
* @param {boolean} opt_logShaders Whether to log shader source.
|
|
*/
|
|
var setupTransformFeedbackProgram = function(
|
|
gl, shaders, varyings, bufferMode, opt_attribs, opt_locations, opt_logShaders, opt_skipCompileStatus) {
|
|
var realShaders = [];
|
|
var program = gl.createProgram();
|
|
var shaderCount = 0;
|
|
for (var ii = 0; ii < shaders.length; ++ii) {
|
|
var shader = shaders[ii];
|
|
var shaderType = undefined;
|
|
if (typeof shader == 'string') {
|
|
var element = document.getElementById(shader);
|
|
if (element) {
|
|
if (element.type != "x-shader/x-vertex" && element.type != "x-shader/x-fragment")
|
|
shaderType = ii ? gl.FRAGMENT_SHADER : gl.VERTEX_SHADER;
|
|
shader = loadShaderFromScript(gl, shader, shaderType, undefined, opt_logShaders, opt_skipCompileStatus);
|
|
} else if (endsWith(shader, ".vert")) {
|
|
shader = loadShaderFromFile(gl, shader, gl.VERTEX_SHADER, undefined, opt_logShaders, opt_skipCompileStatus);
|
|
} else if (endsWith(shader, ".frag")) {
|
|
shader = loadShaderFromFile(gl, shader, gl.FRAGMENT_SHADER, undefined, opt_logShaders, opt_skipCompileStatus);
|
|
} else {
|
|
shader = loadShader(gl, shader, ii ? gl.FRAGMENT_SHADER : gl.VERTEX_SHADER, undefined, opt_logShaders, undefined, undefined, opt_skipCompileStatus);
|
|
}
|
|
} else if (opt_logShaders) {
|
|
throw 'Shader source logging requested but no shader source provided';
|
|
}
|
|
if (shader) {
|
|
++shaderCount;
|
|
gl.attachShader(program, shader);
|
|
}
|
|
}
|
|
if (shaderCount != 2) {
|
|
error("Error in compiling shader");
|
|
return null;
|
|
}
|
|
|
|
if (opt_attribs) {
|
|
for (var ii = 0; ii < opt_attribs.length; ++ii) {
|
|
gl.bindAttribLocation(
|
|
program,
|
|
opt_locations ? opt_locations[ii] : ii,
|
|
opt_attribs[ii]);
|
|
}
|
|
}
|
|
|
|
gl.transformFeedbackVaryings(program, varyings, bufferMode);
|
|
|
|
gl.linkProgram(program);
|
|
|
|
// Check the link status
|
|
var linked = gl.getProgramParameter(program, gl.LINK_STATUS);
|
|
if (!linked) {
|
|
// something went wrong with the link
|
|
lastError = gl.getProgramInfoLog (program);
|
|
error("Error in program linking:" + lastError);
|
|
|
|
gl.deleteProgram(program);
|
|
return null;
|
|
}
|
|
|
|
gl.useProgram(program);
|
|
return program;
|
|
};
|
|
|
|
/**
|
|
* Creates a simple texture program.
|
|
* @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
|
|
* @return {WebGLProgram}
|
|
*/
|
|
var setupNoTexCoordTextureProgram = function(gl) {
|
|
return setupProgram(gl,
|
|
[noTexCoordTextureVertexShader, simpleTextureFragmentShader],
|
|
['vPosition'],
|
|
[0]);
|
|
};
|
|
|
|
/**
|
|
* Creates a simple texture program.
|
|
* @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
|
|
* @param {number} opt_positionLocation The attrib location for position.
|
|
* @param {number} opt_texcoordLocation The attrib location for texture coords.
|
|
* @param {string} opt_fragmentShaderOverride The alternative fragment shader to use.
|
|
* @return {WebGLProgram}
|
|
*/
|
|
var setupSimpleTextureProgram = function(
|
|
gl, opt_positionLocation, opt_texcoordLocation, opt_fragmentShaderOverride) {
|
|
opt_positionLocation = opt_positionLocation || 0;
|
|
opt_texcoordLocation = opt_texcoordLocation || 1;
|
|
opt_fragmentShaderOverride = opt_fragmentShaderOverride || simpleTextureFragmentShader;
|
|
return setupProgram(gl,
|
|
[simpleTextureVertexShader, opt_fragmentShaderOverride],
|
|
['vPosition', 'texCoord0'],
|
|
[opt_positionLocation, opt_texcoordLocation]);
|
|
};
|
|
|
|
/**
|
|
* Creates a simple texture program using glsl version 300.
|
|
* @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
|
|
* @param {number} opt_positionLocation The attrib location for position.
|
|
* @param {number} opt_texcoordLocation The attrib location for texture coords.
|
|
* @param {string} opt_fragmentShaderOverride The alternative fragment shader to use.
|
|
* @return {WebGLProgram}
|
|
*/
|
|
var setupSimpleTextureProgramESSL300 = function(
|
|
gl, opt_positionLocation, opt_texcoordLocation, opt_fragmentShaderOverride) {
|
|
opt_positionLocation = opt_positionLocation || 0;
|
|
opt_texcoordLocation = opt_texcoordLocation || 1;
|
|
opt_fragmentShaderOverride = opt_fragmentShaderOverride || simpleTextureFragmentShaderESSL300;
|
|
return setupProgram(gl,
|
|
[simpleTextureVertexShaderESSL300, opt_fragmentShaderOverride],
|
|
['vPosition', 'texCoord0'],
|
|
[opt_positionLocation, opt_texcoordLocation]);
|
|
};
|
|
|
|
/**
|
|
* Creates a simple cube map texture program.
|
|
* @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
|
|
* @param {number} opt_positionLocation The attrib location for position.
|
|
* @param {number} opt_texcoordLocation The attrib location for texture coords.
|
|
* @return {WebGLProgram}
|
|
*/
|
|
var setupSimpleCubeMapTextureProgram = function(
|
|
gl, opt_positionLocation, opt_texcoordLocation) {
|
|
opt_positionLocation = opt_positionLocation || 0;
|
|
opt_texcoordLocation = opt_texcoordLocation || 1;
|
|
return setupProgram(gl,
|
|
[simpleTextureVertexShader, simpleCubeMapTextureFragmentShader],
|
|
['vPosition', 'texCoord0'],
|
|
[opt_positionLocation, opt_texcoordLocation]);
|
|
};
|
|
|
|
/**
|
|
* Creates a simple vertex color program.
|
|
* @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
|
|
* @param {number} opt_positionLocation The attrib location for position.
|
|
* @param {number} opt_vertexColorLocation The attrib location
|
|
* for vertex colors.
|
|
* @return {WebGLProgram}
|
|
*/
|
|
var setupSimpleVertexColorProgram = function(
|
|
gl, opt_positionLocation, opt_vertexColorLocation) {
|
|
opt_positionLocation = opt_positionLocation || 0;
|
|
opt_vertexColorLocation = opt_vertexColorLocation || 1;
|
|
return setupProgram(gl,
|
|
[simpleVertexColorVertexShader, simpleVertexColorFragmentShader],
|
|
['vPosition', 'a_color'],
|
|
[opt_positionLocation, opt_vertexColorLocation]);
|
|
};
|
|
|
|
/**
|
|
* Creates a simple color program.
|
|
* @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
|
|
* @param {number} opt_positionLocation The attrib location for position.
|
|
* @return {WebGLProgram}
|
|
*/
|
|
var setupSimpleColorProgram = function(gl, opt_positionLocation) {
|
|
opt_positionLocation = opt_positionLocation || 0;
|
|
return setupProgram(gl,
|
|
[simpleVertexShader, simpleColorFragmentShader],
|
|
['vPosition'],
|
|
[opt_positionLocation]);
|
|
};
|
|
|
|
/**
|
|
* Creates buffers for a textured unit quad and attaches them to vertex attribs.
|
|
* @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
|
|
* @param {number} opt_positionLocation The attrib location for position.
|
|
* @param {number} opt_texcoordLocation The attrib location for texture coords.
|
|
* @param {!Object} various options. See setupQuad for details.
|
|
* @return {!Array.<WebGLBuffer>} The buffer objects that were
|
|
* created.
|
|
*/
|
|
var setupUnitQuad = function(gl, opt_positionLocation, opt_texcoordLocation, options) {
|
|
return setupQuadWithTexCoords(gl, [ 0.0, 0.0 ], [ 1.0, 1.0 ],
|
|
opt_positionLocation, opt_texcoordLocation,
|
|
options);
|
|
};
|
|
|
|
/**
|
|
* Creates buffers for a textured quad with specified lower left
|
|
* and upper right texture coordinates, and attaches them to vertex
|
|
* attribs.
|
|
* @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
|
|
* @param {!Array.<number>} lowerLeftTexCoords The texture coordinates for the lower left corner.
|
|
* @param {!Array.<number>} upperRightTexCoords The texture coordinates for the upper right corner.
|
|
* @param {number} opt_positionLocation The attrib location for position.
|
|
* @param {number} opt_texcoordLocation The attrib location for texture coords.
|
|
* @param {!Object} various options. See setupQuad for details.
|
|
* @return {!Array.<WebGLBuffer>} The buffer objects that were
|
|
* created.
|
|
*/
|
|
var setupQuadWithTexCoords = function(
|
|
gl, lowerLeftTexCoords, upperRightTexCoords,
|
|
opt_positionLocation, opt_texcoordLocation, options) {
|
|
var defaultOptions = {
|
|
positionLocation: opt_positionLocation || 0,
|
|
texcoordLocation: opt_texcoordLocation || 1,
|
|
lowerLeftTexCoords: lowerLeftTexCoords,
|
|
upperRightTexCoords: upperRightTexCoords
|
|
};
|
|
if (options) {
|
|
for (var prop in options) {
|
|
defaultOptions[prop] = options[prop]
|
|
}
|
|
}
|
|
return setupQuad(gl, defaultOptions);
|
|
};
|
|
|
|
/**
|
|
* Makes a quad with various options.
|
|
* @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
|
|
* @param {!Object} options
|
|
*
|
|
* scale: scale to multiply unit quad values by. default 1.0.
|
|
* positionLocation: attribute location for position.
|
|
* texcoordLocation: attribute location for texcoords.
|
|
* If this does not exist no texture coords are created.
|
|
* lowerLeftTexCoords: an array of 2 values for the
|
|
* lowerLeftTexCoords.
|
|
* upperRightTexCoords: an array of 2 values for the
|
|
* upperRightTexCoords.
|
|
*/
|
|
var setupQuad = function(gl, options) {
|
|
var positionLocation = options.positionLocation || 0;
|
|
var scale = options.scale || 1;
|
|
|
|
var objects = [];
|
|
|
|
var vertexObject = gl.createBuffer();
|
|
gl.bindBuffer(gl.ARRAY_BUFFER, vertexObject);
|
|
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
|
|
1.0 * scale , 1.0 * scale,
|
|
-1.0 * scale , 1.0 * scale,
|
|
-1.0 * scale , -1.0 * scale,
|
|
1.0 * scale , 1.0 * scale,
|
|
-1.0 * scale , -1.0 * scale,
|
|
1.0 * scale , -1.0 * scale]), gl.STATIC_DRAW);
|
|
gl.enableVertexAttribArray(positionLocation);
|
|
gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
|
|
objects.push(vertexObject);
|
|
|
|
if (options.texcoordLocation !== undefined) {
|
|
var llx = options.lowerLeftTexCoords[0];
|
|
var lly = options.lowerLeftTexCoords[1];
|
|
var urx = options.upperRightTexCoords[0];
|
|
var ury = options.upperRightTexCoords[1];
|
|
|
|
vertexObject = gl.createBuffer();
|
|
gl.bindBuffer(gl.ARRAY_BUFFER, vertexObject);
|
|
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
|
|
urx, ury,
|
|
llx, ury,
|
|
llx, lly,
|
|
urx, ury,
|
|
llx, lly,
|
|
urx, lly]), gl.STATIC_DRAW);
|
|
gl.enableVertexAttribArray(options.texcoordLocation);
|
|
gl.vertexAttribPointer(options.texcoordLocation, 2, gl.FLOAT, false, 0, 0);
|
|
objects.push(vertexObject);
|
|
}
|
|
|
|
return objects;
|
|
};
|
|
|
|
/**
|
|
* Creates a program and buffers for rendering a textured quad.
|
|
* @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
|
|
* @param {number} opt_positionLocation The attrib location for
|
|
* position. Default = 0.
|
|
* @param {number} opt_texcoordLocation The attrib location for
|
|
* texture coords. Default = 1.
|
|
* @param {!Object} various options defined by setupQuad, plus an option
|
|
fragmentShaderOverride to specify a custom fragment shader.
|
|
* @return {!WebGLProgram}
|
|
*/
|
|
var setupTexturedQuad = function(
|
|
gl, opt_positionLocation, opt_texcoordLocation, options) {
|
|
var program = setupSimpleTextureProgram(
|
|
gl, opt_positionLocation, opt_texcoordLocation, options && options.fragmentShaderOverride);
|
|
setupUnitQuad(gl, opt_positionLocation, opt_texcoordLocation, options);
|
|
return program;
|
|
};
|
|
|
|
/**
|
|
* Creates a program and buffers for rendering a color quad.
|
|
* @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
|
|
* @param {number} opt_positionLocation The attrib location for position.
|
|
* @param {!Object} various options. See setupQuad for details.
|
|
* @return {!WebGLProgram}
|
|
*/
|
|
var setupColorQuad = function(gl, opt_positionLocation, options) {
|
|
opt_positionLocation = opt_positionLocation || 0;
|
|
var program = setupSimpleColorProgram(gl, opt_positionLocation);
|
|
setupUnitQuad(gl, opt_positionLocation, 0, options);
|
|
return program;
|
|
};
|
|
|
|
/**
|
|
* Creates a program and buffers for rendering a textured quad with
|
|
* specified lower left and upper right texture coordinates.
|
|
* @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
|
|
* @param {!Array.<number>} lowerLeftTexCoords The texture coordinates for the lower left corner.
|
|
* @param {!Array.<number>} upperRightTexCoords The texture coordinates for the upper right corner.
|
|
* @param {number} opt_positionLocation The attrib location for position.
|
|
* @param {number} opt_texcoordLocation The attrib location for texture coords.
|
|
* @return {!WebGLProgram}
|
|
*/
|
|
var setupTexturedQuadWithTexCoords = function(
|
|
gl, lowerLeftTexCoords, upperRightTexCoords,
|
|
opt_positionLocation, opt_texcoordLocation) {
|
|
var program = setupSimpleTextureProgram(
|
|
gl, opt_positionLocation, opt_texcoordLocation);
|
|
setupQuadWithTexCoords(gl, lowerLeftTexCoords, upperRightTexCoords,
|
|
opt_positionLocation, opt_texcoordLocation);
|
|
return program;
|
|
};
|
|
|
|
/**
|
|
* Creates a program and buffers for rendering a textured quad with
|
|
* a cube map texture.
|
|
* @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
|
|
* @param {number} opt_positionLocation The attrib location for
|
|
* position. Default = 0.
|
|
* @param {number} opt_texcoordLocation The attrib location for
|
|
* texture coords. Default = 1.
|
|
* @return {!WebGLProgram}
|
|
*/
|
|
var setupTexturedQuadWithCubeMap = function(
|
|
gl, opt_positionLocation, opt_texcoordLocation) {
|
|
var program = setupSimpleCubeMapTextureProgram(
|
|
gl, opt_positionLocation, opt_texcoordLocation);
|
|
setupUnitQuad(gl, opt_positionLocation, opt_texcoordLocation, undefined);
|
|
return program;
|
|
};
|
|
|
|
/**
|
|
* Creates a unit quad with only positions of a given resolution.
|
|
* @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
|
|
* @param {number} gridRes The resolution of the mesh grid,
|
|
* expressed in the number of quads across and down.
|
|
* @param {number} opt_positionLocation The attrib location for position.
|
|
*/
|
|
var setupIndexedQuad = function (
|
|
gl, gridRes, opt_positionLocation, opt_flipOddTriangles) {
|
|
return setupIndexedQuadWithOptions(gl,
|
|
{ gridRes: gridRes,
|
|
positionLocation: opt_positionLocation,
|
|
flipOddTriangles: opt_flipOddTriangles
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Creates a quad with various options.
|
|
* @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
|
|
* @param {!Object} options The options. See below.
|
|
* @return {!Array.<WebGLBuffer>} The created buffers.
|
|
* [positions, <colors>, indices]
|
|
*
|
|
* Options:
|
|
* gridRes: number of quads across and down grid.
|
|
* positionLocation: attrib location for position
|
|
* flipOddTriangles: reverse order of vertices of every other
|
|
* triangle
|
|
* positionOffset: offset added to each vertex
|
|
* positionMult: multipier for each vertex
|
|
* colorLocation: attrib location for vertex colors. If
|
|
* undefined no vertex colors will be created.
|
|
*/
|
|
var setupIndexedQuadWithOptions = function (gl, options) {
|
|
var positionLocation = options.positionLocation || 0;
|
|
var objects = [];
|
|
|
|
var gridRes = options.gridRes || 1;
|
|
var positionOffset = options.positionOffset || 0;
|
|
var positionMult = options.positionMult || 1;
|
|
var vertsAcross = gridRes + 1;
|
|
var numVerts = vertsAcross * vertsAcross;
|
|
var positions = new Float32Array(numVerts * 3);
|
|
var indices = new Uint16Array(6 * gridRes * gridRes);
|
|
var poffset = 0;
|
|
|
|
for (var yy = 0; yy <= gridRes; ++yy) {
|
|
for (var xx = 0; xx <= gridRes; ++xx) {
|
|
positions[poffset + 0] = (-1 + 2 * xx / gridRes) * positionMult + positionOffset;
|
|
positions[poffset + 1] = (-1 + 2 * yy / gridRes) * positionMult + positionOffset;
|
|
positions[poffset + 2] = 0;
|
|
|
|
poffset += 3;
|
|
}
|
|
}
|
|
|
|
var buf = gl.createBuffer();
|
|
gl.bindBuffer(gl.ARRAY_BUFFER, buf);
|
|
gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
|
|
gl.enableVertexAttribArray(positionLocation);
|
|
gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0);
|
|
objects.push(buf);
|
|
|
|
if (options.colorLocation !== undefined) {
|
|
var colors = new Float32Array(numVerts * 4);
|
|
poffset = 0;
|
|
for (var yy = 0; yy <= gridRes; ++yy) {
|
|
for (var xx = 0; xx <= gridRes; ++xx) {
|
|
if (options.color !== undefined) {
|
|
colors[poffset + 0] = options.color[0];
|
|
colors[poffset + 1] = options.color[1];
|
|
colors[poffset + 2] = options.color[2];
|
|
colors[poffset + 3] = options.color[3];
|
|
} else {
|
|
colors[poffset + 0] = xx / gridRes;
|
|
colors[poffset + 1] = yy / gridRes;
|
|
colors[poffset + 2] = (xx / gridRes) * (yy / gridRes);
|
|
colors[poffset + 3] = (yy % 2) * 0.5 + 0.5;
|
|
}
|
|
poffset += 4;
|
|
}
|
|
}
|
|
|
|
buf = gl.createBuffer();
|
|
gl.bindBuffer(gl.ARRAY_BUFFER, buf);
|
|
gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);
|
|
gl.enableVertexAttribArray(options.colorLocation);
|
|
gl.vertexAttribPointer(options.colorLocation, 4, gl.FLOAT, false, 0, 0);
|
|
objects.push(buf);
|
|
}
|
|
|
|
var tbase = 0;
|
|
for (var yy = 0; yy < gridRes; ++yy) {
|
|
var index = yy * vertsAcross;
|
|
for (var xx = 0; xx < gridRes; ++xx) {
|
|
indices[tbase + 0] = index + 0;
|
|
indices[tbase + 1] = index + 1;
|
|
indices[tbase + 2] = index + vertsAcross;
|
|
indices[tbase + 3] = index + vertsAcross;
|
|
indices[tbase + 4] = index + 1;
|
|
indices[tbase + 5] = index + vertsAcross + 1;
|
|
|
|
if (options.flipOddTriangles) {
|
|
indices[tbase + 4] = index + vertsAcross + 1;
|
|
indices[tbase + 5] = index + 1;
|
|
}
|
|
|
|
index += 1;
|
|
tbase += 6;
|
|
}
|
|
}
|
|
|
|
buf = gl.createBuffer();
|
|
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buf);
|
|
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
|
|
objects.push(buf);
|
|
|
|
return objects;
|
|
};
|
|
|
|
/**
|
|
* Returns the constructor for a typed array that corresponds to the given
|
|
* WebGL type.
|
|
* @param {!WebGLRenderingContext} gl A WebGLRenderingContext.
|
|
* @param {number} type The WebGL type (eg, gl.UNSIGNED_BYTE)
|
|
* @return {!Constructor} The typed array constructor that
|
|
* corresponds to the given type.
|
|
*/
|
|
var glTypeToTypedArrayType = function(gl, type) {
|
|
switch (type) {
|
|
case gl.BYTE:
|
|
return window.Int8Array;
|
|
case gl.UNSIGNED_BYTE:
|
|
return window.Uint8Array;
|
|
case gl.SHORT:
|
|
return window.Int16Array;
|
|
case gl.UNSIGNED_SHORT:
|
|
case gl.UNSIGNED_SHORT_5_6_5:
|
|
case gl.UNSIGNED_SHORT_4_4_4_4:
|
|
case gl.UNSIGNED_SHORT_5_5_5_1:
|
|
return window.Uint16Array;
|
|
case gl.INT:
|
|
return window.Int32Array;
|
|
case gl.UNSIGNED_INT:
|
|
case gl.UNSIGNED_INT_5_9_9_9_REV:
|
|
case gl.UNSIGNED_INT_10F_11F_11F_REV:
|
|
case gl.UNSIGNED_INT_2_10_10_10_REV:
|
|
case gl.UNSIGNED_INT_24_8:
|
|
return window.Uint32Array;
|
|
case gl.HALF_FLOAT:
|
|
case 0x8D61: // HALF_FLOAT_OES
|
|
return window.Uint16Array;
|
|
case gl.FLOAT:
|
|
return window.Float32Array;
|
|
default:
|
|
throw 'unknown gl type ' + glEnumToString(gl, type);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Returns the number of bytes per component for a given WebGL type.
|
|
* @param {!WebGLRenderingContext} gl A WebGLRenderingContext.
|
|
* @param {GLenum} type The WebGL type (eg, gl.UNSIGNED_BYTE)
|
|
* @return {number} The number of bytes per component.
|
|
*/
|
|
var getBytesPerComponent = function(gl, type) {
|
|
switch (type) {
|
|
case gl.BYTE:
|
|
case gl.UNSIGNED_BYTE:
|
|
return 1;
|
|
case gl.SHORT:
|
|
case gl.UNSIGNED_SHORT:
|
|
case gl.UNSIGNED_SHORT_5_6_5:
|
|
case gl.UNSIGNED_SHORT_4_4_4_4:
|
|
case gl.UNSIGNED_SHORT_5_5_5_1:
|
|
case gl.HALF_FLOAT:
|
|
case 0x8D61: // HALF_FLOAT_OES
|
|
return 2;
|
|
case gl.INT:
|
|
case gl.UNSIGNED_INT:
|
|
case gl.UNSIGNED_INT_5_9_9_9_REV:
|
|
case gl.UNSIGNED_INT_10F_11F_11F_REV:
|
|
case gl.UNSIGNED_INT_2_10_10_10_REV:
|
|
case gl.UNSIGNED_INT_24_8:
|
|
case gl.FLOAT:
|
|
return 4;
|
|
default:
|
|
throw 'unknown gl type ' + glEnumToString(gl, type);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Returns the number of typed array elements per pixel for a given WebGL
|
|
* format/type combination. The corresponding typed array type can be determined
|
|
* by calling glTypeToTypedArrayType.
|
|
* @param {!WebGLRenderingContext} gl A WebGLRenderingContext.
|
|
* @param {GLenum} format The WebGL format (eg, gl.RGBA)
|
|
* @param {GLenum} type The WebGL type (eg, gl.UNSIGNED_BYTE)
|
|
* @return {number} The number of typed array elements per pixel.
|
|
*/
|
|
var getTypedArrayElementsPerPixel = function(gl, format, type) {
|
|
switch (type) {
|
|
case gl.UNSIGNED_SHORT_5_6_5:
|
|
case gl.UNSIGNED_SHORT_4_4_4_4:
|
|
case gl.UNSIGNED_SHORT_5_5_5_1:
|
|
return 1;
|
|
case gl.UNSIGNED_BYTE:
|
|
break;
|
|
default:
|
|
throw 'not a gl type for color information ' + glEnumToString(gl, type);
|
|
}
|
|
|
|
switch (format) {
|
|
case gl.RGBA:
|
|
return 4;
|
|
case gl.RGB:
|
|
return 3;
|
|
case gl.LUMINANCE_ALPHA:
|
|
return 2;
|
|
case gl.LUMINANCE:
|
|
case gl.ALPHA:
|
|
return 1;
|
|
default:
|
|
throw 'unknown gl format ' + glEnumToString(gl, format);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Fills the given texture with a solid color.
|
|
* @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
|
|
* @param {!WebGLTexture} tex The texture to fill.
|
|
* @param {number} width The width of the texture to create.
|
|
* @param {number} height The height of the texture to create.
|
|
* @param {!Array.<number>} color The color to fill with.
|
|
* where each element is in the range 0 to 255.
|
|
* @param {number} opt_level The level of the texture to fill. Default = 0.
|
|
* @param {number} opt_format The format for the texture.
|
|
* @param {number} opt_internalFormat The internal format for the texture.
|
|
*/
|
|
var fillTexture = function(gl, tex, width, height, color, opt_level, opt_format, opt_type, opt_internalFormat) {
|
|
opt_level = opt_level || 0;
|
|
opt_format = opt_format || gl.RGBA;
|
|
opt_type = opt_type || gl.UNSIGNED_BYTE;
|
|
opt_internalFormat = opt_internalFormat || opt_format;
|
|
var pack = gl.getParameter(gl.UNPACK_ALIGNMENT);
|
|
var numComponents = color.length;
|
|
var bytesPerComponent = getBytesPerComponent(gl, opt_type);
|
|
var rowSize = numComponents * width * bytesPerComponent;
|
|
// See equation 3.10 in ES 2.0 spec and equation 3.13 in ES 3.0 spec for paddedRowLength calculation.
|
|
// k is paddedRowLength.
|
|
// n is numComponents.
|
|
// l is width.
|
|
// a is pack.
|
|
// s is bytesPerComponent.
|
|
var paddedRowLength;
|
|
if (bytesPerComponent >= pack)
|
|
paddedRowLength = numComponents * width;
|
|
else
|
|
paddedRowLength = Math.floor((rowSize + pack - 1) / pack) * pack / bytesPerComponent;
|
|
var size = width * numComponents + (height - 1) * paddedRowLength;
|
|
var buf = new (glTypeToTypedArrayType(gl, opt_type))(size);
|
|
for (var yy = 0; yy < height; ++yy) {
|
|
var off = yy * paddedRowLength;
|
|
for (var xx = 0; xx < width; ++xx) {
|
|
for (var jj = 0; jj < numComponents; ++jj) {
|
|
buf[off++] = color[jj];
|
|
}
|
|
}
|
|
}
|
|
gl.bindTexture(gl.TEXTURE_2D, tex);
|
|
gl.texImage2D(
|
|
gl.TEXTURE_2D, opt_level, opt_internalFormat, width, height, 0,
|
|
opt_format, opt_type, buf);
|
|
};
|
|
|
|
/**
|
|
* Creates a texture and fills it with a solid color.
|
|
* @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
|
|
* @param {number} width The width of the texture to create.
|
|
* @param {number} height The height of the texture to create.
|
|
* @param {!Array.<number>} color The color to fill with. A 4 element array
|
|
* where each element is in the range 0 to 255.
|
|
* @return {!WebGLTexture}
|
|
*/
|
|
var createColoredTexture = function(gl, width, height, color) {
|
|
var tex = gl.createTexture();
|
|
fillTexture(gl, tex, width, height, color);
|
|
return tex;
|
|
};
|
|
|
|
var ubyteToFloat = function(c) {
|
|
return c / 255;
|
|
};
|
|
|
|
var ubyteColorToFloatColor = function(color) {
|
|
var floatColor = [];
|
|
for (var ii = 0; ii < color.length; ++ii) {
|
|
floatColor[ii] = ubyteToFloat(color[ii]);
|
|
}
|
|
return floatColor;
|
|
};
|
|
|
|
/**
|
|
* Sets the "u_color" uniform of the current program to color.
|
|
* @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
|
|
* @param {!Array.<number>} color 4 element array of 0-1 color
|
|
* components.
|
|
*/
|
|
var setFloatDrawColor = function(gl, color) {
|
|
var program = gl.getParameter(gl.CURRENT_PROGRAM);
|
|
var colorLocation = gl.getUniformLocation(program, "u_color");
|
|
gl.uniform4fv(colorLocation, color);
|
|
};
|
|
|
|
/**
|
|
* Sets the "u_color" uniform of the current program to color.
|
|
* @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
|
|
* @param {!Array.<number>} color 4 element array of 0-255 color
|
|
* components.
|
|
*/
|
|
var setUByteDrawColor = function(gl, color) {
|
|
setFloatDrawColor(gl, ubyteColorToFloatColor(color));
|
|
};
|
|
|
|
/**
|
|
* Draws a previously setup quad in the given color.
|
|
* @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
|
|
* @param {!Array.<number>} color The color to draw with. A 4
|
|
* element array where each element is in the range 0 to
|
|
* 1.
|
|
*/
|
|
var drawFloatColorQuad = function(gl, color) {
|
|
var program = gl.getParameter(gl.CURRENT_PROGRAM);
|
|
var colorLocation = gl.getUniformLocation(program, "u_color");
|
|
gl.uniform4fv(colorLocation, color);
|
|
gl.drawArrays(gl.TRIANGLES, 0, 6);
|
|
};
|
|
|
|
|
|
/**
|
|
* Draws a previously setup quad in the given color.
|
|
* @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
|
|
* @param {!Array.<number>} color The color to draw with. A 4
|
|
* element array where each element is in the range 0 to
|
|
* 255.
|
|
*/
|
|
var drawUByteColorQuad = function(gl, color) {
|
|
drawFloatColorQuad(gl, ubyteColorToFloatColor(color));
|
|
};
|
|
|
|
/**
|
|
* Draws a previously setupUnitQuad.
|
|
* @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
|
|
*/
|
|
var drawUnitQuad = function(gl) {
|
|
gl.drawArrays(gl.TRIANGLES, 0, 6);
|
|
};
|
|
|
|
var dummySetProgramAndDrawNothing = function(gl) {
|
|
if (!gl._wtuDummyProgram) {
|
|
gl._wtuDummyProgram = setupProgram(gl, [
|
|
"void main() { gl_Position = vec4(0.0); }",
|
|
"void main() { gl_FragColor = vec4(0.0); }"
|
|
], [], []);
|
|
}
|
|
gl.useProgram(gl._wtuDummyProgram);
|
|
gl.drawArrays(gl.TRIANGLES, 0, 3);
|
|
};
|
|
|
|
/**
|
|
* Clears then Draws a previously setupUnitQuad.
|
|
* @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
|
|
* @param {!Array.<number>} opt_color The color to fill clear with before
|
|
* drawing. A 4 element array where each element is in the range 0 to
|
|
* 255. Default [255, 255, 255, 255]
|
|
*/
|
|
var clearAndDrawUnitQuad = function(gl, opt_color) {
|
|
opt_color = opt_color || [255, 255, 255, 255];
|
|
gl.clearColor(
|
|
opt_color[0] / 255,
|
|
opt_color[1] / 255,
|
|
opt_color[2] / 255,
|
|
opt_color[3] / 255);
|
|
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
|
|
drawUnitQuad(gl);
|
|
};
|
|
|
|
/**
|
|
* Draws a quad previously setup with setupIndexedQuad.
|
|
* @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
|
|
* @param {number} gridRes Resolution of grid.
|
|
*/
|
|
var drawIndexedQuad = function(gl, gridRes) {
|
|
gl.drawElements(gl.TRIANGLES, gridRes * gridRes * 6, gl.UNSIGNED_SHORT, 0);
|
|
};
|
|
|
|
/**
|
|
* Draws a previously setupIndexedQuad
|
|
* @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
|
|
* @param {number} gridRes Resolution of grid.
|
|
* @param {!Array.<number>} opt_color The color to fill clear with before
|
|
* drawing. A 4 element array where each element is in the range 0 to
|
|
* 255. Default [255, 255, 255, 255]
|
|
*/
|
|
var clearAndDrawIndexedQuad = function(gl, gridRes, opt_color) {
|
|
opt_color = opt_color || [255, 255, 255, 255];
|
|
gl.clearColor(
|
|
opt_color[0] / 255,
|
|
opt_color[1] / 255,
|
|
opt_color[2] / 255,
|
|
opt_color[3] / 255);
|
|
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
|
|
drawIndexedQuad(gl, gridRes);
|
|
};
|
|
|
|
/**
|
|
* Clips a range to min, max
|
|
* (Eg. clipToRange(-5,7,0,20) would return {value:0,extent:2}
|
|
* @param {number} value start of range
|
|
* @param {number} extent extent of range
|
|
* @param {number} min min.
|
|
* @param {number} max max.
|
|
* @return {!{value:number,extent:number}} The clipped value.
|
|
*/
|
|
var clipToRange = function(value, extent, min, max) {
|
|
if (value < min) {
|
|
extent -= min - value;
|
|
value = min;
|
|
}
|
|
var end = value + extent;
|
|
if (end > max) {
|
|
extent -= end - max;
|
|
}
|
|
if (extent < 0) {
|
|
value = max;
|
|
extent = 0;
|
|
}
|
|
return {value:value, extent: extent};
|
|
};
|
|
|
|
/**
|
|
* Determines if the passed context is an instance of a WebGLRenderingContext
|
|
* or later variant (like WebGL2RenderingContext)
|
|
* @param {CanvasRenderingContext} ctx The context to check.
|
|
*/
|
|
var isWebGLContext = function(ctx) {
|
|
if (ctx instanceof WebGLRenderingContext)
|
|
return true;
|
|
|
|
if ('WebGL2RenderingContext' in window && ctx instanceof WebGL2RenderingContext)
|
|
return true;
|
|
|
|
return false;
|
|
};
|
|
|
|
/**
|
|
* Creates a check rect is used by checkCanvasRects.
|
|
* @param {number} x left corner of region to check.
|
|
* @param {number} y bottom corner of region to check in case of checking from
|
|
* a GL context or top corner in case of checking from a 2D context.
|
|
* @param {number} width width of region to check.
|
|
* @param {number} height width of region to check.
|
|
* @param {!Array.<number>} color The color expected. A 4 element array where
|
|
* each element is in the range 0 to 255.
|
|
* @param {string} opt_msg Message to associate with success. Eg
|
|
* ("should be red").
|
|
* @param {number} opt_errorRange Optional. Acceptable error in
|
|
* color checking. 0 by default.
|
|
*/
|
|
var makeCheckRect = function(x, y, width, height, color, msg, errorRange) {
|
|
var rect = {
|
|
'x': x, 'y': y,
|
|
'width': width, 'height': height,
|
|
'color': color, 'msg': msg,
|
|
'errorRange': errorRange,
|
|
|
|
'checkRect': function (buf, l, b, w) {
|
|
for (var px = (x - l) ; px < (x + width - l) ; ++px) {
|
|
for (var py = (y - b) ; py < (y + height - b) ; ++py) {
|
|
var offset = (py * w + px) * 4;
|
|
for (var j = 0; j < color.length; ++j) {
|
|
if (Math.abs(buf[offset + j] - color[j]) > errorRange) {
|
|
testFailed(msg);
|
|
var was = buf[offset + 0].toString();
|
|
for (j = 1; j < color.length; ++j) {
|
|
was += "," + buf[offset + j];
|
|
}
|
|
debug('at (' + px + ', ' + py +
|
|
') expected: ' + color + ' was ' + was);
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
testPassed(msg);
|
|
}
|
|
}
|
|
return rect;
|
|
};
|
|
|
|
/**
|
|
* Checks that a portions of a canvas or the currently attached framebuffer is 1 color.
|
|
* @param {!WebGLRenderingContext|CanvasRenderingContext2D} gl The
|
|
* WebGLRenderingContext or 2D context to use.
|
|
* @param {!Array.<checkRect>} array of rects to check for matching color.
|
|
*/
|
|
var checkCanvasRects = function(gl, rects) {
|
|
if (rects.length > 0) {
|
|
var left = rects[0].x;
|
|
var right = rects[0].x + rects[1].width;
|
|
var bottom = rects[0].y;
|
|
var top = rects[0].y + rects[0].height;
|
|
for (var i = 1; i < rects.length; ++i) {
|
|
left = Math.min(left, rects[i].x);
|
|
right = Math.max(right, rects[i].x + rects[i].width);
|
|
bottom = Math.min(bottom, rects[i].y);
|
|
top = Math.max(top, rects[i].y + rects[i].height);
|
|
}
|
|
var width = right - left;
|
|
var height = top - bottom;
|
|
var buf = new Uint8Array(width * height * 4);
|
|
gl.readPixels(left, bottom, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf);
|
|
for (var i = 0; i < rects.length; ++i) {
|
|
rects[i].checkRect(buf, left, bottom, width);
|
|
}
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Checks that a portion of a canvas or the currently attached framebuffer is 1 color.
|
|
* @param {!WebGLRenderingContext|CanvasRenderingContext2D} gl The
|
|
* WebGLRenderingContext or 2D context to use.
|
|
* @param {number} x left corner of region to check.
|
|
* @param {number} y bottom corner of region to check in case of checking from
|
|
* a GL context or top corner in case of checking from a 2D context.
|
|
* @param {number} width width of region to check.
|
|
* @param {number} height width of region to check.
|
|
* @param {!Array.<number>} color The color expected. A 4 element array where
|
|
* each element is in the range 0 to 255.
|
|
* @param {number} opt_errorRange Optional. Acceptable error in
|
|
* color checking. 0 by default.
|
|
* @param {!function()} sameFn Function to call if all pixels
|
|
* are the same as color.
|
|
* @param {!function()} differentFn Function to call if a pixel
|
|
* is different than color
|
|
* @param {!function()} logFn Function to call for logging.
|
|
* @param {TypedArray} opt_readBackBuf optional buffer to read back into.
|
|
* Typically passed to either reuse buffer, or support readbacks from
|
|
* floating-point/norm16 framebuffers.
|
|
* @param {GLenum} opt_readBackType optional read back type, defaulting to
|
|
* gl.UNSIGNED_BYTE. Can be used to support readback from floating-point
|
|
* /norm16 framebuffers.
|
|
* @param {GLenum} opt_readBackFormat optional read back format, defaulting to
|
|
* gl.RGBA. Can be used to support readback from norm16
|
|
* framebuffers.
|
|
*/
|
|
var checkCanvasRectColor = function(gl, x, y, width, height, color, opt_errorRange, sameFn, differentFn, logFn, opt_readBackBuf, opt_readBackType, opt_readBackFormat) {
|
|
if (isWebGLContext(gl) && !gl.getParameter(gl.FRAMEBUFFER_BINDING)) {
|
|
// We're reading the backbuffer so clip.
|
|
var xr = clipToRange(x, width, 0, gl.canvas.width);
|
|
var yr = clipToRange(y, height, 0, gl.canvas.height);
|
|
if (!xr.extent || !yr.extent) {
|
|
logFn("checking rect: effective width or height is zero");
|
|
sameFn();
|
|
return;
|
|
}
|
|
x = xr.value;
|
|
y = yr.value;
|
|
width = xr.extent;
|
|
height = yr.extent;
|
|
}
|
|
var errorRange = opt_errorRange || 0;
|
|
if (!errorRange.length) {
|
|
errorRange = [errorRange, errorRange, errorRange, errorRange]
|
|
}
|
|
var buf;
|
|
if (isWebGLContext(gl)) {
|
|
buf = opt_readBackBuf ? opt_readBackBuf : new Uint8Array(width * height * 4);
|
|
var readBackType = opt_readBackType ? opt_readBackType : gl.UNSIGNED_BYTE;
|
|
var readBackFormat = opt_readBackFormat ? opt_readBackFormat : gl.RGBA;
|
|
gl.readPixels(x, y, width, height, readBackFormat, readBackType, buf);
|
|
} else {
|
|
buf = gl.getImageData(x, y, width, height).data;
|
|
}
|
|
for (var i = 0; i < width * height; ++i) {
|
|
var offset = i * 4;
|
|
for (var j = 0; j < color.length; ++j) {
|
|
if (Math.abs(buf[offset + j] - color[j]) > errorRange[j]) {
|
|
var was = buf[offset + 0].toString();
|
|
for (j = 1; j < color.length; ++j) {
|
|
was += "," + buf[offset + j];
|
|
}
|
|
differentFn('at (' + (x + (i % width)) + ', ' + (y + Math.floor(i / width)) +
|
|
') expected: ' + color + ' was ' + was, buf);
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
sameFn();
|
|
};
|
|
|
|
/**
|
|
* Checks that a portion of a canvas or the currently attached framebuffer is 1 color.
|
|
* @param {!WebGLRenderingContext|CanvasRenderingContext2D} gl The
|
|
* WebGLRenderingContext or 2D context to use.
|
|
* @param {number} x left corner of region to check.
|
|
* @param {number} y bottom corner of region to check in case of checking from
|
|
* a GL context or top corner in case of checking from a 2D context.
|
|
* @param {number} width width of region to check.
|
|
* @param {number} height width of region to check.
|
|
* @param {!Array.<number>} color The color expected. A 4 element array where
|
|
* each element is in the range 0 to 255.
|
|
* @param {string} opt_msg Message to associate with success or failure. Eg
|
|
* ("should be red").
|
|
* @param {number} opt_errorRange Optional. Acceptable error in
|
|
* color checking. 0 by default.
|
|
* @param {TypedArray} opt_readBackBuf optional buffer to read back into.
|
|
* Typically passed to either reuse buffer, or support readbacks from
|
|
* floating-point/norm16 framebuffers.
|
|
* @param {GLenum} opt_readBackType optional read back type, defaulting to
|
|
* gl.UNSIGNED_BYTE. Can be used to support readback from floating-point
|
|
* /norm16 framebuffers.
|
|
* @param {GLenum} opt_readBackFormat optional read back format, defaulting to
|
|
* gl.RGBA. Can be used to support readback from floating-point
|
|
* /norm16 framebuffers.
|
|
*/
|
|
var checkCanvasRect = function(gl, x, y, width, height, color, opt_msg, opt_errorRange, opt_readBackBuf, opt_readBackType, opt_readBackFormat) {
|
|
checkCanvasRectColor(
|
|
gl, x, y, width, height, color, opt_errorRange,
|
|
function() {
|
|
var msg = opt_msg;
|
|
if (msg === undefined)
|
|
msg = "should be " + color.toString();
|
|
testPassed(msg);
|
|
},
|
|
function(differentMsg) {
|
|
var msg = opt_msg;
|
|
if (msg === undefined)
|
|
msg = "should be " + color.toString();
|
|
testFailed(msg + "\n" + differentMsg);
|
|
},
|
|
debug,
|
|
opt_readBackBuf,
|
|
opt_readBackType,
|
|
opt_readBackFormat);
|
|
};
|
|
|
|
/**
|
|
* Checks that an entire canvas or the currently attached framebuffer is 1 color.
|
|
* @param {!WebGLRenderingContext|CanvasRenderingContext2D} gl The
|
|
* WebGLRenderingContext or 2D context to use.
|
|
* @param {!Array.<number>} color The color expected. A 4 element array where
|
|
* each element is in the range 0 to 255.
|
|
* @param {string} msg Message to associate with success. Eg ("should be red").
|
|
* @param {number} errorRange Optional. Acceptable error in
|
|
* color checking. 0 by default.
|
|
*/
|
|
var checkCanvas = function(gl, color, msg, errorRange) {
|
|
checkCanvasRect(gl, 0, 0, gl.canvas.width, gl.canvas.height, color, msg, errorRange);
|
|
};
|
|
|
|
/**
|
|
* Checks a rectangular area both inside the area and outside
|
|
* the area.
|
|
* @param {!WebGLRenderingContext|CanvasRenderingContext2D} gl The
|
|
* WebGLRenderingContext or 2D context to use.
|
|
* @param {number} x left corner of region to check.
|
|
* @param {number} y bottom corner of region to check in case of checking from
|
|
* a GL context or top corner in case of checking from a 2D context.
|
|
* @param {number} width width of region to check.
|
|
* @param {number} height width of region to check.
|
|
* @param {!Array.<number>} innerColor The color expected inside
|
|
* the area. A 4 element array where each element is in the
|
|
* range 0 to 255.
|
|
* @param {!Array.<number>} outerColor The color expected
|
|
* outside. A 4 element array where each element is in the
|
|
* range 0 to 255.
|
|
* @param {!number} opt_edgeSize: The number of pixels to skip
|
|
* around the edges of the area. Defaut 0.
|
|
* @param {!{width:number, height:number}} opt_outerDimensions
|
|
* The outer dimensions. Default the size of gl.canvas.
|
|
*/
|
|
var checkAreaInAndOut = function(gl, x, y, width, height, innerColor, outerColor, opt_edgeSize, opt_outerDimensions) {
|
|
var outerDimensions = opt_outerDimensions || { width: gl.canvas.width, height: gl.canvas.height };
|
|
var edgeSize = opt_edgeSize || 0;
|
|
checkCanvasRect(gl, x + edgeSize, y + edgeSize, width - edgeSize * 2, height - edgeSize * 2, innerColor);
|
|
checkCanvasRect(gl, 0, 0, x - edgeSize, outerDimensions.height, outerColor);
|
|
checkCanvasRect(gl, x + width + edgeSize, 0, outerDimensions.width - x - width - edgeSize, outerDimensions.height, outerColor);
|
|
checkCanvasRect(gl, 0, 0, outerDimensions.width, y - edgeSize, outerColor);
|
|
checkCanvasRect(gl, 0, y + height + edgeSize, outerDimensions.width, outerDimensions.height - y - height - edgeSize, outerColor);
|
|
};
|
|
|
|
/**
|
|
* Checks that an entire buffer matches the floating point values provided.
|
|
* (WebGL 2.0 only)
|
|
* @param {!WebGL2RenderingContext} gl The WebGL2RenderingContext to use.
|
|
* @param {number} target The buffer target to bind to.
|
|
* @param {!Array.<number>} expected The values expected.
|
|
* @param {string} opt_msg Optional. Message to associate with success. Eg ("should be red").
|
|
* @param {number} opt_errorRange Optional. Acceptable error in value checking. 0.001 by default.
|
|
*/
|
|
var checkFloatBuffer = function(gl, target, expected, opt_msg, opt_errorRange) {
|
|
if (opt_msg === undefined)
|
|
opt_msg = "buffer should match expected values";
|
|
|
|
if (opt_errorRange === undefined)
|
|
opt_errorRange = 0.001;
|
|
|
|
var floatArray = new Float32Array(expected.length);
|
|
gl.getBufferSubData(target, 0, floatArray);
|
|
|
|
for (var i = 0; i < expected.length; i++) {
|
|
if (Math.abs(floatArray[i] - expected[i]) > opt_errorRange) {
|
|
testFailed(opt_msg);
|
|
debug('at [' + i + '] expected: ' + expected[i] + ' was ' + floatArray[i]);
|
|
return;
|
|
}
|
|
}
|
|
testPassed(opt_msg);
|
|
};
|
|
|
|
/**
|
|
* Loads a texture, calls callback when finished.
|
|
* @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
|
|
* @param {string} url URL of image to load
|
|
* @param {function(!Image): void} callback Function that gets called after
|
|
* image has loaded
|
|
* @return {!WebGLTexture} The created texture.
|
|
*/
|
|
var loadTexture = function(gl, url, callback) {
|
|
var texture = gl.createTexture();
|
|
gl.bindTexture(gl.TEXTURE_2D, texture);
|
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
|
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
|
|
var image = new Image();
|
|
image.onload = function() {
|
|
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, image);
|
|
callback(image);
|
|
};
|
|
image.src = url;
|
|
return texture;
|
|
};
|
|
|
|
/**
|
|
* Checks whether the bound texture has expected dimensions. One corner pixel
|
|
* of the texture will be changed as a side effect.
|
|
* @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
|
|
* @param {!WebGLTexture} texture The texture to check.
|
|
* @param {number} width Expected width.
|
|
* @param {number} height Expected height.
|
|
* @param {GLenum} opt_format The texture's format. Defaults to RGBA.
|
|
* @param {GLenum} opt_type The texture's type. Defaults to UNSIGNED_BYTE.
|
|
*/
|
|
var checkTextureSize = function(gl, width, height, opt_format, opt_type) {
|
|
opt_format = opt_format || gl.RGBA;
|
|
opt_type = opt_type || gl.UNSIGNED_BYTE;
|
|
|
|
var numElements = getTypedArrayElementsPerPixel(gl, opt_format, opt_type);
|
|
var buf = new (glTypeToTypedArrayType(gl, opt_type))(numElements);
|
|
|
|
var errors = 0;
|
|
gl.texSubImage2D(gl.TEXTURE_2D, 0, width - 1, height - 1, 1, 1, opt_format, opt_type, buf);
|
|
if (gl.getError() != gl.NO_ERROR) {
|
|
testFailed("Texture was smaller than the expected size " + width + "x" + height);
|
|
++errors;
|
|
}
|
|
gl.texSubImage2D(gl.TEXTURE_2D, 0, width - 1, height, 1, 1, opt_format, opt_type, buf);
|
|
if (gl.getError() == gl.NO_ERROR) {
|
|
testFailed("Texture was taller than " + height);
|
|
++errors;
|
|
}
|
|
gl.texSubImage2D(gl.TEXTURE_2D, 0, width, height - 1, 1, 1, opt_format, opt_type, buf);
|
|
if (gl.getError() == gl.NO_ERROR) {
|
|
testFailed("Texture was wider than " + width);
|
|
++errors;
|
|
}
|
|
if (errors == 0) {
|
|
testPassed("Texture had the expected size " + width + "x" + height);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Makes a shallow copy of an object.
|
|
* @param {!Object} src Object to copy
|
|
* @return {!Object} The copy of src.
|
|
*/
|
|
var shallowCopyObject = function(src) {
|
|
var dst = {};
|
|
for (var attr in src) {
|
|
if (src.hasOwnProperty(attr)) {
|
|
dst[attr] = src[attr];
|
|
}
|
|
}
|
|
return dst;
|
|
};
|
|
|
|
/**
|
|
* Checks if an attribute exists on an object case insensitive.
|
|
* @param {!Object} obj Object to check
|
|
* @param {string} attr Name of attribute to look for.
|
|
* @return {string?} The name of the attribute if it exists,
|
|
* undefined if not.
|
|
*/
|
|
var hasAttributeCaseInsensitive = function(obj, attr) {
|
|
var lower = attr.toLowerCase();
|
|
for (var key in obj) {
|
|
if (obj.hasOwnProperty(key) && key.toLowerCase() == lower) {
|
|
return key;
|
|
}
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Returns a map of URL querystring options
|
|
* @return {Object?} Object containing all the values in the URL querystring
|
|
*/
|
|
var getUrlOptions = (function() {
|
|
var _urlOptionsParsed = false;
|
|
var _urlOptions = {};
|
|
return function() {
|
|
if (!_urlOptionsParsed) {
|
|
var s = window.location.href;
|
|
var q = s.indexOf("?");
|
|
var e = s.indexOf("#");
|
|
if (e < 0) {
|
|
e = s.length;
|
|
}
|
|
var query = s.substring(q + 1, e);
|
|
var pairs = query.split("&");
|
|
for (var ii = 0; ii < pairs.length; ++ii) {
|
|
var keyValue = pairs[ii].split("=");
|
|
var key = keyValue[0];
|
|
var value = decodeURIComponent(keyValue[1]);
|
|
_urlOptions[key] = value;
|
|
}
|
|
_urlOptionsParsed = true;
|
|
}
|
|
|
|
return _urlOptions;
|
|
}
|
|
})();
|
|
|
|
var default3DContextVersion = 1;
|
|
|
|
/**
|
|
* Set the default context version for create3DContext.
|
|
* Initially the default version is 1.
|
|
* @param {number} Default version of WebGL contexts.
|
|
*/
|
|
var setDefault3DContextVersion = function(version) {
|
|
default3DContextVersion = version;
|
|
};
|
|
|
|
/**
|
|
* Get the default contex version for create3DContext.
|
|
* First it looks at the URI option |webglVersion|. If it does not exist,
|
|
* then look at the global default3DContextVersion variable.
|
|
*/
|
|
var getDefault3DContextVersion = function() {
|
|
return parseInt(getUrlOptions().webglVersion, 10) || default3DContextVersion;
|
|
};
|
|
|
|
/**
|
|
* Creates a webgl context.
|
|
* @param {!Canvas|string} opt_canvas The canvas tag to get
|
|
* context from. If one is not passed in one will be
|
|
* created. If it's a string it's assumed to be the id of a
|
|
* canvas.
|
|
* @param {Object} opt_attributes Context attributes.
|
|
* @param {!number} opt_version Version of WebGL context to create.
|
|
* The default version can be set by calling setDefault3DContextVersion.
|
|
* @return {!WebGLRenderingContext} The created context.
|
|
*/
|
|
var create3DContext = function(opt_canvas, opt_attributes, opt_version) {
|
|
if (window.initTestingHarness) {
|
|
window.initTestingHarness();
|
|
}
|
|
var attributes = shallowCopyObject(opt_attributes || {});
|
|
if (!hasAttributeCaseInsensitive(attributes, "antialias")) {
|
|
attributes.antialias = false;
|
|
}
|
|
|
|
const parseString = v => v;
|
|
const parseBoolean = v => v.toLowerCase().startsWith('t') || parseFloat(v) > 0;
|
|
const params = new URLSearchParams(window.location.search);
|
|
for (const [key, parseFn] of Object.entries({
|
|
alpha: parseBoolean,
|
|
antialias: parseBoolean,
|
|
depth: parseBoolean,
|
|
desynchronized: parseBoolean,
|
|
failIfMajorPerformanceCaveat: parseBoolean,
|
|
powerPreference: parseString,
|
|
premultipliedAlpha: parseBoolean,
|
|
preserveDrawingBuffer: parseBoolean,
|
|
stencil: parseBoolean,
|
|
})) {
|
|
const value = params.get(key);
|
|
if (value) {
|
|
const v = parseFn(value);
|
|
attributes[key] = v;
|
|
debug(`setting context attribute: ${key} = ${v}`);
|
|
}
|
|
}
|
|
|
|
if (!opt_version) {
|
|
opt_version = getDefault3DContextVersion();
|
|
}
|
|
opt_canvas = opt_canvas || document.createElement("canvas");
|
|
if (typeof opt_canvas == 'string') {
|
|
opt_canvas = document.getElementById(opt_canvas);
|
|
}
|
|
var context = null;
|
|
|
|
var names;
|
|
switch (opt_version) {
|
|
case 2:
|
|
names = ["webgl2"]; break;
|
|
default:
|
|
names = ["webgl", "experimental-webgl"]; break;
|
|
}
|
|
|
|
for (var i = 0; i < names.length; ++i) {
|
|
try {
|
|
context = opt_canvas.getContext(names[i], attributes);
|
|
} catch (e) {
|
|
}
|
|
if (context) {
|
|
break;
|
|
}
|
|
}
|
|
if (!context) {
|
|
testFailed("Unable to fetch WebGL rendering context for Canvas");
|
|
} else {
|
|
if (!window._wtu_contexts) {
|
|
window._wtu_contexts = []
|
|
}
|
|
window._wtu_contexts.push(context);
|
|
}
|
|
|
|
if (params.get('showRenderer')) {
|
|
const ext = context.getExtension('WEBGL_debug_renderer_info');
|
|
debug(`RENDERER: ${context.getParameter(ext ? ext.UNMASKED_RENDERER_WEBGL : context.RENDERER)}`);
|
|
}
|
|
|
|
return context;
|
|
};
|
|
|
|
/**
|
|
* Indicates whether the given context is WebGL 2.0 or greater.
|
|
* @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
|
|
* @return {boolean} True if the given context is WebGL 2.0 or greater.
|
|
*/
|
|
var isWebGL2 = function(gl) {
|
|
// Duck typing is used so that the conformance suite can be run
|
|
// against libraries emulating WebGL 1.0 on top of WebGL 2.0.
|
|
return !!gl.drawArraysInstanced;
|
|
};
|
|
|
|
/**
|
|
* Defines the exception type for a GL error.
|
|
* @constructor
|
|
* @param {string} message The error message.
|
|
* @param {number} error GL error code
|
|
*/
|
|
function GLErrorException (message, error) {
|
|
this.message = message;
|
|
this.name = "GLErrorException";
|
|
this.error = error;
|
|
};
|
|
|
|
/**
|
|
* Wraps a WebGL function with a function that throws an exception if there is
|
|
* an error.
|
|
* @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
|
|
* @param {string} fname Name of function to wrap.
|
|
* @return {function()} The wrapped function.
|
|
*/
|
|
var createGLErrorWrapper = function(context, fname) {
|
|
return function() {
|
|
var rv = context[fname].apply(context, arguments);
|
|
var err = context.getError();
|
|
if (err != context.NO_ERROR) {
|
|
var msg = "GL error " + glEnumToString(context, err) + " in " + fname;
|
|
throw new GLErrorException(msg, err);
|
|
}
|
|
return rv;
|
|
};
|
|
};
|
|
|
|
/**
|
|
* Creates a WebGL context where all functions are wrapped to throw an exception
|
|
* if there is an error.
|
|
* @param {!Canvas} canvas The HTML canvas to get a context from.
|
|
* @param {Object} opt_attributes Context attributes.
|
|
* @param {!number} opt_version Version of WebGL context to create
|
|
* @return {!Object} The wrapped context.
|
|
*/
|
|
function create3DContextWithWrapperThatThrowsOnGLError(canvas, opt_attributes, opt_version) {
|
|
var context = create3DContext(canvas, opt_attributes, opt_version);
|
|
var wrap = {};
|
|
for (var i in context) {
|
|
try {
|
|
if (typeof context[i] == 'function') {
|
|
wrap[i] = createGLErrorWrapper(context, i);
|
|
} else {
|
|
wrap[i] = context[i];
|
|
}
|
|
} catch (e) {
|
|
error("createContextWrapperThatThrowsOnGLError: Error accessing " + i);
|
|
}
|
|
}
|
|
wrap.getError = function() {
|
|
return context.getError();
|
|
};
|
|
return wrap;
|
|
};
|
|
|
|
/**
|
|
* Tests that an evaluated expression generates a specific GL error.
|
|
* @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
|
|
* @param {number|Array.<number>} glErrors The expected gl error or an array of expected errors.
|
|
* @param {string} evalStr The string to evaluate.
|
|
*/
|
|
var shouldGenerateGLError = function(gl, glErrors, evalStr, opt_msg) {
|
|
var exception;
|
|
try {
|
|
eval(evalStr);
|
|
} catch (e) {
|
|
exception = e;
|
|
}
|
|
if (exception) {
|
|
testFailed(evalStr + " threw exception " + exception);
|
|
return -1;
|
|
} else {
|
|
if (!opt_msg) {
|
|
opt_msg = "after evaluating: " + evalStr;
|
|
}
|
|
return glErrorShouldBe(gl, glErrors, opt_msg);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Tests that an evaluated expression does not generate a GL error.
|
|
* @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
|
|
* @param {string} evalStr The string to evaluate.
|
|
*/
|
|
var failIfGLError = function(gl, evalStr) {
|
|
var exception;
|
|
try {
|
|
eval(evalStr);
|
|
} catch (e) {
|
|
exception = e;
|
|
}
|
|
if (exception) {
|
|
testFailed(evalStr + " threw exception " + exception);
|
|
} else {
|
|
glErrorShouldBeImpl(gl, gl.NO_ERROR, false, "after evaluating: " + evalStr);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Tests that the first error GL returns is the specified error.
|
|
* @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
|
|
* @param {number|Array.<number>} glErrors The expected gl error or an array of expected errors.
|
|
* @param {string} opt_msg Optional additional message.
|
|
*/
|
|
var glErrorShouldBe = function(gl, glErrors, opt_msg) {
|
|
return glErrorShouldBeImpl(gl, glErrors, true, opt_msg);
|
|
};
|
|
|
|
const glErrorAssert = function(gl, glErrors, opt_msg) {
|
|
return glErrorShouldBeImpl(gl, glErrors, false, opt_msg);
|
|
};
|
|
|
|
/**
|
|
* Tests that the given framebuffer has a specific status
|
|
* @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
|
|
* @param {number|Array.<number>} glStatuses The expected gl
|
|
* status or an array of expected statuses.
|
|
* @param {string} opt_msg Optional additional message.
|
|
*/
|
|
var framebufferStatusShouldBe = function(gl, target, glStatuses, opt_msg) {
|
|
if (!glStatuses.length) {
|
|
glStatuses = [glStatuses];
|
|
}
|
|
opt_msg = opt_msg || "";
|
|
const status = gl.checkFramebufferStatus(target);
|
|
const ndx = glStatuses.indexOf(status);
|
|
const expected = glStatuses.map((status) => {
|
|
return glEnumToString(gl, status);
|
|
}).join(' or ');
|
|
if (ndx < 0) {
|
|
let msg = "checkFramebufferStatus expected" + ((glStatuses.length > 1) ? " one of: " : ": ") +
|
|
expected + ". Was " + glEnumToString(gl, status);
|
|
if (opt_msg) {
|
|
msg += ": " + opt_msg;
|
|
}
|
|
testFailed(msg);
|
|
return false;
|
|
}
|
|
let msg = `checkFramebufferStatus was ${glEnumToString(gl, status)}`;
|
|
if (glStatuses.length > 1) {
|
|
msg += `, one of: ${expected}`;
|
|
}
|
|
if (opt_msg) {
|
|
msg += ": " + opt_msg;
|
|
}
|
|
testPassed(msg);
|
|
return [status];
|
|
}
|
|
|
|
/**
|
|
* Tests that the first error GL returns is the specified error. Allows suppression of successes.
|
|
* @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
|
|
* @param {number|Array.<number>} glErrors The expected gl error or an array of expected errors.
|
|
* @param {boolean} reportSuccesses Whether to report successes as passes, or to silently pass.
|
|
* @param {string} opt_msg Optional additional message.
|
|
*/
|
|
var glErrorShouldBeImpl = function(gl, glErrors, reportSuccesses, opt_msg) {
|
|
if (!glErrors.length) {
|
|
glErrors = [glErrors];
|
|
}
|
|
opt_msg = opt_msg || "";
|
|
|
|
const fnErrStr = function(errVal) {
|
|
if (errVal == 0) return "NO_ERROR";
|
|
return glEnumToString(gl, errVal);
|
|
};
|
|
|
|
var err = gl.getError();
|
|
var ndx = glErrors.indexOf(err);
|
|
var errStrs = [];
|
|
for (var ii = 0; ii < glErrors.length; ++ii) {
|
|
errStrs.push(fnErrStr(glErrors[ii]));
|
|
}
|
|
var expected = errStrs.join(" or ");
|
|
if (ndx < 0) {
|
|
var msg = "getError expected" + ((glErrors.length > 1) ? " one of: " : ": ");
|
|
testFailed(msg + expected + ". Was " + fnErrStr(err) + " : " + opt_msg);
|
|
} else if (reportSuccesses) {
|
|
var msg = "getError was " + ((glErrors.length > 1) ? "one of: " : "expected value: ");
|
|
testPassed(msg + expected + " : " + opt_msg);
|
|
}
|
|
return err;
|
|
};
|
|
|
|
/**
|
|
* Tests that a function throws or not.
|
|
* @param {!WebGLContext} gl The WebGLContext to use.
|
|
* @param throwType Type of thrown error (e.g. TypeError), or false.
|
|
* @param {string} info Info on what's being tested
|
|
* @param {function} func The func to test.
|
|
*/
|
|
var shouldThrow = function(gl, throwType, info, func) {
|
|
while (gl.getError()) {}
|
|
|
|
var shouldThrow = (throwType != false);
|
|
|
|
try {
|
|
func();
|
|
|
|
if (shouldThrow) {
|
|
testFailed("Should throw a " + throwType.name + ": " + info);
|
|
} else {
|
|
testPassed("Should not have thrown: " + info);
|
|
}
|
|
} catch (e) {
|
|
if (shouldThrow) {
|
|
if (e instanceof throwType) {
|
|
testPassed("Should throw a " + throwType.name + ": " + info);
|
|
} else {
|
|
testFailed("Should throw a " + throwType.name + ", threw " + e.name + ": " + info);
|
|
}
|
|
} else {
|
|
testFailed("Should not have thrown: " + info);
|
|
}
|
|
|
|
if (gl.getError()) {
|
|
testFailed("Should not generate an error when throwing: " + info);
|
|
}
|
|
}
|
|
|
|
while (gl.getError()) {}
|
|
};
|
|
|
|
/**
|
|
* Links a WebGL program, throws if there are errors.
|
|
* @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
|
|
* @param {!WebGLProgram} program The WebGLProgram to link.
|
|
* @param {function(string): void} opt_errorCallback callback for errors.
|
|
*/
|
|
var linkProgram = function(gl, program, opt_errorCallback) {
|
|
var errFn = opt_errorCallback || testFailed;
|
|
// Link the program
|
|
gl.linkProgram(program);
|
|
|
|
// Check the link status
|
|
var linked = gl.getProgramParameter(program, gl.LINK_STATUS);
|
|
if (!linked) {
|
|
// something went wrong with the link
|
|
var error = gl.getProgramInfoLog (program);
|
|
|
|
errFn("Error in program linking:" + error);
|
|
|
|
gl.deleteProgram(program);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Loads text from an external file. This function is asynchronous.
|
|
* @param {string} url The url of the external file.
|
|
* @param {!function(bool, string): void} callback that is sent a bool for
|
|
* success and the string.
|
|
*/
|
|
var loadTextFileAsync = function(url, callback) {
|
|
log ("loading: " + url);
|
|
var error = 'loadTextFileAsync failed to load url "' + url + '"';
|
|
var request;
|
|
if (window.XMLHttpRequest) {
|
|
request = new XMLHttpRequest();
|
|
if (request.overrideMimeType) {
|
|
request.overrideMimeType('text/plain');
|
|
}
|
|
} else {
|
|
throw 'XMLHttpRequest is disabled';
|
|
}
|
|
try {
|
|
request.open('GET', url, true);
|
|
request.onreadystatechange = function() {
|
|
if (request.readyState == 4) {
|
|
var text = '';
|
|
// HTTP reports success with a 200 status. The file protocol reports
|
|
// success with zero. HTTP does not use zero as a status code (they
|
|
// start at 100).
|
|
// https://developer.mozilla.org/En/Using_XMLHttpRequest
|
|
var success = request.status == 200 || request.status == 0;
|
|
if (success) {
|
|
text = request.responseText;
|
|
log("completed load request: " + url);
|
|
} else {
|
|
log("loading " + url + " resulted in unexpected status: " + request.status + " " + request.statusText);
|
|
}
|
|
callback(success, text);
|
|
}
|
|
};
|
|
request.onerror = function(errorEvent) {
|
|
log("error occurred loading " + url);
|
|
callback(false, '');
|
|
};
|
|
request.send(null);
|
|
} catch (err) {
|
|
log("failed to load: " + url + " with exception " + err.message);
|
|
callback(false, '');
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Recursively loads a file as a list. Each line is parsed for a relative
|
|
* path. If the file ends in .txt the contents of that file is inserted in
|
|
* the list.
|
|
*
|
|
* @param {string} url The url of the external file.
|
|
* @param {!function(bool, Array<string>): void} callback that is sent a bool
|
|
* for success and the array of strings.
|
|
*/
|
|
var getFileListAsync = function(url, callback) {
|
|
var files = [];
|
|
|
|
var getFileListImpl = function(url, callback) {
|
|
var files = [];
|
|
if (url.substr(url.length - 4) == '.txt') {
|
|
loadTextFileAsync(url, function() {
|
|
return function(success, text) {
|
|
if (!success) {
|
|
callback(false, '');
|
|
return;
|
|
}
|
|
var lines = text.split('\n');
|
|
var prefix = '';
|
|
var lastSlash = url.lastIndexOf('/');
|
|
if (lastSlash >= 0) {
|
|
prefix = url.substr(0, lastSlash + 1);
|
|
}
|
|
var fail = false;
|
|
var count = 1;
|
|
var index = 0;
|
|
for (var ii = 0; ii < lines.length; ++ii) {
|
|
var str = lines[ii].replace(/^\s\s*/, '').replace(/\s\s*$/, '');
|
|
if (str.length > 4 &&
|
|
str[0] != '#' &&
|
|
str[0] != ";" &&
|
|
str.substr(0, 2) != "//") {
|
|
var names = str.split(/ +/);
|
|
var new_url = prefix + str;
|
|
if (names.length == 1) {
|
|
new_url = prefix + str;
|
|
++count;
|
|
getFileListImpl(new_url, function(index) {
|
|
return function(success, new_files) {
|
|
log("got files: " + new_files.length);
|
|
if (success) {
|
|
files[index] = new_files;
|
|
}
|
|
finish(success);
|
|
};
|
|
}(index++));
|
|
} else {
|
|
var s = "";
|
|
var p = "";
|
|
for (var jj = 0; jj < names.length; ++jj) {
|
|
s += p + prefix + names[jj];
|
|
p = " ";
|
|
}
|
|
files[index++] = s;
|
|
}
|
|
}
|
|
}
|
|
finish(true);
|
|
|
|
function finish(success) {
|
|
if (!success) {
|
|
fail = true;
|
|
}
|
|
--count;
|
|
log("count: " + count);
|
|
if (!count) {
|
|
callback(!fail, files);
|
|
}
|
|
}
|
|
}
|
|
}());
|
|
|
|
} else {
|
|
files.push(url);
|
|
callback(true, files);
|
|
}
|
|
};
|
|
|
|
getFileListImpl(url, function(success, files) {
|
|
// flatten
|
|
var flat = [];
|
|
flatten(files);
|
|
function flatten(files) {
|
|
for (var ii = 0; ii < files.length; ++ii) {
|
|
var value = files[ii];
|
|
if (typeof(value) == "string") {
|
|
flat.push(value);
|
|
} else {
|
|
flatten(value);
|
|
}
|
|
}
|
|
}
|
|
callback(success, flat);
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Gets a file from a file/URL.
|
|
* @param {string} file the URL of the file to get.
|
|
* @return {string} The contents of the file.
|
|
*/
|
|
var readFile = function(file) {
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open("GET", file, false);
|
|
xhr.overrideMimeType("text/plain");
|
|
xhr.send();
|
|
return xhr.responseText.replace(/\r/g, "");
|
|
};
|
|
|
|
var readFileList = function(url) {
|
|
var files = [];
|
|
if (url.substr(url.length - 4) == '.txt') {
|
|
var lines = readFile(url).split('\n');
|
|
var prefix = '';
|
|
var lastSlash = url.lastIndexOf('/');
|
|
if (lastSlash >= 0) {
|
|
prefix = url.substr(0, lastSlash + 1);
|
|
}
|
|
for (var ii = 0; ii < lines.length; ++ii) {
|
|
var str = lines[ii].replace(/^\s\s*/, '').replace(/\s\s*$/, '');
|
|
if (str.length > 4 &&
|
|
str[0] != '#' &&
|
|
str[0] != ";" &&
|
|
str.substr(0, 2) != "//") {
|
|
var names = str.split(/ +/);
|
|
if (names.length == 1) {
|
|
var new_url = prefix + str;
|
|
files = files.concat(readFileList(new_url));
|
|
} else {
|
|
var s = "";
|
|
var p = "";
|
|
for (var jj = 0; jj < names.length; ++jj) {
|
|
s += p + prefix + names[jj];
|
|
p = " ";
|
|
}
|
|
files.push(s);
|
|
}
|
|
}
|
|
}
|
|
} else {
|
|
files.push(url);
|
|
}
|
|
return files;
|
|
};
|
|
|
|
/**
|
|
* Loads a shader.
|
|
* @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
|
|
* @param {string} shaderSource The shader source.
|
|
* @param {number} shaderType The type of shader.
|
|
* @param {function(string): void} opt_errorCallback callback for errors.
|
|
* @param {boolean} opt_logShaders Whether to log shader source.
|
|
* @param {string} opt_shaderLabel Label that identifies the shader source in
|
|
* the log.
|
|
* @param {string} opt_url URL from where the shader source was loaded from.
|
|
* If opt_logShaders is set, then a link to the source file will also be
|
|
* added.
|
|
* @param {boolean} Skip compilation status check. Default = false.
|
|
* @return {!WebGLShader} The created shader.
|
|
*/
|
|
var loadShader = function(
|
|
gl, shaderSource, shaderType, opt_errorCallback, opt_logShaders,
|
|
opt_shaderLabel, opt_url, opt_skipCompileStatus) {
|
|
var errFn = opt_errorCallback || error;
|
|
// Create the shader object
|
|
var shader = gl.createShader(shaderType);
|
|
if (shader == null) {
|
|
errFn("*** Error: unable to create shader '"+shaderSource+"'");
|
|
return null;
|
|
}
|
|
|
|
// Load the shader source
|
|
gl.shaderSource(shader, shaderSource);
|
|
|
|
// Compile the shader
|
|
gl.compileShader(shader);
|
|
|
|
if (opt_logShaders) {
|
|
var label = shaderType == gl.VERTEX_SHADER ? 'vertex shader' : 'fragment_shader';
|
|
if (opt_shaderLabel) {
|
|
label = opt_shaderLabel + ' ' + label;
|
|
}
|
|
addShaderSources(
|
|
gl, document.getElementById('console'), label, shader, shaderSource, opt_url);
|
|
}
|
|
|
|
// Check the compile status
|
|
if (!opt_skipCompileStatus) {
|
|
var compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
|
|
if (!compiled) {
|
|
// Something went wrong during compilation; get the error
|
|
lastError = gl.getShaderInfoLog(shader);
|
|
errFn("*** Error compiling " + glEnumToString(gl, shaderType) + " '" + shader + "':" + lastError);
|
|
gl.deleteShader(shader);
|
|
return null;
|
|
}
|
|
}
|
|
|
|
return shader;
|
|
}
|
|
|
|
/**
|
|
* Loads a shader from a URL.
|
|
* @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
|
|
* @param {file} file The URL of the shader source.
|
|
* @param {number} type The type of shader.
|
|
* @param {function(string): void} opt_errorCallback callback for errors.
|
|
* @param {boolean} opt_logShaders Whether to log shader source.
|
|
* @param {boolean} Skip compilation status check. Default = false.
|
|
* @return {!WebGLShader} The created shader.
|
|
*/
|
|
var loadShaderFromFile = function(
|
|
gl, file, type, opt_errorCallback, opt_logShaders, opt_skipCompileStatus) {
|
|
var shaderSource = readFile(file);
|
|
return loadShader(gl, shaderSource, type, opt_errorCallback,
|
|
opt_logShaders, undefined, file, opt_skipCompileStatus);
|
|
};
|
|
|
|
var loadShaderFromFileAsync = function(
|
|
gl, file, type, opt_errorCallback, opt_logShaders, opt_skipCompileStatus, callback) {
|
|
loadTextFileAsync(file, function(gl, type, opt_errorCallback, opt_logShaders, file, opt_skipCompileStatus){
|
|
return function(success, shaderSource) {
|
|
if (success) {
|
|
var shader = loadShader(gl, shaderSource, type, opt_errorCallback,
|
|
opt_logShaders, undefined, file, opt_skipCompileStatus);
|
|
callback(true, shader);
|
|
} else {
|
|
callback(false, null);
|
|
}
|
|
}
|
|
}(gl, type, opt_errorCallback, opt_logShaders, file, opt_skipCompileStatus));
|
|
};
|
|
|
|
/**
|
|
* Gets the content of script.
|
|
* @param {string} scriptId The id of the script tag.
|
|
* @return {string} The content of the script.
|
|
*/
|
|
var getScript = function(scriptId) {
|
|
var shaderScript = document.getElementById(scriptId);
|
|
if (!shaderScript) {
|
|
throw("*** Error: unknown script element " + scriptId);
|
|
}
|
|
return shaderScript.text;
|
|
};
|
|
|
|
/**
|
|
* Loads a shader from a script tag.
|
|
* @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
|
|
* @param {string} scriptId The id of the script tag.
|
|
* @param {number} opt_shaderType The type of shader. If not passed in it will
|
|
* be derived from the type of the script tag.
|
|
* @param {function(string): void} opt_errorCallback callback for errors.
|
|
* @param {boolean} opt_logShaders Whether to log shader source.
|
|
* @param {boolean} Skip compilation status check. Default = false.
|
|
* @return {!WebGLShader} The created shader.
|
|
*/
|
|
var loadShaderFromScript = function(
|
|
gl, scriptId, opt_shaderType, opt_errorCallback, opt_logShaders, opt_skipCompileStatus) {
|
|
var shaderSource = "";
|
|
var shaderScript = document.getElementById(scriptId);
|
|
if (!shaderScript) {
|
|
throw("*** Error: unknown script element " + scriptId);
|
|
}
|
|
shaderSource = shaderScript.text.trim();
|
|
|
|
if (!opt_shaderType) {
|
|
if (shaderScript.type == "x-shader/x-vertex") {
|
|
opt_shaderType = gl.VERTEX_SHADER;
|
|
} else if (shaderScript.type == "x-shader/x-fragment") {
|
|
opt_shaderType = gl.FRAGMENT_SHADER;
|
|
} else {
|
|
throw("*** Error: unknown shader type");
|
|
return null;
|
|
}
|
|
}
|
|
|
|
return loadShader(gl, shaderSource, opt_shaderType, opt_errorCallback,
|
|
opt_logShaders, undefined, undefined, opt_skipCompileStatus);
|
|
};
|
|
|
|
var loadStandardProgram = function(gl) {
|
|
var program = gl.createProgram();
|
|
gl.attachShader(program, loadStandardVertexShader(gl));
|
|
gl.attachShader(program, loadStandardFragmentShader(gl));
|
|
gl.bindAttribLocation(program, 0, "a_vertex");
|
|
gl.bindAttribLocation(program, 1, "a_normal");
|
|
linkProgram(gl, program);
|
|
return program;
|
|
};
|
|
|
|
var loadStandardProgramAsync = function(gl, callback) {
|
|
loadStandardVertexShaderAsync(gl, function(gl) {
|
|
return function(success, vs) {
|
|
if (success) {
|
|
loadStandardFragmentShaderAsync(gl, function(vs) {
|
|
return function(success, fs) {
|
|
if (success) {
|
|
var program = gl.createProgram();
|
|
gl.attachShader(program, vs);
|
|
gl.attachShader(program, fs);
|
|
gl.bindAttribLocation(program, 0, "a_vertex");
|
|
gl.bindAttribLocation(program, 1, "a_normal");
|
|
linkProgram(gl, program);
|
|
callback(true, program);
|
|
} else {
|
|
callback(false, null);
|
|
}
|
|
};
|
|
}(vs));
|
|
} else {
|
|
callback(false, null);
|
|
}
|
|
};
|
|
}(gl));
|
|
};
|
|
|
|
/**
|
|
* Loads shaders from files, creates a program, attaches the shaders and links.
|
|
* @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
|
|
* @param {string} vertexShaderPath The URL of the vertex shader.
|
|
* @param {string} fragmentShaderPath The URL of the fragment shader.
|
|
* @param {function(string): void} opt_errorCallback callback for errors.
|
|
* @return {!WebGLProgram} The created program.
|
|
*/
|
|
var loadProgramFromFile = function(
|
|
gl, vertexShaderPath, fragmentShaderPath, opt_errorCallback) {
|
|
var program = gl.createProgram();
|
|
var vs = loadShaderFromFile(
|
|
gl, vertexShaderPath, gl.VERTEX_SHADER, opt_errorCallback);
|
|
var fs = loadShaderFromFile(
|
|
gl, fragmentShaderPath, gl.FRAGMENT_SHADER, opt_errorCallback);
|
|
if (vs && fs) {
|
|
gl.attachShader(program, vs);
|
|
gl.attachShader(program, fs);
|
|
linkProgram(gl, program, opt_errorCallback);
|
|
}
|
|
if (vs) {
|
|
gl.deleteShader(vs);
|
|
}
|
|
if (fs) {
|
|
gl.deleteShader(fs);
|
|
}
|
|
return program;
|
|
};
|
|
|
|
/**
|
|
* Loads shaders from script tags, creates a program, attaches the shaders and
|
|
* links.
|
|
* @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
|
|
* @param {string} vertexScriptId The id of the script tag that contains the
|
|
* vertex shader.
|
|
* @param {string} fragmentScriptId The id of the script tag that contains the
|
|
* fragment shader.
|
|
* @param {function(string): void} opt_errorCallback callback for errors.
|
|
* @return {!WebGLProgram} The created program.
|
|
*/
|
|
var loadProgramFromScript = function loadProgramFromScript(
|
|
gl, vertexScriptId, fragmentScriptId, opt_errorCallback) {
|
|
var program = gl.createProgram();
|
|
gl.attachShader(
|
|
program,
|
|
loadShaderFromScript(
|
|
gl, vertexScriptId, gl.VERTEX_SHADER, opt_errorCallback));
|
|
gl.attachShader(
|
|
program,
|
|
loadShaderFromScript(
|
|
gl, fragmentScriptId, gl.FRAGMENT_SHADER, opt_errorCallback));
|
|
linkProgram(gl, program, opt_errorCallback);
|
|
return program;
|
|
};
|
|
|
|
/**
|
|
* Loads shaders from source, creates a program, attaches the shaders and
|
|
* links.
|
|
* @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
|
|
* @param {!WebGLShader} vertexShader The vertex shader.
|
|
* @param {!WebGLShader} fragmentShader The fragment shader.
|
|
* @param {function(string): void} opt_errorCallback callback for errors.
|
|
* @return {!WebGLProgram} The created program.
|
|
*/
|
|
var createProgram = function(gl, vertexShader, fragmentShader, opt_errorCallback) {
|
|
var program = gl.createProgram();
|
|
gl.attachShader(program, vertexShader);
|
|
gl.attachShader(program, fragmentShader);
|
|
linkProgram(gl, program, opt_errorCallback);
|
|
return program;
|
|
};
|
|
|
|
/**
|
|
* Loads shaders from source, creates a program, attaches the shaders and
|
|
* links.
|
|
* @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
|
|
* @param {string} vertexShader The vertex shader source.
|
|
* @param {string} fragmentShader The fragment shader source.
|
|
* @param {function(string): void} opt_errorCallback callback for errors.
|
|
* @param {boolean} opt_logShaders Whether to log shader source.
|
|
* @return {!WebGLProgram} The created program.
|
|
*/
|
|
var loadProgram = function(
|
|
gl, vertexShader, fragmentShader, opt_errorCallback, opt_logShaders) {
|
|
var program;
|
|
var vs = loadShader(
|
|
gl, vertexShader, gl.VERTEX_SHADER, opt_errorCallback, opt_logShaders);
|
|
var fs = loadShader(
|
|
gl, fragmentShader, gl.FRAGMENT_SHADER, opt_errorCallback, opt_logShaders);
|
|
if (vs && fs) {
|
|
program = createProgram(gl, vs, fs, opt_errorCallback)
|
|
}
|
|
if (vs) {
|
|
gl.deleteShader(vs);
|
|
}
|
|
if (fs) {
|
|
gl.deleteShader(fs);
|
|
}
|
|
return program;
|
|
};
|
|
|
|
/**
|
|
* Loads shaders from source, creates a program, attaches the shaders and
|
|
* links but expects error.
|
|
*
|
|
* GLSL 1.0.17 10.27 effectively says that compileShader can
|
|
* always succeed as long as linkProgram fails so we can't
|
|
* rely on compileShader failing. This function expects
|
|
* one of the shader to fail OR linking to fail.
|
|
*
|
|
* @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
|
|
* @param {string} vertexShaderScriptId The vertex shader.
|
|
* @param {string} fragmentShaderScriptId The fragment shader.
|
|
* @return {WebGLProgram} The created program.
|
|
*/
|
|
var loadProgramFromScriptExpectError = function(
|
|
gl, vertexShaderScriptId, fragmentShaderScriptId) {
|
|
var vertexShader = loadShaderFromScript(gl, vertexShaderScriptId);
|
|
if (!vertexShader) {
|
|
return null;
|
|
}
|
|
var fragmentShader = loadShaderFromScript(gl, fragmentShaderScriptId);
|
|
if (!fragmentShader) {
|
|
return null;
|
|
}
|
|
var linkSuccess = true;
|
|
var program = gl.createProgram();
|
|
gl.attachShader(program, vertexShader);
|
|
gl.attachShader(program, fragmentShader);
|
|
linkSuccess = true;
|
|
linkProgram(gl, program, function() {
|
|
linkSuccess = false;
|
|
});
|
|
return linkSuccess ? program : null;
|
|
};
|
|
|
|
|
|
var getActiveMap = function(gl, program, typeInfo) {
|
|
var numVariables = gl.getProgramParameter(program, gl[typeInfo.param]);
|
|
var variables = {};
|
|
for (var ii = 0; ii < numVariables; ++ii) {
|
|
var info = gl[typeInfo.activeFn](program, ii);
|
|
variables[info.name] = {
|
|
name: info.name,
|
|
size: info.size,
|
|
type: info.type,
|
|
location: gl[typeInfo.locFn](program, info.name)
|
|
};
|
|
}
|
|
return variables;
|
|
};
|
|
|
|
/**
|
|
* Returns a map of attrib names to info about those
|
|
* attribs.
|
|
*
|
|
* eg:
|
|
* { "attrib1Name":
|
|
* {
|
|
* name: "attrib1Name",
|
|
* size: 1,
|
|
* type: gl.FLOAT_MAT2,
|
|
* location: 0
|
|
* },
|
|
* "attrib2Name[0]":
|
|
* {
|
|
* name: "attrib2Name[0]",
|
|
* size: 4,
|
|
* type: gl.FLOAT,
|
|
* location: 1
|
|
* },
|
|
* }
|
|
*
|
|
* @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
|
|
* @param {WebGLProgram} The program to query for attribs.
|
|
* @return the map.
|
|
*/
|
|
var getAttribMap = function(gl, program) {
|
|
return getActiveMap(gl, program, {
|
|
param: "ACTIVE_ATTRIBUTES",
|
|
activeFn: "getActiveAttrib",
|
|
locFn: "getAttribLocation"
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Returns a map of uniform names to info about those uniforms.
|
|
*
|
|
* eg:
|
|
* { "uniform1Name":
|
|
* {
|
|
* name: "uniform1Name",
|
|
* size: 1,
|
|
* type: gl.FLOAT_MAT2,
|
|
* location: WebGLUniformLocation
|
|
* },
|
|
* "uniform2Name[0]":
|
|
* {
|
|
* name: "uniform2Name[0]",
|
|
* size: 4,
|
|
* type: gl.FLOAT,
|
|
* location: WebGLUniformLocation
|
|
* },
|
|
* }
|
|
*
|
|
* @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
|
|
* @param {WebGLProgram} The program to query for uniforms.
|
|
* @return the map.
|
|
*/
|
|
var getUniformMap = function(gl, program) {
|
|
return getActiveMap(gl, program, {
|
|
param: "ACTIVE_UNIFORMS",
|
|
activeFn: "getActiveUniform",
|
|
locFn: "getUniformLocation"
|
|
});
|
|
};
|
|
|
|
var basePath;
|
|
var getResourcePath = function() {
|
|
if (!basePath) {
|
|
var expectedBase = "js/webgl-test-utils.js";
|
|
var scripts = document.getElementsByTagName('script');
|
|
for (var script, i = 0; script = scripts[i]; i++) {
|
|
var src = script.src;
|
|
var l = src.length;
|
|
if (src.substr(l - expectedBase.length) == expectedBase) {
|
|
basePath = src.substr(0, l - expectedBase.length);
|
|
}
|
|
}
|
|
}
|
|
return basePath + "resources/";
|
|
};
|
|
|
|
var loadStandardVertexShader = function(gl) {
|
|
return loadShaderFromFile(
|
|
gl, getResourcePath() + "vertexShader.vert", gl.VERTEX_SHADER);
|
|
};
|
|
var loadStandardVertexShaderAsync = function(gl, callback) {
|
|
loadShaderFromFileAsync(gl, getResourcePath() + "vertexShader.vert", gl.VERTEX_SHADER, undefined, undefined, undefined, callback);
|
|
};
|
|
|
|
var loadStandardFragmentShader = function(gl) {
|
|
return loadShaderFromFile(
|
|
gl, getResourcePath() + "fragmentShader.frag", gl.FRAGMENT_SHADER);
|
|
};
|
|
var loadStandardFragmentShaderAsync = function(gl, callback) {
|
|
loadShaderFromFileAsync(gl, getResourcePath() + "fragmentShader.frag", gl.FRAGMENT_SHADER, undefined, undefined, undefined, callback);
|
|
};
|
|
|
|
var loadUniformBlockProgram = function(gl) {
|
|
var program = gl.createProgram();
|
|
gl.attachShader(program, loadUniformBlockVertexShader(gl));
|
|
gl.attachShader(program, loadUniformBlockFragmentShader(gl));
|
|
gl.bindAttribLocation(program, 0, "a_vertex");
|
|
gl.bindAttribLocation(program, 1, "a_normal");
|
|
linkProgram(gl, program);
|
|
return program;
|
|
};
|
|
|
|
var loadUniformBlockVertexShader = function(gl) {
|
|
return loadShaderFromFile(
|
|
gl, getResourcePath() + "uniformBlockShader.vert", gl.VERTEX_SHADER);
|
|
};
|
|
|
|
var loadUniformBlockFragmentShader = function(gl) {
|
|
return loadShaderFromFile(
|
|
gl, getResourcePath() + "uniformBlockShader.frag", gl.FRAGMENT_SHADER);
|
|
};
|
|
|
|
/**
|
|
* Loads an image asynchronously.
|
|
* @param {string} url URL of image to load.
|
|
* @param {!function(!Element): void} callback Function to call
|
|
* with loaded image.
|
|
*/
|
|
var loadImageAsync = function(url, callback) {
|
|
var img = document.createElement('img');
|
|
img.onload = function() {
|
|
callback(img);
|
|
};
|
|
img.src = url;
|
|
};
|
|
|
|
/**
|
|
* Loads an array of images.
|
|
* @param {!Array.<string>} urls URLs of images to load.
|
|
* @param {!function(!{string, img}): void} callback Callback
|
|
* that gets passed map of urls to img tags.
|
|
*/
|
|
var loadImagesAsync = function(urls, callback) {
|
|
var count = 1;
|
|
var images = { };
|
|
function countDown() {
|
|
--count;
|
|
if (count == 0) {
|
|
log("loadImagesAsync: all images loaded");
|
|
callback(images);
|
|
}
|
|
}
|
|
function imageLoaded(url) {
|
|
return function(img) {
|
|
images[url] = img;
|
|
log("loadImagesAsync: loaded " + url);
|
|
countDown();
|
|
}
|
|
}
|
|
for (var ii = 0; ii < urls.length; ++ii) {
|
|
++count;
|
|
loadImageAsync(urls[ii], imageLoaded(urls[ii]));
|
|
}
|
|
countDown();
|
|
};
|
|
|
|
/**
|
|
* Returns a map of key=value values from url.
|
|
* @return {!Object.<string, number>} map of keys to values.
|
|
*/
|
|
var getUrlArguments = function() {
|
|
var args = {};
|
|
try {
|
|
var s = window.location.href;
|
|
var q = s.indexOf("?");
|
|
var e = s.indexOf("#");
|
|
if (e < 0) {
|
|
e = s.length;
|
|
}
|
|
var query = s.substring(q + 1, e);
|
|
var pairs = query.split("&");
|
|
for (var ii = 0; ii < pairs.length; ++ii) {
|
|
var keyValue = pairs[ii].split("=");
|
|
var key = keyValue[0];
|
|
var value = decodeURIComponent(keyValue[1]);
|
|
args[key] = value;
|
|
}
|
|
} catch (e) {
|
|
throw "could not parse url";
|
|
}
|
|
return args;
|
|
};
|
|
|
|
/**
|
|
* Makes an image from a src.
|
|
* @param {string} src Image source URL.
|
|
* @param {function()} onload Callback to call when the image has finised loading.
|
|
* @param {function()} onerror Callback to call when an error occurs.
|
|
* @return {!Image} The created image.
|
|
*/
|
|
var makeImage = function(src, onload, onerror) {
|
|
var img = document.createElement('img');
|
|
if (onload) {
|
|
img.onload = onload;
|
|
}
|
|
if (onerror) {
|
|
img.onerror = onerror;
|
|
} else {
|
|
img.onerror = function() {
|
|
log("WARNING: creating image failed; src: " + this.src);
|
|
};
|
|
}
|
|
if (src) {
|
|
img.src = src;
|
|
}
|
|
return img;
|
|
}
|
|
|
|
/**
|
|
* Makes an image element from a canvas.
|
|
* @param {!HTMLCanvas} canvas Canvas to make image from.
|
|
* @param {function()} onload Callback to call when the image has finised loading.
|
|
* @param {string} imageFormat Image format to be passed to toDataUrl().
|
|
* @return {!Image} The created image.
|
|
*/
|
|
var makeImageFromCanvas = function(canvas, onload, imageFormat) {
|
|
return makeImage(canvas.toDataURL(imageFormat), onload);
|
|
};
|
|
|
|
/**
|
|
* Makes a video element from a src.
|
|
* @param {string} src Video source URL.
|
|
* @param {function()} onerror Callback to call when an error occurs.
|
|
* @return {!Video} The created video.
|
|
*/
|
|
var makeVideo = function(src, onerror) {
|
|
var vid = document.createElement('video');
|
|
vid.muted = true;
|
|
if (onerror) {
|
|
vid.onerror = onerror;
|
|
} else {
|
|
vid.onerror = function() {
|
|
log("WARNING: creating video failed; src: " + this.src);
|
|
};
|
|
}
|
|
if (src) {
|
|
vid.src = src;
|
|
}
|
|
return vid;
|
|
}
|
|
|
|
/**
|
|
* Inserts an image with a caption into 'element'.
|
|
* @param {!HTMLElement} element Element to append image to.
|
|
* @param {string} caption caption to associate with image.
|
|
* @param {!Image} img image to insert.
|
|
*/
|
|
var insertImage = function(element, caption, img) {
|
|
var div = document.createElement("div");
|
|
var label = document.createElement("div");
|
|
label.appendChild(document.createTextNode(caption));
|
|
div.appendChild(label);
|
|
div.appendChild(img);
|
|
element.appendChild(div);
|
|
};
|
|
|
|
/**
|
|
* Inserts a 'label' that when clicked expands to the pre formatted text
|
|
* supplied by 'source'.
|
|
* @param {!HTMLElement} element element to append label to.
|
|
* @param {string} label label for anchor.
|
|
* @param {string} source preformatted text to expand to.
|
|
* @param {string} opt_url URL of source. If provided a link to the source file
|
|
* will also be added.
|
|
*/
|
|
var addShaderSource = function(element, label, source, opt_url) {
|
|
var div = document.createElement("div");
|
|
var s = document.createElement("pre");
|
|
s.className = "shader-source";
|
|
s.style.display = "none";
|
|
var ol = document.createElement("ol");
|
|
//s.appendChild(document.createTextNode(source));
|
|
var lines = source.split("\n");
|
|
for (var ii = 0; ii < lines.length; ++ii) {
|
|
var line = lines[ii];
|
|
var li = document.createElement("li");
|
|
li.appendChild(document.createTextNode(line));
|
|
ol.appendChild(li);
|
|
}
|
|
s.appendChild(ol);
|
|
var l = document.createElement("a");
|
|
l.href = "show-shader-source";
|
|
l.appendChild(document.createTextNode(label));
|
|
l.addEventListener('click', function(event) {
|
|
if (event.preventDefault) {
|
|
event.preventDefault();
|
|
}
|
|
s.style.display = (s.style.display == 'none') ? 'block' : 'none';
|
|
return false;
|
|
}, false);
|
|
div.appendChild(l);
|
|
if (opt_url) {
|
|
var u = document.createElement("a");
|
|
u.href = opt_url;
|
|
div.appendChild(document.createTextNode(" "));
|
|
u.appendChild(document.createTextNode("(" + opt_url + ")"));
|
|
div.appendChild(u);
|
|
}
|
|
div.appendChild(s);
|
|
element.appendChild(div);
|
|
};
|
|
|
|
/**
|
|
* Inserts labels that when clicked expand to show the original source of the
|
|
* shader and also translated source of the shader, if that is available.
|
|
* @param {WebGLRenderingContext} gl The WebGLRenderingContext to use.
|
|
* @param {!HTMLElement} element element to append label to.
|
|
* @param {string} label label for anchor.
|
|
* @param {WebGLShader} shader Shader to show the sources for.
|
|
* @param {string} shaderSource Original shader source.
|
|
* @param {string} opt_url URL of source. If provided a link to the source file
|
|
* will also be added.
|
|
*/
|
|
var addShaderSources = function(
|
|
gl, element, label, shader, shaderSource, opt_url) {
|
|
addShaderSource(element, label, shaderSource, opt_url);
|
|
|
|
var debugShaders = gl.getExtension('WEBGL_debug_shaders');
|
|
if (debugShaders && shader) {
|
|
var translatedSource = debugShaders.getTranslatedShaderSource(shader);
|
|
if (translatedSource != '') {
|
|
addShaderSource(element, label + ' translated for driver', translatedSource);
|
|
}
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Sends shader information to the server to be dumped into text files
|
|
* when tests are run from within the test-runner harness.
|
|
* @param {WebGLRenderingContext} gl The WebGLRenderingContext to use.
|
|
* @param {string} url URL of current.
|
|
* @param {string} passMsg Test description.
|
|
* @param {object} vInfo Object containing vertex shader information.
|
|
* @param {object} fInfo Object containing fragment shader information.
|
|
*/
|
|
var dumpShadersInfo = function(gl, url, passMsg, vInfo, fInfo) {
|
|
var shaderInfo = {};
|
|
shaderInfo.url = url;
|
|
shaderInfo.testDescription = passMsg;
|
|
shaderInfo.vLabel = vInfo.label;
|
|
shaderInfo.vShouldCompile = vInfo.shaderSuccess;
|
|
shaderInfo.vSource = vInfo.source;
|
|
shaderInfo.fLabel = fInfo.label;
|
|
shaderInfo.fShouldCompile = fInfo.shaderSuccess;
|
|
shaderInfo.fSource = fInfo.source;
|
|
shaderInfo.vTranslatedSource = null;
|
|
shaderInfo.fTranslatedSource = null;
|
|
var debugShaders = gl.getExtension('WEBGL_debug_shaders');
|
|
if (debugShaders) {
|
|
if (vInfo.shader)
|
|
shaderInfo.vTranslatedSource = debugShaders.getTranslatedShaderSource(vInfo.shader);
|
|
if (fInfo.shader)
|
|
shaderInfo.fTranslatedSource = debugShaders.getTranslatedShaderSource(fInfo.shader);
|
|
}
|
|
|
|
var dumpShaderInfoRequest = new XMLHttpRequest();
|
|
dumpShaderInfoRequest.open('POST', "/dumpShaderInfo", true);
|
|
dumpShaderInfoRequest.setRequestHeader("Content-Type", "text/plain");
|
|
dumpShaderInfoRequest.send(JSON.stringify(shaderInfo));
|
|
};
|
|
|
|
// Add your prefix here.
|
|
var browserPrefixes = [
|
|
"",
|
|
"MOZ_",
|
|
"OP_",
|
|
"WEBKIT_"
|
|
];
|
|
|
|
/**
|
|
* Given an extension name like WEBGL_compressed_texture_s3tc
|
|
* returns the name of the supported version extension, like
|
|
* WEBKIT_WEBGL_compressed_teture_s3tc
|
|
* @param {string} name Name of extension to look for.
|
|
* @return {string} name of extension found or undefined if not
|
|
* found.
|
|
*/
|
|
var getSupportedExtensionWithKnownPrefixes = function(gl, name) {
|
|
var supported = gl.getSupportedExtensions();
|
|
for (var ii = 0; ii < browserPrefixes.length; ++ii) {
|
|
var prefixedName = browserPrefixes[ii] + name;
|
|
if (supported.indexOf(prefixedName) >= 0) {
|
|
return prefixedName;
|
|
}
|
|
}
|
|
};
|
|
|
|
/**
|
|
* @param {WebGLRenderingContext} gl The WebGLRenderingContext to use.
|
|
* @param {string} name Name of extension to look for.
|
|
* @param {boolean} extensionEnabled True if the extension was enabled successfully via gl.getExtension().
|
|
*/
|
|
var runExtensionSupportedTest = function(gl, name, extensionEnabled) {
|
|
var prefixedName = getSupportedExtensionWithKnownPrefixes(gl, name);
|
|
if (prefixedName !== undefined) {
|
|
if (extensionEnabled) {
|
|
testPassed(name + " listed as supported and getExtension succeeded");
|
|
} else {
|
|
testFailed(name + " listed as supported but getExtension failed");
|
|
}
|
|
} else {
|
|
if (extensionEnabled) {
|
|
testFailed(name + " not listed as supported but getExtension succeeded");
|
|
} else {
|
|
testPassed(name + " not listed as supported and getExtension failed -- this is legal");
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Given an extension name like WEBGL_compressed_texture_s3tc
|
|
* returns the supported version extension, like
|
|
* WEBKIT_WEBGL_compressed_teture_s3tc
|
|
* @param {string} name Name of extension to look for.
|
|
* @return {WebGLExtension} The extension or undefined if not
|
|
* found.
|
|
*/
|
|
var getExtensionWithKnownPrefixes = function(gl, name) {
|
|
for (var ii = 0; ii < browserPrefixes.length; ++ii) {
|
|
var prefixedName = browserPrefixes[ii] + name;
|
|
var ext = gl.getExtension(prefixedName);
|
|
if (ext) {
|
|
return ext;
|
|
}
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Returns possible prefixed versions of an extension's name.
|
|
* @param {string} name Name of extension. May already include a prefix.
|
|
* @return {Array.<string>} Variations of the extension name with known
|
|
* browser prefixes.
|
|
*/
|
|
var getExtensionPrefixedNames = function(name) {
|
|
var unprefix = function(name) {
|
|
for (var ii = 0; ii < browserPrefixes.length; ++ii) {
|
|
if (browserPrefixes[ii].length > 0 &&
|
|
name.substring(0, browserPrefixes[ii].length).toLowerCase() ===
|
|
browserPrefixes[ii].toLowerCase()) {
|
|
return name.substring(browserPrefixes[ii].length);
|
|
}
|
|
}
|
|
return name;
|
|
}
|
|
|
|
var unprefixed = unprefix(name);
|
|
|
|
var variations = [];
|
|
for (var ii = 0; ii < browserPrefixes.length; ++ii) {
|
|
variations.push(browserPrefixes[ii] + unprefixed);
|
|
}
|
|
|
|
return variations;
|
|
};
|
|
|
|
var replaceRE = /\$\((\w+)\)/g;
|
|
|
|
/**
|
|
* Replaces strings with property values.
|
|
* Given a string like "hello $(first) $(last)" and an object
|
|
* like {first:"John", last:"Smith"} will return
|
|
* "hello John Smith".
|
|
* @param {string} str String to do replacements in.
|
|
* @param {...} 1 or more objects containing properties.
|
|
*/
|
|
var replaceParams = function(str) {
|
|
var args = arguments;
|
|
return str.replace(replaceRE, function(str, p1, offset, s) {
|
|
for (var ii = 1; ii < args.length; ++ii) {
|
|
if (args[ii][p1] !== undefined) {
|
|
return args[ii][p1];
|
|
}
|
|
}
|
|
throw "unknown string param '" + p1 + "'";
|
|
});
|
|
};
|
|
|
|
var upperCaseFirstLetter = function(str) {
|
|
return str.substring(0, 1).toUpperCase() + str.substring(1);
|
|
};
|
|
|
|
/**
|
|
* Gets a prefixed property. For example,
|
|
*
|
|
* var fn = getPrefixedProperty(
|
|
* window,
|
|
* "requestAnimationFrame");
|
|
*
|
|
* Will return either:
|
|
* "window.requestAnimationFrame",
|
|
* "window.oRequestAnimationFrame",
|
|
* "window.msRequestAnimationFrame",
|
|
* "window.mozRequestAnimationFrame",
|
|
* "window.webKitRequestAnimationFrame",
|
|
* undefined
|
|
*
|
|
* the non-prefixed function is tried first.
|
|
*/
|
|
var propertyPrefixes = ["", "moz", "ms", "o", "webkit"];
|
|
var getPrefixedProperty = function(obj, propertyName) {
|
|
for (var ii = 0; ii < propertyPrefixes.length; ++ii) {
|
|
var prefix = propertyPrefixes[ii];
|
|
var name = prefix + propertyName;
|
|
log(name);
|
|
var property = obj[name];
|
|
if (property) {
|
|
return property;
|
|
}
|
|
if (ii == 0) {
|
|
propertyName = upperCaseFirstLetter(propertyName);
|
|
}
|
|
}
|
|
return undefined;
|
|
};
|
|
|
|
var _requestAnimFrame;
|
|
|
|
/**
|
|
* Provides requestAnimationFrame in a cross browser way.
|
|
*/
|
|
var requestAnimFrame = function(callback) {
|
|
if (!_requestAnimFrame) {
|
|
_requestAnimFrame = getPrefixedProperty(window, "requestAnimationFrame") ||
|
|
function(callback, element) {
|
|
return window.setTimeout(callback, 1000 / 70);
|
|
};
|
|
}
|
|
_requestAnimFrame.call(window, callback);
|
|
};
|
|
|
|
var _cancelAnimFrame;
|
|
|
|
/**
|
|
* Provides cancelAnimationFrame in a cross browser way.
|
|
*/
|
|
var cancelAnimFrame = function(request) {
|
|
if (!_cancelAnimFrame) {
|
|
_cancelAnimFrame = getPrefixedProperty(window, "cancelAnimationFrame") ||
|
|
window.clearTimeout;
|
|
}
|
|
_cancelAnimFrame.call(window, request);
|
|
};
|
|
|
|
/**
|
|
* Provides requestFullScreen in a cross browser way.
|
|
*/
|
|
var requestFullScreen = function(element) {
|
|
var fn = getPrefixedProperty(element, "requestFullScreen");
|
|
if (fn) {
|
|
fn.call(element);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Provides cancelFullScreen in a cross browser way.
|
|
*/
|
|
var cancelFullScreen = function() {
|
|
var fn = getPrefixedProperty(document, "cancelFullScreen");
|
|
if (fn) {
|
|
fn.call(document);
|
|
}
|
|
};
|
|
|
|
var fullScreenStateName;
|
|
(function() {
|
|
var fullScreenStateNames = [
|
|
"isFullScreen",
|
|
"fullScreen"
|
|
];
|
|
for (var ii = 0; ii < fullScreenStateNames.length; ++ii) {
|
|
var propertyName = fullScreenStateNames[ii];
|
|
for (var jj = 0; jj < propertyPrefixes.length; ++jj) {
|
|
var prefix = propertyPrefixes[jj];
|
|
if (prefix.length) {
|
|
propertyName = upperCaseFirstLetter(propertyName);
|
|
fullScreenStateName = prefix + propertyName;
|
|
if (document[fullScreenStateName] !== undefined) {
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
fullScreenStateName = undefined;
|
|
}
|
|
}());
|
|
|
|
/**
|
|
* @return {boolean} True if fullscreen mode is active.
|
|
*/
|
|
var getFullScreenState = function() {
|
|
log("fullscreenstatename:" + fullScreenStateName);
|
|
log(document[fullScreenStateName]);
|
|
return document[fullScreenStateName];
|
|
};
|
|
|
|
/**
|
|
* @param {!HTMLElement} element The element to go fullscreen.
|
|
* @param {!function(boolean)} callback A function that will be called
|
|
* when entering/exiting fullscreen. It is passed true if
|
|
* entering fullscreen, false if exiting.
|
|
*/
|
|
var onFullScreenChange = function(element, callback) {
|
|
propertyPrefixes.forEach(function(prefix) {
|
|
var eventName = prefix + "fullscreenchange";
|
|
log("addevent: " + eventName);
|
|
document.addEventListener(eventName, function(event) {
|
|
log("event: " + eventName);
|
|
callback(getFullScreenState());
|
|
});
|
|
});
|
|
};
|
|
|
|
/**
|
|
* @param {!string} buttonId The id of the button that will toggle fullscreen
|
|
* mode.
|
|
* @param {!string} fullscreenId The id of the element to go fullscreen.
|
|
* @param {!function(boolean)} callback A function that will be called
|
|
* when entering/exiting fullscreen. It is passed true if
|
|
* entering fullscreen, false if exiting.
|
|
* @return {boolean} True if fullscreen mode is supported.
|
|
*/
|
|
var setupFullscreen = function(buttonId, fullscreenId, callback) {
|
|
if (!fullScreenStateName) {
|
|
return false;
|
|
}
|
|
|
|
var fullscreenElement = document.getElementById(fullscreenId);
|
|
onFullScreenChange(fullscreenElement, callback);
|
|
|
|
var toggleFullScreen = function(event) {
|
|
if (getFullScreenState()) {
|
|
cancelFullScreen(fullscreenElement);
|
|
} else {
|
|
requestFullScreen(fullscreenElement);
|
|
}
|
|
event.preventDefault();
|
|
return false;
|
|
};
|
|
|
|
var buttonElement = document.getElementById(buttonId);
|
|
buttonElement.addEventListener('click', toggleFullScreen);
|
|
|
|
return true;
|
|
};
|
|
|
|
/**
|
|
* Waits for the browser to composite the web page.
|
|
* @param {function()} callback A function to call after compositing has taken
|
|
* place.
|
|
*/
|
|
var waitForComposite = function(callback) {
|
|
var frames = 5;
|
|
var countDown = function() {
|
|
if (frames == 0) {
|
|
// TODO(kbr): unify with js-test-pre.js and enable these with
|
|
// verbose logging.
|
|
// log("waitForComposite: callback");
|
|
callback();
|
|
} else {
|
|
// log("waitForComposite: countdown(" + frames + ")");
|
|
--frames;
|
|
requestAnimFrame.call(window, countDown);
|
|
}
|
|
};
|
|
countDown();
|
|
};
|
|
|
|
var setZeroTimeout = (function() {
|
|
// See https://dbaron.org/log/20100309-faster-timeouts
|
|
|
|
var timeouts = [];
|
|
var messageName = "zero-timeout-message";
|
|
|
|
// Like setTimeout, but only takes a function argument. There's
|
|
// no time argument (always zero) and no arguments (you have to
|
|
// use a closure).
|
|
function setZeroTimeout(fn) {
|
|
timeouts.push(fn);
|
|
window.postMessage(messageName, "*");
|
|
}
|
|
|
|
function handleMessage(event) {
|
|
if (event.source == window && event.data == messageName) {
|
|
event.stopPropagation();
|
|
if (timeouts.length > 0) {
|
|
var fn = timeouts.shift();
|
|
fn();
|
|
}
|
|
}
|
|
}
|
|
|
|
window.addEventListener("message", handleMessage, true);
|
|
|
|
return setZeroTimeout;
|
|
})();
|
|
|
|
function dispatchPromise(fn) {
|
|
return new Promise((fn_resolve, fn_reject) => {
|
|
setZeroTimeout(() => {
|
|
let val;
|
|
if (fn) {
|
|
val = fn();
|
|
}
|
|
fn_resolve(val);
|
|
});
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Runs an array of functions, yielding to the browser between each step.
|
|
* If you want to know when all the steps are finished add a last step.
|
|
* @param {!Array.<function(): void>} steps Array of functions.
|
|
*/
|
|
var runSteps = function(steps) {
|
|
if (!steps.length) {
|
|
return;
|
|
}
|
|
|
|
// copy steps so they can't be modifed.
|
|
var stepsToRun = steps.slice();
|
|
var currentStep = 0;
|
|
var runNextStep = function() {
|
|
stepsToRun[currentStep++]();
|
|
if (currentStep < stepsToRun.length) {
|
|
setTimeout(runNextStep, 1);
|
|
}
|
|
};
|
|
runNextStep();
|
|
};
|
|
|
|
/**
|
|
* Starts playing a video and waits for it to be consumable.
|
|
* @param {!HTMLVideoElement} video An HTML5 Video element.
|
|
* @param {!function(!HTMLVideoElement): void} callback Function to call when
|
|
* video is ready.
|
|
*/
|
|
async function startPlayingAndWaitForVideo(video, callback) {
|
|
if (video.error) {
|
|
testFailed('Video failed to load: ' + video.error);
|
|
return;
|
|
}
|
|
|
|
video.loop = true;
|
|
video.muted = true;
|
|
// See whether setting the preload flag de-flakes video-related tests.
|
|
video.preload = 'auto';
|
|
|
|
try {
|
|
await video.play();
|
|
} catch (e) {
|
|
testFailed('video.play failed: ' + e);
|
|
return;
|
|
}
|
|
|
|
if (video.requestVideoFrameCallback) {
|
|
await new Promise(go => video.requestVideoFrameCallback(go));
|
|
}
|
|
|
|
callback(video);
|
|
}
|
|
|
|
var getHost = function(url) {
|
|
url = url.replace("\\", "/");
|
|
var pos = url.indexOf("://");
|
|
if (pos >= 0) {
|
|
url = url.substr(pos + 3);
|
|
}
|
|
var parts = url.split('/');
|
|
return parts[0];
|
|
}
|
|
|
|
// This function returns the last 2 words of the domain of a URL
|
|
// This is probably not the correct check but it will do for now.
|
|
var getBaseDomain = function(host) {
|
|
var parts = host.split(":");
|
|
var hostname = parts[0];
|
|
var port = parts[1] || "80";
|
|
parts = hostname.split(".");
|
|
if(parts.length < 2)
|
|
return hostname + ":" + port;
|
|
var tld = parts[parts.length-1];
|
|
var domain = parts[parts.length-2];
|
|
return domain + "." + tld + ":" + port;
|
|
}
|
|
|
|
var runningOnLocalhost = function() {
|
|
let hostname = window.location.hostname;
|
|
return hostname == "localhost" ||
|
|
hostname == "127.0.0.1" ||
|
|
hostname == "::1";
|
|
}
|
|
|
|
var getLocalCrossOrigin = function() {
|
|
var domain;
|
|
if (window.location.host.indexOf("localhost") != -1) {
|
|
// TODO(kbr): figure out whether to use an IPv6 loopback address.
|
|
domain = "127.0.0.1";
|
|
} else {
|
|
domain = "localhost";
|
|
}
|
|
|
|
var port = window.location.port || "80";
|
|
return window.location.protocol + "//" + domain + ":" + port
|
|
}
|
|
|
|
var getRelativePath = function(path) {
|
|
var relparts = window.location.pathname.split("/");
|
|
relparts.pop(); // Pop off filename
|
|
var pathparts = path.split("/");
|
|
|
|
var i;
|
|
for (i = 0; i < pathparts.length; ++i) {
|
|
switch (pathparts[i]) {
|
|
case "": break;
|
|
case ".": break;
|
|
case "..":
|
|
relparts.pop();
|
|
break;
|
|
default:
|
|
relparts.push(pathparts[i]);
|
|
break;
|
|
}
|
|
}
|
|
|
|
return relparts.join("/");
|
|
}
|
|
|
|
async function loadCrossOriginImage(img, webUrl, localUrl) {
|
|
if (runningOnLocalhost()) {
|
|
img.src = getLocalCrossOrigin() + getRelativePath(localUrl);
|
|
console.log('[loadCrossOriginImage]', ' trying', img.src);
|
|
await img.decode();
|
|
return;
|
|
}
|
|
|
|
try {
|
|
img.src = getUrlOptions().imgUrl || webUrl;
|
|
console.log('[loadCrossOriginImage]', 'trying', img.src);
|
|
await img.decode();
|
|
return;
|
|
} catch {}
|
|
|
|
throw 'createCrossOriginImage failed';
|
|
}
|
|
|
|
/**
|
|
* Convert sRGB color to linear color.
|
|
* @param {!Array.<number>} color The color to be converted.
|
|
* The array has 4 elements, for example [R, G, B, A].
|
|
* where each element is in the range 0 to 255.
|
|
* @return {!Array.<number>} color The color to be converted.
|
|
* The array has 4 elements, for example [R, G, B, A].
|
|
* where each element is in the range 0 to 255.
|
|
*/
|
|
var sRGBToLinear = function(color) {
|
|
return [sRGBChannelToLinear(color[0]),
|
|
sRGBChannelToLinear(color[1]),
|
|
sRGBChannelToLinear(color[2]),
|
|
color[3]]
|
|
}
|
|
|
|
/**
|
|
* Convert linear color to sRGB color.
|
|
* @param {!Array.<number>} color The color to be converted.
|
|
* The array has 4 elements, for example [R, G, B, A].
|
|
* where each element is in the range 0 to 255.
|
|
* @return {!Array.<number>} color The color to be converted.
|
|
* The array has 4 elements, for example [R, G, B, A].
|
|
* where each element is in the range 0 to 255.
|
|
*/
|
|
var linearToSRGB = function(color) {
|
|
return [linearChannelToSRGB(color[0]),
|
|
linearChannelToSRGB(color[1]),
|
|
linearChannelToSRGB(color[2]),
|
|
color[3]]
|
|
}
|
|
|
|
function sRGBChannelToLinear(value) {
|
|
value = value / 255;
|
|
if (value <= 0.04045)
|
|
value = value / 12.92;
|
|
else
|
|
value = Math.pow((value + 0.055) / 1.055, 2.4);
|
|
return Math.trunc(value * 255 + 0.5);
|
|
}
|
|
|
|
function linearChannelToSRGB(value) {
|
|
value = value / 255;
|
|
if (value <= 0.0) {
|
|
value = 0.0;
|
|
} else if (value < 0.0031308) {
|
|
value = value * 12.92;
|
|
} else if (value < 1) {
|
|
value = Math.pow(value, 0.41666) * 1.055 - 0.055;
|
|
} else {
|
|
value = 1.0;
|
|
}
|
|
return Math.trunc(value * 255 + 0.5);
|
|
}
|
|
|
|
/**
|
|
* Return the named color in the specified color space.
|
|
* @param {string} colorName The name of the color to convert.
|
|
* Supported color names are:
|
|
* 'Red', which is the CSS color color('srgb' 1 0 0 1)
|
|
* 'Green', which is the CSS color color('srgb' 0 1 0 1)
|
|
* @param {string} colorSpace The color space to convert to. Supported
|
|
color spaces are:
|
|
* null, which is treated as sRGB
|
|
* 'srgb'
|
|
* 'display-p3'.
|
|
* Documentation on the formulas for color conversion between
|
|
* spaces can be found at
|
|
https://www.w3.org/TR/css-color-4/#predefined-to-predefined
|
|
* @return {!Array.<number>} color The color in the specified color
|
|
* space as an 8-bit RGBA array with unpremultiplied alpha.
|
|
*/
|
|
var namedColorInColorSpace = function(colorName, colorSpace) {
|
|
var result;
|
|
switch (colorSpace) {
|
|
case undefined:
|
|
case 'srgb':
|
|
switch(colorName) {
|
|
case 'Red':
|
|
return [255, 0, 0, 255];
|
|
case 'Green':
|
|
return [0, 255, 0, 255];
|
|
break;
|
|
default:
|
|
throw 'unexpected color name: ' + colorName;
|
|
};
|
|
break;
|
|
case 'display-p3':
|
|
switch(colorName) {
|
|
case 'Red':
|
|
return [234, 51, 35, 255];
|
|
break;
|
|
case 'Green':
|
|
return [117, 251, 76, 255];
|
|
break;
|
|
default:
|
|
throw 'unexpected color name: ' + colorName;
|
|
}
|
|
break;
|
|
default:
|
|
throw 'unexpected color space: ' + colorSpace;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Return the named color as it would be sampled with the specified
|
|
* internal format
|
|
* @param {!Array.<number>} color The color as an 8-bit RGBA array.
|
|
* @param {string} internalformat The internal format.
|
|
* @return {!Array.<number>} color The color, as it would be sampled by
|
|
* the specified internal format, as an 8-bit RGBA array.
|
|
*/
|
|
var colorAsSampledWithInternalFormat = function(color, internalFormat) {
|
|
switch (internalFormat) {
|
|
case 'ALPHA':
|
|
return [0, 0, 0, color[3]];
|
|
case 'LUMINANCE':
|
|
return [color[0], color[0], color[0], 255];
|
|
case 'LUMINANCE_ALPHA':
|
|
return [color[0], color[0], color[0], color[3]];
|
|
case 'SRGB8':
|
|
case 'SRGB8_ALPHA8':
|
|
return [sRGBChannelToLinear(color[0]),
|
|
sRGBChannelToLinear(color[1]),
|
|
sRGBChannelToLinear(color[2]),
|
|
color[3]];
|
|
case 'R16F':
|
|
case 'R32F':
|
|
case 'R8':
|
|
case 'R8UI':
|
|
case 'RED':
|
|
case 'RED_INTEGER':
|
|
return [color[0], 0, 0, 0];
|
|
case 'RG':
|
|
case 'RG16F':
|
|
case 'RG32F':
|
|
case 'RG8':
|
|
case 'RG8UI':
|
|
case 'RG_INTEGER':
|
|
return [color[0], color[1], 0, 0];
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
return color;
|
|
}
|
|
|
|
function comparePixels(cmp, ref, tolerance, diff) {
|
|
if (cmp.length != ref.length) {
|
|
testFailed("invalid pixel size.");
|
|
}
|
|
|
|
var count = 0;
|
|
for (var i = 0; i < cmp.length; i++) {
|
|
if (diff) {
|
|
diff[i * 4] = 0;
|
|
diff[i * 4 + 1] = 255;
|
|
diff[i * 4 + 2] = 0;
|
|
diff[i * 4 + 3] = 255;
|
|
}
|
|
if (Math.abs(cmp[i * 4] - ref[i * 4]) > tolerance ||
|
|
Math.abs(cmp[i * 4 + 1] - ref[i * 4 + 1]) > tolerance ||
|
|
Math.abs(cmp[i * 4 + 2] - ref[i * 4 + 2]) > tolerance ||
|
|
Math.abs(cmp[i * 4 + 3] - ref[i * 4 + 3]) > tolerance) {
|
|
if (count < 10) {
|
|
testFailed("Pixel " + i + ": expected (" +
|
|
[ref[i * 4], ref[i * 4 + 1], ref[i * 4 + 2], ref[i * 4 + 3]] + "), got (" +
|
|
[cmp[i * 4], cmp[i * 4 + 1], cmp[i * 4 + 2], cmp[i * 4 + 3]] + ")");
|
|
}
|
|
count++;
|
|
if (diff) {
|
|
diff[i * 4] = 255;
|
|
diff[i * 4 + 1] = 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
return count;
|
|
}
|
|
|
|
function destroyContext(gl) {
|
|
const ext = gl.getExtension('WEBGL_lose_context');
|
|
if (ext) {
|
|
ext.loseContext();
|
|
}
|
|
gl.canvas.width = 1;
|
|
gl.canvas.height = 1;
|
|
}
|
|
|
|
function destroyAllContexts() {
|
|
if (!window._wtu_contexts)
|
|
return;
|
|
for (const x of window._wtu_contexts) {
|
|
destroyContext(x);
|
|
}
|
|
window._wtu_contexts = [];
|
|
}
|
|
|
|
function displayImageDiff(cmp, ref, diff, width, height) {
|
|
var div = document.createElement("div");
|
|
|
|
var cmpImg = createImageFromPixel(cmp, width, height);
|
|
var refImg = createImageFromPixel(ref, width, height);
|
|
var diffImg = createImageFromPixel(diff, width, height);
|
|
wtu.insertImage(div, "Reference", refImg);
|
|
wtu.insertImage(div, "Result", cmpImg);
|
|
wtu.insertImage(div, "Difference", diffImg);
|
|
|
|
var console = document.getElementById("console");
|
|
console.appendChild(div);
|
|
}
|
|
|
|
function createImageFromPixel(buf, width, height) {
|
|
var canvas = document.createElement("canvas");
|
|
canvas.width = width;
|
|
canvas.height = height;
|
|
var ctx = canvas.getContext("2d");
|
|
var imgData = ctx.getImageData(0, 0, width, height);
|
|
|
|
for (var i = 0; i < buf.length; i++)
|
|
imgData.data[i] = buf[i];
|
|
ctx.putImageData(imgData, 0, 0);
|
|
var img = wtu.makeImageFromCanvas(canvas);
|
|
return img;
|
|
}
|
|
|
|
async function awaitTimeout(ms) {
|
|
await new Promise(res => {
|
|
setTimeout(() => {
|
|
res();
|
|
}, ms);
|
|
});
|
|
}
|
|
|
|
async function awaitOrTimeout(promise, opt_timeout_ms) {
|
|
async function throwOnTimeout(ms) {
|
|
await awaitTimeout(ms);
|
|
throw 'timeout';
|
|
}
|
|
|
|
let timeout_ms = opt_timeout_ms;
|
|
if (timeout_ms === undefined)
|
|
timeout_ms = 5000;
|
|
|
|
await Promise.race([promise, throwOnTimeout(timeout_ms)]);
|
|
}
|
|
|
|
var API = {
|
|
addShaderSource: addShaderSource,
|
|
addShaderSources: addShaderSources,
|
|
cancelAnimFrame: cancelAnimFrame,
|
|
create3DContext: create3DContext,
|
|
GLErrorException: GLErrorException,
|
|
create3DContextWithWrapperThatThrowsOnGLError: create3DContextWithWrapperThatThrowsOnGLError,
|
|
checkAreaInAndOut: checkAreaInAndOut,
|
|
checkCanvas: checkCanvas,
|
|
checkCanvasRect: checkCanvasRect,
|
|
checkCanvasRectColor: checkCanvasRectColor,
|
|
checkCanvasRects: checkCanvasRects,
|
|
checkFloatBuffer: checkFloatBuffer,
|
|
checkTextureSize: checkTextureSize,
|
|
clipToRange: clipToRange,
|
|
createColoredTexture: createColoredTexture,
|
|
createProgram: createProgram,
|
|
clearAndDrawUnitQuad: clearAndDrawUnitQuad,
|
|
clearAndDrawIndexedQuad: clearAndDrawIndexedQuad,
|
|
comparePixels: comparePixels,
|
|
destroyAllContexts: destroyAllContexts,
|
|
destroyContext: destroyContext,
|
|
dispatchPromise: dispatchPromise,
|
|
displayImageDiff: displayImageDiff,
|
|
drawUnitQuad: drawUnitQuad,
|
|
drawIndexedQuad: drawIndexedQuad,
|
|
drawUByteColorQuad: drawUByteColorQuad,
|
|
drawFloatColorQuad: drawFloatColorQuad,
|
|
dummySetProgramAndDrawNothing: dummySetProgramAndDrawNothing,
|
|
dumpShadersInfo: dumpShadersInfo,
|
|
endsWith: endsWith,
|
|
failIfGLError: failIfGLError,
|
|
fillTexture: fillTexture,
|
|
framebufferStatusShouldBe: framebufferStatusShouldBe,
|
|
getBytesPerComponent: getBytesPerComponent,
|
|
getDefault3DContextVersion: getDefault3DContextVersion,
|
|
getExtensionPrefixedNames: getExtensionPrefixedNames,
|
|
getExtensionWithKnownPrefixes: getExtensionWithKnownPrefixes,
|
|
getFileListAsync: getFileListAsync,
|
|
getLastError: getLastError,
|
|
getPrefixedProperty: getPrefixedProperty,
|
|
getScript: getScript,
|
|
getSupportedExtensionWithKnownPrefixes: getSupportedExtensionWithKnownPrefixes,
|
|
getTypedArrayElementsPerPixel: getTypedArrayElementsPerPixel,
|
|
getUrlArguments: getUrlArguments,
|
|
getUrlOptions: getUrlOptions,
|
|
getAttribMap: getAttribMap,
|
|
getUniformMap: getUniformMap,
|
|
glEnumToString: glEnumToString,
|
|
glErrorAssert: glErrorAssert,
|
|
glErrorShouldBe: glErrorShouldBe,
|
|
glTypeToTypedArrayType: glTypeToTypedArrayType,
|
|
hasAttributeCaseInsensitive: hasAttributeCaseInsensitive,
|
|
insertImage: insertImage,
|
|
isWebGL2: isWebGL2,
|
|
linkProgram: linkProgram,
|
|
loadCrossOriginImage: loadCrossOriginImage,
|
|
loadImageAsync: loadImageAsync,
|
|
loadImagesAsync: loadImagesAsync,
|
|
loadProgram: loadProgram,
|
|
loadProgramFromFile: loadProgramFromFile,
|
|
loadProgramFromScript: loadProgramFromScript,
|
|
loadProgramFromScriptExpectError: loadProgramFromScriptExpectError,
|
|
loadShader: loadShader,
|
|
loadShaderFromFile: loadShaderFromFile,
|
|
loadShaderFromScript: loadShaderFromScript,
|
|
loadStandardProgram: loadStandardProgram,
|
|
loadStandardProgramAsync: loadStandardProgramAsync,
|
|
loadStandardVertexShader: loadStandardVertexShader,
|
|
loadStandardVertexShaderAsync: loadStandardVertexShaderAsync,
|
|
loadStandardFragmentShader: loadStandardFragmentShader,
|
|
loadStandardFragmentShaderAsync: loadStandardFragmentShaderAsync,
|
|
loadUniformBlockProgram: loadUniformBlockProgram,
|
|
loadUniformBlockVertexShader: loadUniformBlockVertexShader,
|
|
loadUniformBlockFragmentShader: loadUniformBlockFragmentShader,
|
|
loadTextFileAsync: loadTextFileAsync,
|
|
loadTexture: loadTexture,
|
|
log: log,
|
|
loggingOff: loggingOff,
|
|
makeCheckRect: makeCheckRect,
|
|
makeImage: makeImage,
|
|
makeImageFromCanvas: makeImageFromCanvas,
|
|
makeVideo: makeVideo,
|
|
error: error,
|
|
runExtensionSupportedTest: runExtensionSupportedTest,
|
|
shallowCopyObject: shallowCopyObject,
|
|
setDefault3DContextVersion: setDefault3DContextVersion,
|
|
setupColorQuad: setupColorQuad,
|
|
setupProgram: setupProgram,
|
|
setupTransformFeedbackProgram: setupTransformFeedbackProgram,
|
|
setupQuad: setupQuad,
|
|
setupQuadWithTexCoords: setupQuadWithTexCoords,
|
|
setupIndexedQuad: setupIndexedQuad,
|
|
setupIndexedQuadWithOptions: setupIndexedQuadWithOptions,
|
|
setupSimpleColorProgram: setupSimpleColorProgram,
|
|
setupSimpleTextureProgram: setupSimpleTextureProgram,
|
|
setupSimpleTextureProgramESSL300: setupSimpleTextureProgramESSL300,
|
|
setupSimpleCubeMapTextureProgram: setupSimpleCubeMapTextureProgram,
|
|
setupSimpleVertexColorProgram: setupSimpleVertexColorProgram,
|
|
setupNoTexCoordTextureProgram: setupNoTexCoordTextureProgram,
|
|
setupTexturedQuad: setupTexturedQuad,
|
|
setupTexturedQuadWithTexCoords: setupTexturedQuadWithTexCoords,
|
|
setupTexturedQuadWithCubeMap: setupTexturedQuadWithCubeMap,
|
|
setupUnitQuad: setupUnitQuad,
|
|
setFloatDrawColor: setFloatDrawColor,
|
|
setUByteDrawColor: setUByteDrawColor,
|
|
startPlayingAndWaitForVideo: startPlayingAndWaitForVideo,
|
|
startsWith: startsWith,
|
|
shouldGenerateGLError: shouldGenerateGLError,
|
|
shouldThrow: shouldThrow,
|
|
readFile: readFile,
|
|
readFileList: readFileList,
|
|
replaceParams: replaceParams,
|
|
requestAnimFrame: requestAnimFrame,
|
|
runSteps: runSteps,
|
|
waitForComposite: waitForComposite,
|
|
|
|
// fullscreen api
|
|
setupFullscreen: setupFullscreen,
|
|
|
|
// color converter API
|
|
namedColorInColorSpace: namedColorInColorSpace,
|
|
colorAsSampledWithInternalFormat: colorAsSampledWithInternalFormat,
|
|
|
|
// sRGB converter api
|
|
sRGBToLinear: sRGBToLinear,
|
|
linearToSRGB: linearToSRGB,
|
|
|
|
getHost: getHost,
|
|
getBaseDomain: getBaseDomain,
|
|
runningOnLocalhost: runningOnLocalhost,
|
|
getLocalCrossOrigin: getLocalCrossOrigin,
|
|
getRelativePath: getRelativePath,
|
|
awaitOrTimeout: awaitOrTimeout,
|
|
awaitTimeout: awaitTimeout,
|
|
|
|
none: false
|
|
};
|
|
|
|
Object.defineProperties(API, {
|
|
noTexCoordTextureVertexShader: { value: noTexCoordTextureVertexShader, writable: false },
|
|
simpleTextureVertexShader: { value: simpleTextureVertexShader, writable: false },
|
|
simpleTextureVertexShaderESSL300: { value: simpleTextureVertexShaderESSL300, writable: false },
|
|
simpleColorFragmentShader: { value: simpleColorFragmentShader, writable: false },
|
|
simpleColorFragmentShaderESSL300: { value: simpleColorFragmentShaderESSL300, writable: false },
|
|
simpleVertexShader: { value: simpleVertexShader, writable: false },
|
|
simpleVertexShaderESSL300: { value: simpleVertexShaderESSL300, writable: false },
|
|
simpleTextureFragmentShader: { value: simpleTextureFragmentShader, writable: false },
|
|
simpleTextureFragmentShaderESSL300: { value: simpleTextureFragmentShaderESSL300, writable: false },
|
|
simpleHighPrecisionTextureFragmentShader: { value: simpleHighPrecisionTextureFragmentShader, writable: false },
|
|
simpleCubeMapTextureFragmentShader: { value: simpleCubeMapTextureFragmentShader, writable: false },
|
|
simpleVertexColorFragmentShader: { value: simpleVertexColorFragmentShader, writable: false },
|
|
simpleVertexColorVertexShader: { value: simpleVertexColorVertexShader, writable: false }
|
|
});
|
|
|
|
return API;
|
|
|
|
}());
|