2 ** Copyright (c) 2012 The Khronos Group Inc.
4 ** Permission is hereby granted, free of charge, to any person obtaining a
5 ** copy of this software and/or associated documentation files (the
6 ** "Materials"), to deal in the Materials without restriction, including
7 ** without limitation the rights to use, copy, modify, merge, publish,
8 ** distribute, sublicense, and/or sell copies of the Materials, and to
9 ** permit persons to whom the Materials are furnished to do so, subject to
10 ** the following conditions:
12 ** The above copyright notice and this permission notice shall be included
13 ** in all copies or substantial portions of the Materials.
15 ** THE MATERIALS ARE PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
16 ** EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
17 ** MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
18 ** IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
19 ** CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
20 ** TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
21 ** MATERIALS OR THE USE OR OTHER DEALINGS IN THE MATERIALS.
23 var WebGLTestUtils = (function() {
27 * Wrapped logging function.
28 * @param {string} msg The message to log.
30 var log = function(msg) {
31 if (window.console && window.console.log) {
32 window.console.log(msg);
37 * Wrapped logging function.
38 * @param {string} msg The message to log.
40 var error = function(msg) {
42 if (window.console.error) {
43 window.console.error(msg);
45 else if (window.console.log) {
46 window.console.log(msg);
52 * Turn off all logging.
54 var loggingOff = function() {
56 error = function() {};
60 * Converts a WebGL enum to a string.
61 * @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
62 * @param {number} value The enum value.
63 * @return {string} The enum as a string.
65 var glEnumToString = function(gl, value) {
66 // Optimization for the most common enum:
67 if (value === gl.NO_ERROR) {
75 return "0x" + value.toString(16);
81 * Returns the last compiler/linker error.
82 * @return {string} The last compiler/linker error.
84 var getLastError = function() {
89 * Whether a haystack ends with a needle.
90 * @param {string} haystack String to search
91 * @param {string} needle String to search for.
92 * @param {boolean} True if haystack ends with needle.
94 var endsWith = function(haystack, needle) {
95 return haystack.substr(haystack.length - needle.length) === needle;
99 * Whether a haystack starts with a needle.
100 * @param {string} haystack String to search
101 * @param {string} needle String to search for.
102 * @param {boolean} True if haystack starts with needle.
104 var startsWith = function(haystack, needle) {
105 return haystack.substr(0, needle.length) === needle;
109 * A vertex shader for a single texture.
112 var simpleTextureVertexShader = [
113 'attribute vec4 vPosition;',
114 'attribute vec2 texCoord0;',
115 'varying vec2 texCoord;',
117 ' gl_Position = vPosition;',
118 ' texCoord = texCoord0;',
122 * A fragment shader for a single texture.
125 var simpleTextureFragmentShader = [
126 'precision mediump float;',
127 'uniform sampler2D tex;',
128 'varying vec2 texCoord;',
130 ' gl_FragData[0] = texture2D(tex, texCoord);',
134 * A vertex shader for a single texture.
137 var noTexCoordTextureVertexShader = [
138 'attribute vec4 vPosition;',
139 'varying vec2 texCoord;',
141 ' gl_Position = vPosition;',
142 ' texCoord = vPosition.xy * 0.5 + 0.5;',
146 * A vertex shader for a uniform color.
149 var simpleColorVertexShader = [
150 'attribute vec4 vPosition;',
152 ' gl_Position = vPosition;',
156 * A fragment shader for a uniform color.
159 var simpleColorFragmentShader = [
160 'precision mediump float;',
161 'uniform vec4 u_color;',
163 ' gl_FragData[0] = u_color;',
167 * A vertex shader for vertex colors.
170 var simpleVertexColorVertexShader = [
171 'attribute vec4 vPosition;',
172 'attribute vec4 a_color;',
173 'varying vec4 v_color;',
175 ' gl_Position = vPosition;',
176 ' v_color = a_color;',
180 * A fragment shader for vertex colors.
183 var simpleVertexColorFragmentShader = [
184 'precision mediump float;',
185 'varying vec4 v_color;',
187 ' gl_FragData[0] = v_color;',
191 * Creates a simple texture vertex shader.
192 * @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
193 * @return {!WebGLShader}
195 var setupSimpleTextureVertexShader = function(gl) {
196 return loadShader(gl, simpleTextureVertexShader, gl.VERTEX_SHADER);
200 * Creates a simple texture fragment shader.
201 * @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
202 * @return {!WebGLShader}
204 var setupSimpleTextureFragmentShader = function(gl) {
206 gl, simpleTextureFragmentShader, gl.FRAGMENT_SHADER);
210 * Creates a texture vertex shader that doesn't need texcoords.
211 * @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
212 * @return {!WebGLShader}
214 var setupNoTexCoordTextureVertexShader = function(gl) {
215 return loadShader(gl, noTexCoordTextureVertexShader, gl.VERTEX_SHADER);
219 * Creates a simple vertex color vertex shader.
220 * @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
221 * @return {!WebGLShader}
223 var setupSimpleVertexColorVertexShader = function(gl) {
224 return loadShader(gl, simpleVertexColorVertexShader, gl.VERTEX_SHADER);
228 * Creates a simple vertex color fragment shader.
229 * @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
230 * @return {!WebGLShader}
232 var setupSimpleVertexColorFragmentShader = function(gl) {
234 gl, simpleVertexColorFragmentShader, gl.FRAGMENT_SHADER);
238 * Creates a simple color vertex shader.
239 * @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
240 * @return {!WebGLShader}
242 var setupSimpleColorVertexShader = function(gl) {
243 return loadShader(gl, simpleColorVertexShader, gl.VERTEX_SHADER);
247 * Creates a simple color fragment shader.
248 * @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
249 * @return {!WebGLShader}
251 var setupSimpleColorFragmentShader = function(gl) {
253 gl, simpleColorFragmentShader, gl.FRAGMENT_SHADER);
257 * Creates a program, attaches shaders, binds attrib locations, links the
258 * program and calls useProgram.
259 * @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
260 * @param {!Array.<!WebGLShader|string>} shaders The shaders to
261 * attach, or the source, or the id of a script to get
263 * @param {!Array.<string>} opt_attribs The attribs names.
264 * @param {!Array.<number>} opt_locations The locations for the attribs.
265 * @param {boolean} opt_logShaders Whether to log shader source.
267 var setupProgram = function(
268 gl, shaders, opt_attribs, opt_locations, opt_logShaders) {
269 var realShaders = [];
270 var program = gl.createProgram();
272 for (var ii = 0; ii < shaders.length; ++ii) {
273 var shader = shaders[ii];
274 var shaderType = undefined;
275 if (typeof shader == 'string') {
276 var element = document.getElementById(shader);
278 if (element.type != "x-shader/x-vertex" && element.type != "x-shader/x-fragment")
279 shaderType = ii ? gl.FRAGMENT_SHADER : gl.VERTEX_SHADER;
280 shader = loadShaderFromScript(gl, shader, shaderType, undefined, opt_logShaders);
281 } else if (endsWith(shader, ".vert")) {
282 shader = loadShaderFromFile(gl, shader, gl.VERTEX_SHADER, undefined, opt_logShaders);
283 } else if (endsWith(shader, ".frag")) {
284 shader = loadShaderFromFile(gl, shader, gl.FRAGMENT_SHADER, undefined, opt_logShaders);
286 shader = loadShader(gl, shader, ii ? gl.FRAGMENT_SHADER : gl.VERTEX_SHADER, undefined, opt_logShaders);
288 } else if (opt_logShaders) {
289 throw 'Shader source logging requested but no shader source provided';
293 gl.attachShader(program, shader);
296 if (shaderCount != 2) {
297 error("Error in compiling shader");
301 for (var ii = 0; ii < opt_attribs.length; ++ii) {
302 gl.bindAttribLocation(
304 opt_locations ? opt_locations[ii] : ii,
308 gl.linkProgram(program);
310 // Check the link status
311 var linked = gl.getProgramParameter(program, gl.LINK_STATUS);
313 // something went wrong with the link
314 lastError = gl.getProgramInfoLog (program);
315 error("Error in program linking:" + lastError);
317 gl.deleteProgram(program);
321 gl.useProgram(program);
326 * Creates a simple texture program.
327 * @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
328 * @return {WebGLProgram}
330 var setupNoTexCoordTextureProgram = function(gl) {
331 var vs = setupNoTexCoordTextureVertexShader(gl);
332 var fs = setupSimpleTextureFragmentShader(gl);
336 var program = setupProgram(
345 gl.useProgram(program);
350 * Creates a simple texture program.
351 * @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
352 * @param {number} opt_positionLocation The attrib location for position.
353 * @param {number} opt_texcoordLocation The attrib location for texture coords.
354 * @return {WebGLProgram}
356 var setupSimpleTextureProgram = function(
357 gl, opt_positionLocation, opt_texcoordLocation) {
358 opt_positionLocation = opt_positionLocation || 0;
359 opt_texcoordLocation = opt_texcoordLocation || 1;
360 var vs = setupSimpleTextureVertexShader(gl);
361 var fs = setupSimpleTextureFragmentShader(gl);
365 var program = setupProgram(
368 ['vPosition', 'texCoord0'],
369 [opt_positionLocation, opt_texcoordLocation]);
374 gl.useProgram(program);
379 * Creates a simple vertex color program.
380 * @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
381 * @param {number} opt_positionLocation The attrib location for position.
382 * @param {number} opt_vertexColorLocation The attrib location
384 * @return {WebGLProgram}
386 var setupSimpleVertexColorProgram = function(
387 gl, opt_positionLocation, opt_vertexColorLocation) {
388 opt_positionLocation = opt_positionLocation || 0;
389 opt_vertexColorLocation = opt_vertexColorLocation || 1;
390 var vs = setupSimpleVertexColorVertexShader(gl);
391 var fs = setupSimpleVertexColorFragmentShader(gl);
395 var program = setupProgram(
398 ['vPosition', 'a_color'],
399 [opt_positionLocation, opt_vertexColorLocation]);
404 gl.useProgram(program);
409 * Creates a simple color program.
410 * @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
411 * @param {number} opt_positionLocation The attrib location for position.
412 * @return {WebGLProgram}
414 var setupSimpleColorProgram = function(gl, opt_positionLocation) {
415 opt_positionLocation = opt_positionLocation || 0;
416 var vs = setupSimpleColorVertexShader(gl);
417 var fs = setupSimpleColorFragmentShader(gl);
421 var program = setupProgram(
425 [opt_positionLocation]);
430 gl.useProgram(program);
435 * Creates buffers for a textured unit quad and attaches them to vertex attribs.
436 * @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
437 * @param {number} opt_positionLocation The attrib location for position.
438 * @param {number} opt_texcoordLocation The attrib location for texture coords.
439 * @return {!Array.<WebGLBuffer>} The buffer objects that were
442 var setupUnitQuad = function(gl, opt_positionLocation, opt_texcoordLocation) {
443 return setupUnitQuadWithTexCoords(gl, [ 0.0, 0.0 ], [ 1.0, 1.0 ],
444 opt_positionLocation, opt_texcoordLocation);
448 * Creates buffers for a textured unit quad with specified lower left
449 * and upper right texture coordinates, and attaches them to vertex
451 * @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
452 * @param {!Array.<number>} lowerLeftTexCoords The texture coordinates for the lower left corner.
453 * @param {!Array.<number>} upperRightTexCoords The texture coordinates for the upper right corner.
454 * @param {number} opt_positionLocation The attrib location for position.
455 * @param {number} opt_texcoordLocation The attrib location for texture coords.
456 * @return {!Array.<WebGLBuffer>} The buffer objects that were
459 var setupUnitQuadWithTexCoords = function(
460 gl, lowerLeftTexCoords, upperRightTexCoords,
461 opt_positionLocation, opt_texcoordLocation) {
462 return setupQuad(gl, {
463 positionLocation: opt_positionLocation || 0,
464 texcoordLocation: opt_texcoordLocation || 1,
465 lowerLeftTexCoords: lowerLeftTexCoords,
466 upperRightTexCoords: upperRightTexCoords,
471 * Makes a quad with various options.
472 * @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
473 * @param {!Object} options.
475 * scale: scale to multiple unit quad values by. default 1.0.
476 * positionLocation: attribute location for position.
477 * texcoordLocation: attribute location for texcoords.
478 * If this does not exist no texture coords are created.
479 * lowerLeftTexCoords: an array of 2 values for the
480 * lowerLeftTexCoords.
481 * upperRightTexCoords: an array of 2 values for the
482 * upperRightTexCoords.
484 var setupQuad = function(gl, options) {
485 var positionLocation = options.positionLocation || 0;
486 var scale = options.scale || 1;
490 var vertexObject = gl.createBuffer();
491 gl.bindBuffer(gl.ARRAY_BUFFER, vertexObject);
492 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
493 1.0 * scale , 1.0 * scale,
494 -1.0 * scale , 1.0 * scale,
495 -1.0 * scale , -1.0 * scale,
496 1.0 * scale , 1.0 * scale,
497 -1.0 * scale , -1.0 * scale,
498 1.0 * scale , -1.0 * scale,]), gl.STATIC_DRAW);
499 gl.enableVertexAttribArray(positionLocation);
500 gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
501 objects.push(vertexObject);
503 if (options.texcoordLocation !== undefined) {
504 var llx = options.lowerLeftTexCoords[0];
505 var lly = options.lowerLeftTexCoords[1];
506 var urx = options.upperRightTexCoords[0];
507 var ury = options.upperRightTexCoords[1];
509 var vertexObject = gl.createBuffer();
510 gl.bindBuffer(gl.ARRAY_BUFFER, vertexObject);
511 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
517 urx, lly]), gl.STATIC_DRAW);
518 gl.enableVertexAttribArray(options.texcoordLocation);
519 gl.vertexAttribPointer(options.texcoordLocation, 2, gl.FLOAT, false, 0, 0);
520 objects.push(vertexObject);
527 * Creates a program and buffers for rendering a textured quad.
528 * @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
529 * @param {number} opt_positionLocation The attrib location for
530 * position. Default = 0.
531 * @param {number} opt_texcoordLocation The attrib location for
532 * texture coords. Default = 1.
533 * @return {!WebGLProgram}
535 var setupTexturedQuad = function(
536 gl, opt_positionLocation, opt_texcoordLocation) {
537 var program = setupSimpleTextureProgram(
538 gl, opt_positionLocation, opt_texcoordLocation);
539 setupUnitQuad(gl, opt_positionLocation, opt_texcoordLocation);
544 * Creates a program and buffers for rendering a color quad.
545 * @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
546 * @param {number} opt_positionLocation The attrib location for position.
547 * @return {!WebGLProgram}
549 var setupColorQuad = function(gl, opt_positionLocation) {
550 opt_positionLocation = opt_positionLocation || 0;
551 var program = setupSimpleColorProgram(gl);
552 setupUnitQuad(gl, opt_positionLocation);
557 * Creates a program and buffers for rendering a textured quad with
558 * specified lower left and upper right texture coordinates.
559 * @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
560 * @param {!Array.<number>} lowerLeftTexCoords The texture coordinates for the lower left corner.
561 * @param {!Array.<number>} upperRightTexCoords The texture coordinates for the upper right corner.
562 * @param {number} opt_positionLocation The attrib location for position.
563 * @param {number} opt_texcoordLocation The attrib location for texture coords.
564 * @return {!WebGLProgram}
566 var setupTexturedQuadWithTexCoords = function(
567 gl, lowerLeftTexCoords, upperRightTexCoords,
568 opt_positionLocation, opt_texcoordLocation) {
569 var program = setupSimpleTextureProgram(
570 gl, opt_positionLocation, opt_texcoordLocation);
571 setupUnitQuadWithTexCoords(gl, lowerLeftTexCoords, upperRightTexCoords,
572 opt_positionLocation, opt_texcoordLocation);
577 * Creates a unit quad with only positions of a given resolution.
578 * @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
579 * @param {number} gridRes The resolution of the mesh grid,
580 * expressed in the number of quads across and down.
581 * @param {number} opt_positionLocation The attrib location for position.
583 var setupIndexedQuad = function (
584 gl, gridRes, opt_positionLocation, opt_flipOddTriangles) {
585 return setupIndexedQuadWithOptions(gl,
587 positionLocation: opt_positionLocation,
588 flipOddTriangles: opt_flipOddTriangles
593 * Creates a quad with various options.
594 * @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
595 * @param {!Object) options The options. See below.
596 * @return {!Array.<WebGLBuffer>} The created buffers.
597 * [positions, <colors>, indices]
600 * gridRes: number of quads across and down grid.
601 * positionLocation: attrib location for position
602 * flipOddTriangles: reverse order of vertices of every other
604 * positionOffset: offset added to each vertex
605 * positionMult: multipier for each vertex
606 * colorLocation: attrib location for vertex colors. If
607 * undefined no vertex colors will be created.
609 var setupIndexedQuadWithOptions = function (gl, options) {
610 var positionLocation = options.positionLocation || 0;
613 var gridRes = options.gridRes || 1;
614 var positionOffset = options.positionOffset || 0;
615 var positionMult = options.positionMult || 1;
616 var vertsAcross = gridRes + 1;
617 var numVerts = vertsAcross * vertsAcross;
618 var positions = new Float32Array(numVerts * 3);
619 var indices = new Uint16Array(6 * gridRes * gridRes);
622 for (var yy = 0; yy <= gridRes; ++yy) {
623 for (var xx = 0; xx <= gridRes; ++xx) {
624 positions[poffset + 0] = (-1 + 2 * xx / gridRes) * positionMult + positionOffset;
625 positions[poffset + 1] = (-1 + 2 * yy / gridRes) * positionMult + positionOffset;
626 positions[poffset + 2] = 0;
632 var buf = gl.createBuffer();
633 gl.bindBuffer(gl.ARRAY_BUFFER, buf);
634 gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
635 gl.enableVertexAttribArray(positionLocation);
636 gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0);
639 if (options.colorLocation !== undefined) {
640 var colors = new Float32Array(numVerts * 4);
641 for (var yy = 0; yy <= gridRes; ++yy) {
642 for (var xx = 0; xx <= gridRes; ++xx) {
643 if (options.color !== undefined) {
644 colors[poffset + 0] = options.color[0];
645 colors[poffset + 1] = options.color[1];
646 colors[poffset + 2] = options.color[2];
647 colors[poffset + 3] = options.color[3];
649 colors[poffset + 0] = xx / gridRes;
650 colors[poffset + 1] = yy / gridRes;
651 colors[poffset + 2] = (xx / gridRes) * (yy / gridRes);
652 colors[poffset + 3] = (yy % 2) * 0.5 + 0.5;
658 var buf = gl.createBuffer();
659 gl.bindBuffer(gl.ARRAY_BUFFER, buf);
660 gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);
661 gl.enableVertexAttribArray(options.colorLocation);
662 gl.vertexAttribPointer(options.colorLocation, 4, gl.FLOAT, false, 0, 0);
667 for (var yy = 0; yy < gridRes; ++yy) {
668 var index = yy * vertsAcross;
669 for (var xx = 0; xx < gridRes; ++xx) {
670 indices[tbase + 0] = index + 0;
671 indices[tbase + 1] = index + 1;
672 indices[tbase + 2] = index + vertsAcross;
673 indices[tbase + 3] = index + vertsAcross;
674 indices[tbase + 4] = index + 1;
675 indices[tbase + 5] = index + vertsAcross + 1;
677 if (options.flipOddTriangles) {
678 indices[tbase + 4] = index + vertsAcross + 1;
679 indices[tbase + 5] = index + 1;
687 var buf = gl.createBuffer();
688 gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buf);
689 gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
696 * Returns the constructor for a typed array that corresponds to the given
698 * @param {!WebGLRenderingContext} gl A WebGLRenderingContext.
699 * @param {number} type The WebGL type (eg, gl.UNSIGNED_BYTE)
700 * @return {!Constructor} The typed array constructor that
701 * corresponds to the given type.
703 var glTypeToTypedArrayType = function(gl, type) {
706 return window.Int8Array;
707 case gl.UNSIGNED_BYTE:
708 return window.Uint8Array;
710 return window.Int16Array;
711 case gl.UNSIGNED_SHORT:
712 case gl.UNSIGNED_SHORT_5_6_5:
713 case gl.UNSIGNED_SHORT_4_4_4_4:
714 case gl.UNSIGNED_SHORT_5_5_5_1:
715 return window.Uint16Array;
717 return window.Int32Array;
718 case gl.UNSIGNED_INT:
719 return window.Uint32Array;
721 throw 'unknown gl type ' + glEnumToString(gl, type);
726 * Returns the number of bytes per component for a given WebGL type.
727 * @param {!WebGLRenderingContext} gl A WebGLRenderingContext.
728 * @param {GLenum} type The WebGL type (eg, gl.UNSIGNED_BYTE)
729 * @return {number} The number of bytes per component.
731 var getBytesPerComponent = function(gl, type) {
734 case gl.UNSIGNED_BYTE:
737 case gl.UNSIGNED_SHORT:
738 case gl.UNSIGNED_SHORT_5_6_5:
739 case gl.UNSIGNED_SHORT_4_4_4_4:
740 case gl.UNSIGNED_SHORT_5_5_5_1:
743 case gl.UNSIGNED_INT:
746 throw 'unknown gl type ' + glEnumToString(gl, type);
751 * Returns the number of typed array elements per pixel for a given WebGL
752 * format/type combination. The corresponding typed array type can be determined
753 * by calling glTypeToTypedArrayType.
754 * @param {!WebGLRenderingContext} gl A WebGLRenderingContext.
755 * @param {GLenum} format The WebGL format (eg, gl.RGBA)
756 * @param {GLenum} type The WebGL type (eg, gl.UNSIGNED_BYTE)
757 * @return {number} The number of typed array elements per pixel.
759 var getTypedArrayElementsPerPixel = function(gl, format, type) {
761 case gl.UNSIGNED_SHORT_5_6_5:
762 case gl.UNSIGNED_SHORT_4_4_4_4:
763 case gl.UNSIGNED_SHORT_5_5_5_1:
765 case gl.UNSIGNED_BYTE:
768 throw 'not a gl type for color information ' + glEnumToString(gl, type);
776 case gl.LUMINANCE_ALPHA:
782 throw 'unknown gl format ' + glEnumToString(gl, format);
787 * Fills the given texture with a solid color.
788 * @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
789 * @param {!WebGLTexture} tex The texture to fill.
790 * @param {number} width The width of the texture to create.
791 * @param {number} height The height of the texture to create.
792 * @param {!Array.<number>} color The color to fill with.
793 * where each element is in the range 0 to 255.
794 * @param {number} opt_level The level of the texture to fill. Default = 0.
795 * @param {number} opt_format The format for the texture.
797 var fillTexture = function(gl, tex, width, height, color, opt_level, opt_format, opt_type) {
798 opt_level = opt_level || 0;
799 opt_format = opt_format || gl.RGBA;
800 opt_type = opt_type || gl.UNSIGNED_BYTE;
801 var pack = gl.getParameter(gl.UNPACK_ALIGNMENT);
802 var numComponents = color.length;
803 var bytesPerComponent = getBytesPerComponent(gl, opt_type);
804 var rowSize = numComponents * width * bytesPerComponent;
805 var paddedRowSize = Math.floor((rowSize + pack - 1) / pack) * pack;
806 var size = rowSize + (height - 1) * paddedRowSize;
807 size = Math.floor((size + bytesPerComponent - 1) / bytesPerComponent) * bytesPerComponent;
808 var buf = new (glTypeToTypedArrayType(gl, opt_type))(size);
809 for (var yy = 0; yy < height; ++yy) {
810 var off = yy * paddedRowSize;
811 for (var xx = 0; xx < width; ++xx) {
812 for (var jj = 0; jj < numComponents; ++jj) {
813 buf[off++] = color[jj];
817 gl.bindTexture(gl.TEXTURE_2D, tex);
819 gl.TEXTURE_2D, opt_level, opt_format, width, height, 0,
820 opt_format, opt_type, buf);
824 * Creates a texture and fills it with a solid color.
825 * @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
826 * @param {number} width The width of the texture to create.
827 * @param {number} height The height of the texture to create.
828 * @param {!Array.<number>} color The color to fill with. A 4 element array
829 * where each element is in the range 0 to 255.
830 * @return {!WebGLTexture}
832 var createColoredTexture = function(gl, width, height, color) {
833 var tex = gl.createTexture();
834 fillTexture(gl, tex, width, height, color);
838 var ubyteToFloat = function(c) {
842 var ubyteColorToFloatColor = function(color) {
844 for (var ii = 0; ii < color.length; ++ii) {
845 floatColor[ii] = ubyteToFloat(color[ii]);
851 * Sets the "u_color" uniform of the current program to color.
852 * @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
853 * @param {!Array.<number> color 4 element array of 0-1 color
856 var setFloatDrawColor = function(gl, color) {
857 var program = gl.getParameter(gl.CURRENT_PROGRAM);
858 var colorLocation = gl.getUniformLocation(program, "u_color");
859 gl.uniform4fv(colorLocation, color);
863 * Sets the "u_color" uniform of the current program to color.
864 * @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
865 * @param {!Array.<number> color 4 element array of 0-255 color
868 var setUByteDrawColor = function(gl, color) {
869 setFloatDrawColor(gl, ubyteColorToFloatColor(color));
873 * Draws a previously setup quad in the given color.
874 * @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
875 * @param {!Array.<number>} color The color to draw with. A 4
876 * element array where each element is in the range 0 to
879 var drawFloatColorQuad = function(gl, color) {
880 var program = gl.getParameter(gl.CURRENT_PROGRAM);
881 var colorLocation = gl.getUniformLocation(program, "u_color");
882 gl.uniform4fv(colorLocation, color);
883 gl.drawArrays(gl.TRIANGLES, 0, 6);
888 * Draws a previously setup quad in the given color.
889 * @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
890 * @param {!Array.<number>} color The color to draw with. A 4
891 * element array where each element is in the range 0 to
894 var drawUByteColorQuad = function(gl, color) {
895 drawFloatColorQuad(gl, ubyteColorToFloatColor(color));
899 * Draws a previously setupUnitQuad.
900 * @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
902 var drawUnitQuad = function(gl) {
903 gl.drawArrays(gl.TRIANGLES, 0, 6);
907 * Clears then Draws a previously setupUnitQuad.
908 * @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
909 * @param {!Array.<number>} opt_color The color to fill clear with before
910 * drawing. A 4 element array where each element is in the range 0 to
911 * 255. Default [255, 255, 255, 255]
913 var clearAndDrawUnitQuad = function(gl, opt_color) {
914 opt_color = opt_color || [255, 255, 255, 255];
920 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
925 * Draws a quad previously setup with setupIndexedQuad.
926 * @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
927 * @param {number} gridRes Resolution of grid.
929 var drawIndexedQuad = function(gl, gridRes) {
930 gl.drawElements(gl.TRIANGLES, gridRes * gridRes * 6, gl.UNSIGNED_SHORT, 0);
934 * Draws a previously setupIndexedQuad
935 * @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
936 * @param {number} gridRes Resolution of grid.
937 * @param {!Array.<number>} opt_color The color to fill clear with before
938 * drawing. A 4 element array where each element is in the range 0 to
939 * 255. Default [255, 255, 255, 255]
941 var clearAndDrawIndexedQuad = function(gl, gridRes, opt_color) {
942 opt_color = opt_color || [255, 255, 255, 255];
948 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
949 drawIndexedQuad(gl, gridRes);
953 * Clips a range to min, max
954 * (Eg. clipToRange(-5,7,0,20) would return {value:0,extent:2}
955 * @param {number} value start of range
956 * @param {number} extent extent of range
957 * @param {number} min min.
958 * @param {number} max max.
959 * @return {!{value:number,extent:number} The clipped value.
961 var clipToRange = function(value, extent, min, max) {
963 extent -= min - value;
966 var end = value + extent;
974 return {value:value, extent: extent};
978 * Determines if the passed context is an instance of a WebGLRenderingContext
979 * or later variant (like WebGL2RenderingContext)
980 * @param {CanvasRenderingContext} ctx The context to check.
982 var isWebGLContext = function(ctx) {
983 if (ctx instanceof WebGLRenderingContext)
986 if ('WebGL2RenderingContext' in window && ctx instanceof WebGL2RenderingContext)
993 * Checks that a portion of a canvas or the currently attached framebuffer is 1 color.
994 * @param {!WebGLRenderingContext|CanvasRenderingContext2D} gl The
995 * WebGLRenderingContext or 2D context to use.
996 * @param {number} x left corner of region to check.
997 * @param {number} y bottom corner of region to check in case of checking from
998 * a GL context or top corner in case of checking from a 2D context.
999 * @param {number} width width of region to check.
1000 * @param {number} height width of region to check.
1001 * @param {!Array.<number>} color The color expected. A 4 element array where
1002 * each element is in the range 0 to 255.
1003 * @param {number} opt_errorRange Optional. Acceptable error in
1004 * color checking. 0 by default.
1005 * @param {!function()} sameFn Function to call if all pixels
1006 * are the same as color.
1007 * @param {!function()} differentFn Function to call if a pixel
1008 * is different than color
1009 * @param {!function()} logFn Function to call for logging.
1011 var checkCanvasRectColor = function(gl, x, y, width, height, color, opt_errorRange, sameFn, differentFn, logFn) {
1012 if (isWebGLContext(gl) && !gl.getParameter(gl.FRAMEBUFFER_BINDING)) {
1013 // We're reading the backbuffer so clip.
1014 var xr = clipToRange(x, width, 0, gl.canvas.width);
1015 var yr = clipToRange(y, height, 0, gl.canvas.height);
1016 if (!xr.extent || !yr.extent) {
1017 logFn("checking rect: effective width or height is zero");
1026 var errorRange = opt_errorRange || 0;
1027 if (!errorRange.length) {
1028 errorRange = [errorRange, errorRange, errorRange, errorRange]
1031 if (isWebGLContext(gl)) {
1032 buf = new Uint8Array(width * height * 4);
1033 gl.readPixels(x, y, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buf);
1035 buf = gl.getImageData(x, y, width, height).data;
1037 for (var i = 0; i < width * height; ++i) {
1039 for (var j = 0; j < color.length; ++j) {
1040 if (Math.abs(buf[offset + j] - color[j]) > errorRange[j]) {
1041 var was = buf[offset + 0].toString();
1042 for (j = 1; j < color.length; ++j) {
1043 was += "," + buf[offset + j];
1045 differentFn('at (' + (x + (i % width)) + ', ' + (y + Math.floor(i / width)) +
1046 ') expected: ' + color + ' was ' + was);
1055 * Checks that a portion of a canvas or the currently attached framebuffer is 1 color.
1056 * @param {!WebGLRenderingContext|CanvasRenderingContext2D} gl The
1057 * WebGLRenderingContext or 2D context to use.
1058 * @param {number} x left corner of region to check.
1059 * @param {number} y bottom corner of region to check in case of checking from
1060 * a GL context or top corner in case of checking from a 2D context.
1061 * @param {number} width width of region to check.
1062 * @param {number} height width of region to check.
1063 * @param {!Array.<number>} color The color expected. A 4 element array where
1064 * each element is in the range 0 to 255.
1065 * @param {string} opt_msg Message to associate with success. Eg
1066 * ("should be red").
1067 * @param {number} opt_errorRange Optional. Acceptable error in
1068 * color checking. 0 by default.
1070 var checkCanvasRect = function(gl, x, y, width, height, color, opt_msg, opt_errorRange) {
1071 checkCanvasRectColor(
1072 gl, x, y, width, height, color, opt_errorRange,
1075 if (msg === undefined)
1076 msg = "should be " + color.toString();
1084 * Checks that an entire canvas or the currently attached framebuffer is 1 color.
1085 * @param {!WebGLRenderingContext|CanvasRenderingContext2D} gl The
1086 * WebGLRenderingContext or 2D context to use.
1087 * @param {!Array.<number>} color The color expected. A 4 element array where
1088 * each element is in the range 0 to 255.
1089 * @param {string} msg Message to associate with success. Eg ("should be red").
1090 * @param {number} errorRange Optional. Acceptable error in
1091 * color checking. 0 by default.
1093 var checkCanvas = function(gl, color, msg, errorRange) {
1094 checkCanvasRect(gl, 0, 0, gl.canvas.width, gl.canvas.height, color, msg, errorRange);
1098 * Checks a rectangular area both inside the area and outside
1100 * @param {!WebGLRenderingContext|CanvasRenderingContext2D} gl The
1101 * WebGLRenderingContext or 2D context to use.
1102 * @param {number} x left corner of region to check.
1103 * @param {number} y bottom corner of region to check in case of checking from
1104 * a GL context or top corner in case of checking from a 2D context.
1105 * @param {number} width width of region to check.
1106 * @param {number} height width of region to check.
1107 * @param {!Array.<number>} innerColor The color expected inside
1108 * the area. A 4 element array where each element is in the
1110 * @param {!Array.<number>} outerColor The color expected
1111 * outside. A 4 element array where each element is in the
1113 * @param {!number} opt_edgeSize: The number of pixels to skip
1114 * around the edges of the area. Defaut 0.
1115 * @param {!{width:number, height:number}} opt_outerDimensions
1116 * The outer dimensions. Default the size of gl.canvas.
1118 var checkAreaInAndOut = function(gl, x, y, width, height, innerColor, outerColor, opt_edgeSize, opt_outerDimensions) {
1119 var outerDimensions = opt_outerDimensions || { width: gl.canvas.width, height: gl.canvas.height };
1120 var edgeSize = opt_edgeSize || 0;
1121 checkCanvasRect(gl, x + edgeSize, y + edgeSize, width - edgeSize * 2, height - edgeSize * 2, innerColor);
1122 checkCanvasRect(gl, 0, 0, x - edgeSize, outerDimensions.height, outerColor);
1123 checkCanvasRect(gl, x + width + edgeSize, 0, outerDimensions.width - x - width - edgeSize, outerDimensions.height, outerColor);
1124 checkCanvasRect(gl, 0, 0, outerDimensions.width, y - edgeSize, outerColor);
1125 checkCanvasRect(gl, 0, y + height + edgeSize, outerDimensions.width, outerDimensions.height - y - height - edgeSize, outerColor);
1129 * Loads a texture, calls callback when finished.
1130 * @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
1131 * @param {string} url URL of image to load
1132 * @param {function(!Image): void} callback Function that gets called after
1134 * @return {!WebGLTexture} The created texture.
1136 var loadTexture = function(gl, url, callback) {
1137 var texture = gl.createTexture();
1138 gl.bindTexture(gl.TEXTURE_2D, texture);
1139 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
1140 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
1141 var image = new Image();
1142 image.onload = function() {
1143 gl.bindTexture(gl.TEXTURE_2D, texture);
1144 gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
1145 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
1153 * Checks whether the bound texture has expected dimensions. One corner pixel
1154 * of the texture will be changed as a side effect.
1155 * @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
1156 * @param {!WebGLTexture} texture The texture to check.
1157 * @param {number} width Expected width.
1158 * @param {number} height Expected height.
1159 * @param {GLenum} opt_format The texture's format. Defaults to RGBA.
1160 * @param {GLenum} opt_type The texture's type. Defaults to UNSIGNED_BYTE.
1162 var checkTextureSize = function(gl, width, height, opt_format, opt_type) {
1163 opt_format = opt_format || gl.RGBA;
1164 opt_type = opt_type || gl.UNSIGNED_BYTE;
1166 var numElements = getTypedArrayElementsPerPixel(gl, opt_format, opt_type);
1167 var buf = new (glTypeToTypedArrayType(gl, opt_type))(numElements);
1170 gl.texSubImage2D(gl.TEXTURE_2D, 0, width - 1, height - 1, 1, 1, opt_format, opt_type, buf);
1171 if (gl.getError() != gl.NO_ERROR) {
1172 testFailed("Texture was smaller than the expected size " + width + "x" + height);
1175 gl.texSubImage2D(gl.TEXTURE_2D, 0, width - 1, height, 1, 1, opt_format, opt_type, buf);
1176 if (gl.getError() == gl.NO_ERROR) {
1177 testFailed("Texture was taller than " + height);
1180 gl.texSubImage2D(gl.TEXTURE_2D, 0, width, height - 1, 1, 1, opt_format, opt_type, buf);
1181 if (gl.getError() == gl.NO_ERROR) {
1182 testFailed("Texture was wider than " + width);
1186 testPassed("Texture had the expected size " + width + "x" + height);
1191 * Makes a shallow copy of an object.
1192 * @param {!Object) src Object to copy
1193 * @return {!Object} The copy of src.
1195 var shallowCopyObject = function(src) {
1197 for (var attr in src) {
1198 if (src.hasOwnProperty(attr)) {
1199 dst[attr] = src[attr];
1206 * Checks if an attribute exists on an object case insensitive.
1207 * @param {!Object) obj Object to check
1208 * @param {string} attr Name of attribute to look for.
1209 * @return {string?} The name of the attribute if it exists,
1212 var hasAttributeCaseInsensitive = function(obj, attr) {
1213 var lower = attr.toLowerCase();
1214 for (var key in obj) {
1215 if (obj.hasOwnProperty(key) && key.toLowerCase() == lower) {
1222 * Returns a map of URL querystring options
1223 * @return {Object?} Object containing all the values in the URL querystring
1225 var getUrlOptions = function() {
1227 var s = window.location.href;
1228 var q = s.indexOf("?");
1229 var e = s.indexOf("#");
1233 var query = s.substring(q + 1, e);
1234 var pairs = query.split("&");
1235 for (var ii = 0; ii < pairs.length; ++ii) {
1236 var keyValue = pairs[ii].split("=");
1237 var key = keyValue[0];
1238 var value = decodeURIComponent(keyValue[1]);
1239 options[key] = value;
1246 * Creates a webgl context.
1247 * @param {!Canvas|string} opt_canvas The canvas tag to get
1248 * context from. If one is not passed in one will be
1249 * created. If it's a string it's assumed to be the id of a
1251 * @param {Object} opt_attributes Context attributes.
1252 * @param {!number} opt_version Version of WebGL context to create
1253 * @return {!WebGLRenderingContext} The created context.
1255 var create3DContext = function(opt_canvas, opt_attributes, opt_version) {
1256 if (window.initTestingHarness) {
1257 window.initTestingHarness();
1259 var attributes = shallowCopyObject(opt_attributes || {});
1260 if (!hasAttributeCaseInsensitive(attributes, "antialias")) {
1261 attributes.antialias = false;
1264 opt_version = parseInt(getUrlOptions().webglVersion, 10) || 1;
1266 opt_canvas = opt_canvas || document.createElement("canvas");
1267 if (typeof opt_canvas == 'string') {
1268 opt_canvas = document.getElementById(opt_canvas);
1273 switch (opt_version) {
1275 names = ["webgl2", "experimental-webgl2"]; break;
1277 names = ["webgl", "experimental-webgl"]; break;
1280 for (var i = 0; i < names.length; ++i) {
1282 context = opt_canvas.getContext(names[i], attributes);
1290 testFailed("Unable to fetch WebGL rendering context for Canvas");
1296 * Wraps a WebGL function with a function that throws an exception if there is
1298 * @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
1299 * @param {string} fname Name of function to wrap.
1300 * @return {function} The wrapped function.
1302 var createGLErrorWrapper = function(context, fname) {
1304 var rv = context[fname].apply(context, arguments);
1305 var err = context.getError();
1306 if (err != context.NO_ERROR)
1307 throw "GL error " + glEnumToString(context, err) + " in " + fname;
1313 * Creates a WebGL context where all functions are wrapped to throw an exception
1314 * if there is an error.
1315 * @param {!Canvas} canvas The HTML canvas to get a context from.
1316 * @return {!Object} The wrapped context.
1318 function create3DContextWithWrapperThatThrowsOnGLError(canvas) {
1319 var context = create3DContext(canvas);
1321 for (var i in context) {
1323 if (typeof context[i] == 'function') {
1324 wrap[i] = createGLErrorWrapper(context, i);
1326 wrap[i] = context[i];
1329 error("createContextWrapperThatThrowsOnGLError: Error accessing " + i);
1332 wrap.getError = function() {
1333 return context.getError();
1339 * Tests that an evaluated expression generates a specific GL error.
1340 * @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
1341 * @param {number|Array.<number>} glErrors The expected gl error or an array of expected errors.
1342 * @param {string} evalStr The string to evaluate.
1344 var shouldGenerateGLError = function(gl, glErrors, evalStr) {
1352 testFailed(evalStr + " threw exception " + exception);
1354 glErrorShouldBe(gl, glErrors, "after evaluating: " + evalStr);
1359 * Tests that the first error GL returns is the specified error.
1360 * @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
1361 * @param {number|Array.<number>} glErrors The expected gl error or an array of expected errors.
1362 * @param {string} opt_msg Optional additional message.
1364 var glErrorShouldBe = function(gl, glErrors, opt_msg) {
1365 if (!glErrors.length) {
1366 glErrors = [glErrors];
1368 opt_msg = opt_msg || "";
1369 var err = gl.getError();
1370 var ndx = glErrors.indexOf(err);
1372 for (var ii = 0; ii < glErrors.length; ++ii) {
1373 errStrs.push(glEnumToString(gl, glErrors[ii]));
1375 var expected = errStrs.join(" or ");
1377 var msg = "getError expected" + ((glErrors.length > 1) ? " one of: " : ": ");
1378 testFailed(msg + expected + ". Was " + glEnumToString(gl, err) + " : " + opt_msg);
1380 var msg = "getError was " + ((glErrors.length > 1) ? "one of: " : "expected value: ");
1381 testPassed(msg + expected + " : " + opt_msg);
1386 * Links a WebGL program, throws if there are errors.
1387 * @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
1388 * @param {!WebGLProgram} program The WebGLProgram to link.
1389 * @param {function(string): void) opt_errorCallback callback for errors.
1391 var linkProgram = function(gl, program, opt_errorCallback) {
1392 var errFn = opt_errorCallback || testFailed;
1394 gl.linkProgram(program);
1396 // Check the link status
1397 var linked = gl.getProgramParameter(program, gl.LINK_STATUS);
1399 // something went wrong with the link
1400 var error = gl.getProgramInfoLog (program);
1402 errFn("Error in program linking:" + error);
1404 gl.deleteProgram(program);
1409 * Loads text from an external file. This function is synchronous.
1410 * @param {string} url The url of the external file.
1411 * @param {!function(bool, string): void} callback that is sent a bool for
1412 * success and the string.
1414 var loadTextFileAsync = function(url, callback) {
1415 log ("loading: " + url);
1416 var error = 'loadTextFileSynchronous failed to load url "' + url + '"';
1418 if (window.XMLHttpRequest) {
1419 request = new XMLHttpRequest();
1420 if (request.overrideMimeType) {
1421 request.overrideMimeType('text/plain');
1424 throw 'XMLHttpRequest is disabled';
1427 request.open('GET', url, true);
1428 request.onreadystatechange = function() {
1429 if (request.readyState == 4) {
1431 // HTTP reports success with a 200 status. The file protocol reports
1432 // success with zero. HTTP does not use zero as a status code (they
1434 // https://developer.mozilla.org/En/Using_XMLHttpRequest
1435 var success = request.status == 200 || request.status == 0;
1437 text = request.responseText;
1439 log("loaded: " + url);
1440 callback(success, text);
1445 log("failed to load: " + url);
1446 callback(false, '');
1451 * Recursively loads a file as a list. Each line is parsed for a relative
1452 * path. If the file ends in .txt the contents of that file is inserted in
1455 * @param {string} url The url of the external file.
1456 * @param {!function(bool, Array<string>): void} callback that is sent a bool
1457 * for success and the array of strings.
1459 var getFileListAsync = function(url, callback) {
1462 var getFileListImpl = function(url, callback) {
1464 if (url.substr(url.length - 4) == '.txt') {
1465 loadTextFileAsync(url, function() {
1466 return function(success, text) {
1468 callback(false, '');
1471 var lines = text.split('\n');
1473 var lastSlash = url.lastIndexOf('/');
1474 if (lastSlash >= 0) {
1475 prefix = url.substr(0, lastSlash + 1);
1480 for (var ii = 0; ii < lines.length; ++ii) {
1481 var str = lines[ii].replace(/^\s\s*/, '').replace(/\s\s*$/, '');
1482 if (str.length > 4 &&
1485 str.substr(0, 2) != "//") {
1486 var names = str.split(/ +/);
1487 new_url = prefix + str;
1488 if (names.length == 1) {
1489 new_url = prefix + str;
1491 getFileListImpl(new_url, function(index) {
1492 return function(success, new_files) {
1493 log("got files: " + new_files.length);
1495 files[index] = new_files;
1503 for (var jj = 0; jj < names.length; ++jj) {
1504 s += p + prefix + names[jj];
1513 function finish(success) {
1518 log("count: " + count);
1520 callback(!fail, files);
1528 callback(true, files);
1532 getFileListImpl(url, function(success, files) {
1536 function flatten(files) {
1537 for (var ii = 0; ii < files.length; ++ii) {
1538 var value = files[ii];
1539 if (typeof(value) == "string") {
1546 callback(success, flat);
1551 * Gets a file from a file/URL.
1552 * @param {string} file the URL of the file to get.
1553 * @return {string} The contents of the file.
1555 var readFile = function(file) {
1556 var xhr = new XMLHttpRequest();
1557 xhr.open("GET", file, false);
1559 return xhr.responseText.replace(/\r/g, "");
1562 var readFileList = function(url) {
1564 if (url.substr(url.length - 4) == '.txt') {
1565 var lines = readFile(url).split('\n');
1567 var lastSlash = url.lastIndexOf('/');
1568 if (lastSlash >= 0) {
1569 prefix = url.substr(0, lastSlash + 1);
1571 for (var ii = 0; ii < lines.length; ++ii) {
1572 var str = lines[ii].replace(/^\s\s*/, '').replace(/\s\s*$/, '');
1573 if (str.length > 4 &&
1576 str.substr(0, 2) != "//") {
1577 var names = str.split(/ +/);
1578 if (names.length == 1) {
1579 new_url = prefix + str;
1580 files = files.concat(readFileList(new_url));
1584 for (var jj = 0; jj < names.length; ++jj) {
1585 s += p + prefix + names[jj];
1600 * @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
1601 * @param {string} shaderSource The shader source.
1602 * @param {number} shaderType The type of shader.
1603 * @param {function(string): void) opt_errorCallback callback for errors.
1604 * @param {boolean} opt_logShaders Whether to log shader source.
1605 * @param {string} opt_shaderLabel Label that identifies the shader source in
1607 * @param {string} opt_url URL from where the shader source was loaded from.
1608 * If opt_logShaders is set, then a link to the source file will also be
1610 * @return {!WebGLShader} The created shader.
1612 var loadShader = function(
1613 gl, shaderSource, shaderType, opt_errorCallback, opt_logShaders,
1614 opt_shaderLabel, opt_url) {
1615 var errFn = opt_errorCallback || error;
1616 // Create the shader object
1617 var shader = gl.createShader(shaderType);
1618 if (shader == null) {
1619 errFn("*** Error: unable to create shader '"+shaderSource+"'");
1623 // Load the shader source
1624 gl.shaderSource(shader, shaderSource);
1625 var err = gl.getError();
1626 if (err != gl.NO_ERROR) {
1627 errFn("*** Error loading shader '" + shader + "':" + glEnumToString(gl, err));
1631 // Compile the shader
1632 gl.compileShader(shader);
1634 if (opt_logShaders) {
1635 var label = shaderType == gl.VERTEX_SHADER ? 'vertex shader' : 'fragment_shader';
1636 if (opt_shaderLabel) {
1637 label = opt_shaderLabel + ' ' + label;
1640 gl, document.getElementById('console'), label, shader, shaderSource, opt_url);
1643 // Check the compile status
1644 var compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
1646 // Something went wrong during compilation; get the error
1647 lastError = gl.getShaderInfoLog(shader);
1648 errFn("*** Error compiling " + glEnumToString(gl, shaderType) + " '" + shader + "':" + lastError);
1649 gl.deleteShader(shader);
1657 * Loads a shader from a URL.
1658 * @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
1659 * @param {file} file The URL of the shader source.
1660 * @param {number} type The type of shader.
1661 * @param {function(string): void) opt_errorCallback callback for errors.
1662 * @param {boolean} opt_logShaders Whether to log shader source.
1663 * @return {!WebGLShader} The created shader.
1665 var loadShaderFromFile = function(
1666 gl, file, type, opt_errorCallback, opt_logShaders) {
1667 var shaderSource = readFile(file);
1668 return loadShader(gl, shaderSource, type, opt_errorCallback,
1669 opt_logShaders, undefined, file);
1673 * Gets the content of script.
1674 * @param {string} scriptId The id of the script tag.
1675 * @return {string} The content of the script.
1677 var getScript = function(scriptId) {
1678 var shaderScript = document.getElementById(scriptId);
1679 if (!shaderScript) {
1680 throw("*** Error: unknown script element " + scriptId);
1682 return shaderScript.text;
1686 * Loads a shader from a script tag.
1687 * @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
1688 * @param {string} scriptId The id of the script tag.
1689 * @param {number} opt_shaderType The type of shader. If not passed in it will
1690 * be derived from the type of the script tag.
1691 * @param {function(string): void) opt_errorCallback callback for errors.
1692 * @param {boolean} opt_logShaders Whether to log shader source.
1693 * @return {!WebGLShader} The created shader.
1695 var loadShaderFromScript = function(
1696 gl, scriptId, opt_shaderType, opt_errorCallback, opt_logShaders) {
1697 var shaderSource = "";
1698 var shaderScript = document.getElementById(scriptId);
1699 if (!shaderScript) {
1700 throw("*** Error: unknown script element " + scriptId);
1702 shaderSource = shaderScript.text;
1704 if (!opt_shaderType) {
1705 if (shaderScript.type == "x-shader/x-vertex") {
1706 opt_shaderType = gl.VERTEX_SHADER;
1707 } else if (shaderScript.type == "x-shader/x-fragment") {
1708 opt_shaderType = gl.FRAGMENT_SHADER;
1710 throw("*** Error: unknown shader type");
1715 return loadShader(gl, shaderSource, opt_shaderType, opt_errorCallback,
1719 var loadStandardProgram = function(gl) {
1720 var program = gl.createProgram();
1721 gl.attachShader(program, loadStandardVertexShader(gl));
1722 gl.attachShader(program, loadStandardFragmentShader(gl));
1723 gl.bindAttribLocation(program, 0, "a_vertex");
1724 gl.bindAttribLocation(program, 1, "a_normal");
1725 linkProgram(gl, program);
1730 * Loads shaders from files, creates a program, attaches the shaders and links.
1731 * @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
1732 * @param {string} vertexShaderPath The URL of the vertex shader.
1733 * @param {string} fragmentShaderPath The URL of the fragment shader.
1734 * @param {function(string): void) opt_errorCallback callback for errors.
1735 * @return {!WebGLProgram} The created program.
1737 var loadProgramFromFile = function(
1738 gl, vertexShaderPath, fragmentShaderPath, opt_errorCallback) {
1739 var program = gl.createProgram();
1740 var vs = loadShaderFromFile(
1741 gl, vertexShaderPath, gl.VERTEX_SHADER, opt_errorCallback);
1742 var fs = loadShaderFromFile(
1743 gl, fragmentShaderPath, gl.FRAGMENT_SHADER, opt_errorCallback);
1745 gl.attachShader(program, vs);
1746 gl.attachShader(program, fs);
1747 linkProgram(gl, program, opt_errorCallback);
1750 gl.deleteShader(vs);
1753 gl.deleteShader(fs);
1759 * Loads shaders from script tags, creates a program, attaches the shaders and
1761 * @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
1762 * @param {string} vertexScriptId The id of the script tag that contains the
1764 * @param {string} fragmentScriptId The id of the script tag that contains the
1766 * @param {function(string): void) opt_errorCallback callback for errors.
1767 * @return {!WebGLProgram} The created program.
1769 var loadProgramFromScript = function loadProgramFromScript(
1770 gl, vertexScriptId, fragmentScriptId, opt_errorCallback) {
1771 var program = gl.createProgram();
1774 loadShaderFromScript(
1775 gl, vertexScriptId, gl.VERTEX_SHADER, opt_errorCallback));
1778 loadShaderFromScript(
1779 gl, fragmentScriptId, gl.FRAGMENT_SHADER, opt_errorCallback));
1780 linkProgram(gl, program, opt_errorCallback);
1785 * Loads shaders from source, creates a program, attaches the shaders and
1787 * @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
1788 * @param {!WebGLShader} vertexShader The vertex shader.
1789 * @param {!WebGLShader} fragmentShader The fragment shader.
1790 * @param {function(string): void) opt_errorCallback callback for errors.
1791 * @return {!WebGLProgram} The created program.
1793 var createProgram = function(gl, vertexShader, fragmentShader, opt_errorCallback) {
1794 var program = gl.createProgram();
1795 gl.attachShader(program, vertexShader);
1796 gl.attachShader(program, fragmentShader);
1797 linkProgram(gl, program, opt_errorCallback);
1802 * Loads shaders from source, creates a program, attaches the shaders and
1804 * @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
1805 * @param {string} vertexShader The vertex shader source.
1806 * @param {string} fragmentShader The fragment shader source.
1807 * @param {function(string): void) opt_errorCallback callback for errors.
1808 * @param {boolean} opt_logShaders Whether to log shader source.
1809 * @return {!WebGLProgram} The created program.
1811 var loadProgram = function(
1812 gl, vertexShader, fragmentShader, opt_errorCallback, opt_logShaders) {
1814 var vs = loadShader(
1815 gl, vertexShader, gl.VERTEX_SHADER, opt_errorCallback, opt_logShaders);
1816 var fs = loadShader(
1817 gl, fragmentShader, gl.FRAGMENT_SHADER, opt_errorCallback, opt_logShaders);
1819 program = createProgram(gl, vs, fs, opt_errorCallback)
1822 gl.deleteShader(vs);
1825 gl.deleteShader(fs);
1831 * Loads shaders from source, creates a program, attaches the shaders and
1832 * links but expects error.
1834 * GLSL 1.0.17 10.27 effectively says that compileShader can
1835 * always succeed as long as linkProgram fails so we can't
1836 * rely on compileShader failing. This function expects
1837 * one of the shader to fail OR linking to fail.
1839 * @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
1840 * @param {string} vertexShaderScriptId The vertex shader.
1841 * @param {string} fragmentShaderScriptId The fragment shader.
1842 * @return {WebGLProgram} The created program.
1844 var loadProgramFromScriptExpectError = function(
1845 gl, vertexShaderScriptId, fragmentShaderScriptId) {
1846 var vertexShader = loadShaderFromScript(gl, vertexShaderScriptId);
1847 if (!vertexShader) {
1850 var fragmentShader = loadShaderFromScript(gl, fragmentShaderScriptId);
1851 if (!fragmentShader) {
1854 var linkSuccess = true;
1855 var program = gl.createProgram();
1856 gl.attachShader(program, vertexShader);
1857 gl.attachShader(program, fragmentShader);
1859 linkProgram(gl, program, function() {
1860 linkSuccess = false;
1862 return linkSuccess ? program : null;
1866 var getActiveMap = function(gl, program, typeInfo) {
1867 var numVariables = gl.getProgramParameter(program, gl[typeInfo.param]);
1869 for (var ii = 0; ii < numVariables; ++ii) {
1870 var info = gl[typeInfo.activeFn](program, ii);
1871 variables[info.name] = {
1875 location: gl[typeInfo.locFn](program, info.name)
1882 * Returns a map of attrib names to info about those
1888 * name: "attrib1Name",
1890 * type: gl.FLOAT_MAT2,
1895 * name: "attrib2Name[0]",
1902 * @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
1903 * @param {WebGLProgram} The program to query for attribs.
1906 var getAttribMap = function(gl, program) {
1907 return getActiveMap(gl, program, {
1908 param: "ACTIVE_ATTRIBUTES",
1909 activeFn: "getActiveAttrib",
1910 locFn: "getAttribLocation"
1915 * Returns a map of uniform names to info about those uniforms.
1920 * name: "uniform1Name",
1922 * type: gl.FLOAT_MAT2,
1923 * location: WebGLUniformLocation
1925 * "uniform2Name[0]":
1927 * name: "uniform2Name[0]",
1930 * location: WebGLUniformLocation
1934 * @param {!WebGLRenderingContext} gl The WebGLRenderingContext to use.
1935 * @param {WebGLProgram} The program to query for uniforms.
1938 var getUniformMap = function(gl, program) {
1939 return getActiveMap(gl, program, {
1940 param: "ACTIVE_UNIFORMS",
1941 activeFn: "getActiveUniform",
1942 locFn: "getUniformLocation"
1947 var getBasePath = function() {
1949 var expectedBase = "webgl-test-utils.js";
1950 var scripts = document.getElementsByTagName('script');
1951 for (var script, i = 0; script = scripts[i]; i++) {
1952 var src = script.src;
1954 if (src.substr(l - expectedBase.length) == expectedBase) {
1955 basePath = src.substr(0, l - expectedBase.length);
1962 var loadStandardVertexShader = function(gl) {
1963 return loadShaderFromFile(
1964 gl, getBasePath() + "vertexShader.vert", gl.VERTEX_SHADER);
1967 var loadStandardFragmentShader = function(gl) {
1968 return loadShaderFromFile(
1969 gl, getBasePath() + "fragmentShader.frag", gl.FRAGMENT_SHADER);
1973 * Loads an image asynchronously.
1974 * @param {string} url URL of image to load.
1975 * @param {!function(!Element): void} callback Function to call
1976 * with loaded image.
1978 var loadImageAsync = function(url, callback) {
1979 var img = document.createElement('img');
1980 img.onload = function() {
1987 * Loads an array of images.
1988 * @param {!Array.<string>} urls URLs of images to load.
1989 * @param {!function(!{string, img}): void} callback. Callback
1990 * that gets passed map of urls to img tags.
1992 var loadImagesAsync = function(urls, callback) {
1995 function countDown() {
1998 log("loadImagesAsync: all images loaded");
2002 function imageLoaded(url) {
2003 return function(img) {
2005 log("loadImagesAsync: loaded " + url);
2009 for (var ii = 0; ii < urls.length; ++ii) {
2011 loadImageAsync(urls[ii], imageLoaded(urls[ii]));
2017 * Returns a map of key=value values from url.
2018 * @return {!Object.<string, number>} map of keys to values.
2020 var getUrlArguments = function() {
2023 var s = window.location.href;
2024 var q = s.indexOf("?");
2025 var e = s.indexOf("#");
2029 var query = s.substring(q + 1, e);
2030 var pairs = query.split("&");
2031 for (var ii = 0; ii < pairs.length; ++ii) {
2032 var keyValue = pairs[ii].split("=");
2033 var key = keyValue[0];
2034 var value = decodeURIComponent(keyValue[1]);
2038 throw "could not parse url";
2044 * Makes an image from a src.
2045 * @param {string} src Image source URL.
2046 * @param {function} onload Callback to call when the image has finised loading.
2047 * @param {function} onerror Callback to call when an error occurs.
2048 * @return {!Image} The created image.
2050 var makeImage = function(src, onload, onerror) {
2051 var img = document.createElement('img');
2053 img.onload = onload;
2056 img.onerror = onerror;
2058 img.onerror = function() {
2059 log("WARNING: creating image failed; src: " + this.src);
2069 * Makes an image element from a canvas.
2070 * @param {!HTMLCanvas} canvas Canvas to make image from.
2071 * @param {function} onload Callback to call when the image has finised loading.
2072 * @param {string} imageFormat Image format to be passed to toDataUrl().
2073 * @return {!Image} The created image.
2075 var makeImageFromCanvas = function(canvas, onload, imageFormat) {
2076 return makeImage(canvas.toDataURL(imageFormat), onload);
2080 * Makes a video element from a src.
2081 * @param {string} src Video source URL.
2082 * @param {function} onerror Callback to call when an error occurs.
2083 * @return {!Video} The created video.
2085 var makeVideo = function(src, onerror) {
2086 var vid = document.createElement('video');
2088 vid.onerror = onerror;
2090 vid.onerror = function() {
2091 log("WARNING: creating video failed; src: " + this.src);
2101 * Inserts an image with a caption into 'element'.
2102 * @param {!HTMLElement} element Element to append image to.
2103 * @param {string} caption caption to associate with image.
2104 * @param {!Image) img image to insert.
2106 var insertImage = function(element, caption, img) {
2107 var div = document.createElement("div");
2108 div.appendChild(img);
2109 var label = document.createElement("div");
2110 label.appendChild(document.createTextNode(caption));
2111 div.appendChild(label);
2112 element.appendChild(div);
2116 * Inserts a 'label' that when clicked expands to the pre formatted text
2117 * supplied by 'source'.
2118 * @param {!HTMLElement} element element to append label to.
2119 * @param {string} label label for anchor.
2120 * @param {string} source preformatted text to expand to.
2121 * @param {string} opt_url URL of source. If provided a link to the source file
2122 * will also be added.
2124 var addShaderSource = function(element, label, source, opt_url) {
2125 var div = document.createElement("div");
2126 var s = document.createElement("pre");
2127 s.className = "shader-source";
2128 s.style.display = "none";
2129 var ol = document.createElement("ol");
2130 //s.appendChild(document.createTextNode(source));
2131 var lines = source.split("\n");
2132 for (var ii = 0; ii < lines.length; ++ii) {
2133 var line = lines[ii];
2134 var li = document.createElement("li");
2135 li.appendChild(document.createTextNode(line));
2139 var l = document.createElement("a");
2140 l.href = "show-shader-source";
2141 l.appendChild(document.createTextNode(label));
2142 l.addEventListener('click', function(event) {
2143 if (event.preventDefault) {
2144 event.preventDefault();
2146 s.style.display = (s.style.display == 'none') ? 'block' : 'none';
2151 var u = document.createElement("a");
2153 div.appendChild(document.createTextNode(" "));
2154 u.appendChild(document.createTextNode("(" + opt_url + ")"));
2158 element.appendChild(div);
2162 * Inserts labels that when clicked expand to show the original source of the
2163 * shader and also translated source of the shader, if that is available.
2164 * @param {WebGLRenderingContext} gl The WebGLRenderingContext to use.
2165 * @param {!HTMLElement} element element to append label to.
2166 * @param {string} label label for anchor.
2167 * @param {WebGLShader} shader Shader to show the sources for.
2168 * @param {string} shaderSource Original shader source.
2169 * @param {string} opt_url URL of source. If provided a link to the source file
2170 * will also be added.
2172 var addShaderSources = function(
2173 gl, element, label, shader, shaderSource, opt_url) {
2174 addShaderSource(element, label, shaderSource, opt_url);
2176 var debugShaders = gl.getExtension('WEBGL_debug_shaders');
2177 if (debugShaders && shader) {
2178 var translatedSource = debugShaders.getTranslatedShaderSource(shader);
2179 if (translatedSource != '') {
2180 addShaderSource(element, label + ' translated for driver', translatedSource);
2186 * Sends shader information to the server to be dumped into text files
2187 * when tests are run from within the test-runner harness.
2188 * @param {WebGLRenderingContext} gl The WebGLRenderingContext to use.
2189 * @param {string} url URL of current.
2190 * @param {string} passMsg Test description.
2191 * @param {object} vInfo Object containing vertex shader information.
2192 * @param {object} fInfo Object containing fragment shader information.
2194 var dumpShadersInfo = function(gl, url, passMsg, vInfo, fInfo) {
2195 var shaderInfo = {};
2196 shaderInfo.url = url;
2197 shaderInfo.testDescription = passMsg;
2198 shaderInfo.vLabel = vInfo.label;
2199 shaderInfo.vShouldCompile = vInfo.shaderSuccess;
2200 shaderInfo.vSource = vInfo.source;
2201 shaderInfo.fLabel = fInfo.label;
2202 shaderInfo.fShouldCompile = fInfo.shaderSuccess;
2203 shaderInfo.fSource = fInfo.source;
2204 shaderInfo.vTranslatedSource = null;
2205 shaderInfo.fTranslatedSource = null;
2206 var debugShaders = gl.getExtension('WEBGL_debug_shaders');
2209 shaderInfo.vTranslatedSource = debugShaders.getTranslatedShaderSource(vInfo.shader);
2211 shaderInfo.fTranslatedSource = debugShaders.getTranslatedShaderSource(fInfo.shader);
2214 var dumpShaderInfoRequest = new XMLHttpRequest();
2215 dumpShaderInfoRequest.open('POST', "/dumpShaderInfo", true);
2216 dumpShaderInfoRequest.setRequestHeader("Content-Type", "text/plain");
2217 dumpShaderInfoRequest.send(JSON.stringify(shaderInfo));
2220 // Add your prefix here.
2221 var browserPrefixes = [
2229 * Given an extension name like WEBGL_compressed_texture_s3tc
2230 * returns the name of the supported version extension, like
2231 * WEBKIT_WEBGL_compressed_teture_s3tc
2232 * @param {string} name Name of extension to look for.
2233 * @return {string} name of extension found or undefined if not
2236 var getSupportedExtensionWithKnownPrefixes = function(gl, name) {
2237 var supported = gl.getSupportedExtensions();
2238 for (var ii = 0; ii < browserPrefixes.length; ++ii) {
2239 var prefixedName = browserPrefixes[ii] + name;
2240 if (supported.indexOf(prefixedName) >= 0) {
2241 return prefixedName;
2247 * Given an extension name like WEBGL_compressed_texture_s3tc
2248 * returns the supported version extension, like
2249 * WEBKIT_WEBGL_compressed_teture_s3tc
2250 * @param {string} name Name of extension to look for.
2251 * @return {WebGLExtension} The extension or undefined if not
2254 var getExtensionWithKnownPrefixes = function(gl, name) {
2255 for (var ii = 0; ii < browserPrefixes.length; ++ii) {
2256 var prefixedName = browserPrefixes[ii] + name;
2257 var ext = gl.getExtension(prefixedName);
2265 * Returns possible prefixed versions of an extension's name.
2266 * @param {string} name Name of extension. May already include a prefix.
2267 * @return {Array.<string>} Variations of the extension name with known
2270 var getExtensionPrefixedNames = function(name) {
2271 var unprefix = function(name) {
2272 for (var ii = 0; ii < browserPrefixes.length; ++ii) {
2273 if (browserPrefixes[ii].length > 0 &&
2274 name.substring(0, browserPrefixes[ii].length).toLowerCase() ===
2275 browserPrefixes[ii].toLowerCase()) {
2276 return name.substring(browserPrefixes[ii].length);
2282 var unprefixed = unprefix(name);
2284 var variations = [];
2285 for (var ii = 0; ii < browserPrefixes.length; ++ii) {
2286 variations.push(browserPrefixes[ii] + unprefixed);
2292 var replaceRE = /\$\((\w+)\)/g;
2295 * Replaces strings with property values.
2296 * Given a string like "hello $(first) $(last)" and an object
2297 * like {first:"John", last:"Smith"} will return
2298 * "hello John Smith".
2299 * @param {string} str String to do replacements in.
2300 * @param {...} 1 or more objects containing properties.
2302 var replaceParams = function(str) {
2303 var args = arguments;
2304 return str.replace(replaceRE, function(str, p1, offset, s) {
2305 for (var ii = 1; ii < args.length; ++ii) {
2306 if (args[ii][p1] !== undefined) {
2307 return args[ii][p1];
2310 throw "unknown string param '" + p1 + "'";
2314 var upperCaseFirstLetter = function(str) {
2315 return str.substring(0, 1).toUpperCase() + str.substring(1);
2319 * Gets a prefixed property. For example,
2321 * var fn = getPrefixedProperty(
2323 * "requestAnimationFrame");
2325 * Will return either:
2326 * "window.requestAnimationFrame",
2327 * "window.oRequestAnimationFrame",
2328 * "window.msRequestAnimationFrame",
2329 * "window.mozRequestAnimationFrame",
2330 * "window.webKitRequestAnimationFrame",
2333 * the non-prefixed function is tried first.
2335 var propertyPrefixes = ["", "moz", "ms", "o", "webkit"];
2336 var getPrefixedProperty = function(obj, propertyName) {
2337 for (var ii = 0; ii < propertyPrefixes.length; ++ii) {
2338 var prefix = propertyPrefixes[ii];
2339 var name = prefix + propertyName;
2341 var property = obj[name];
2346 propertyName = upperCaseFirstLetter(propertyName);
2352 var _requestAnimFrame;
2355 * Provides requestAnimationFrame in a cross browser way.
2357 var requestAnimFrame = function(callback) {
2358 if (!_requestAnimFrame) {
2359 _requestAnimFrame = getPrefixedProperty(window, "requestAnimationFrame") ||
2360 function(callback, element) {
2361 return window.setTimeout(callback, 1000 / 70);
2364 log("requestAnimFrame: document.hidden = " + document.hidden);
2365 _requestAnimFrame.call(window, callback);
2368 var _cancelAnimFrame;
2371 * Provides cancelAnimationFrame in a cross browser way.
2373 var cancelAnimFrame = function(request) {
2374 if (!_cancelAnimFrame) {
2375 _cancelAnimFrame = getPrefixedProperty(window, "cancelAnimationFrame") ||
2376 window.clearTimeout;
2378 _cancelAnimFrame.call(window, request);
2382 * Provides requestFullScreen in a cross browser way.
2384 var requestFullScreen = function(element) {
2385 var fn = getPrefixedProperty(element, "requestFullScreen");
2392 * Provides cancelFullScreen in a cross browser way.
2394 var cancelFullScreen = function() {
2395 var fn = getPrefixedProperty(document, "cancelFullScreen");
2401 var fullScreenStateName;
2403 var fullScreenStateNames = [
2407 for (var ii = 0; ii < fullScreenStateNames.length; ++ii) {
2408 var propertyName = fullScreenStateNames[ii];
2409 for (var jj = 0; jj < propertyPrefixes.length; ++jj) {
2410 var prefix = propertyPrefixes[jj];
2411 if (prefix.length) {
2412 propertyName = upperCaseFirstLetter(propertyName);
2413 fullScreenStateName = prefix + propertyName;
2414 if (document[fullScreenStateName] !== undefined) {
2419 fullScreenStateName = undefined;
2424 * @return {boolean} True if fullscreen mode is active.
2426 var getFullScreenState = function() {
2427 log("fullscreenstatename:" + fullScreenStateName);
2428 log(document[fullScreenStateName]);
2429 return document[fullScreenStateName];
2433 * @param {!HTMLElement} element The element to go fullscreen.
2434 * @param {!function(boolean)} callback A function that will be called
2435 * when entering/exiting fullscreen. It is passed true if
2436 * entering fullscreen, false if exiting.
2438 var onFullScreenChange = function(element, callback) {
2439 propertyPrefixes.forEach(function(prefix) {
2440 var eventName = prefix + "fullscreenchange";
2441 log("addevent: " + eventName);
2442 document.addEventListener(eventName, function(event) {
2443 log("event: " + eventName);
2444 callback(getFullScreenState());
2450 * @param {!string} buttonId The id of the button that will toggle fullscreen
2452 * @param {!string} fullscreenId The id of the element to go fullscreen.
2453 * @param {!function(boolean)} callback A function that will be called
2454 * when entering/exiting fullscreen. It is passed true if
2455 * entering fullscreen, false if exiting.
2456 * @return {boolean} True if fullscreen mode is supported.
2458 var setupFullscreen = function(buttonId, fullscreenId, callback) {
2459 if (!fullScreenStateName) {
2463 var fullscreenElement = document.getElementById(fullscreenId);
2464 onFullScreenChange(fullscreenElement, callback);
2466 var toggleFullScreen = function(event) {
2467 if (getFullScreenState()) {
2468 cancelFullScreen(fullscreenElement);
2470 requestFullScreen(fullscreenElement);
2472 event.preventDefault();
2476 var buttonElement = document.getElementById(buttonId);
2477 buttonElement.addEventListener('click', toggleFullScreen);
2483 * Waits for the browser to composite the web page.
2484 * @param {function()} callback A function to call after compositing has taken
2487 var waitForComposite = function(callback) {
2489 var countDown = function() {
2491 log("waitForComposite: callback");
2494 log("waitForComposite: countdown(" + frames + ")");
2496 requestAnimFrame.call(window, countDown);
2503 * Runs an array of functions, yielding to the browser between each step.
2504 * If you want to know when all the steps are finished add a last step.
2505 * @param {!Array.<function(): void>} steps. Array of functions.
2507 var runSteps = function(steps) {
2508 if (!steps.length) {
2512 // copy steps so they can't be modifed.
2513 var stepsToRun = steps.slice();
2514 var currentStep = 0;
2515 var runNextStep = function() {
2516 stepsToRun[currentStep++]();
2517 if (currentStep < stepsToRun.length) {
2518 setTimeout(runNextStep, 1);
2525 * Starts playing a video and waits for it to be consumable.
2526 * @param {!HTMLVideoElement} video An HTML5 Video element.
2527 * @param {!function(!HTMLVideoElement): void>} callback Function to call when
2530 var startPlayingAndWaitForVideo = function(video, callback) {
2531 var gotPlaying = false;
2532 var gotTimeUpdate = false;
2534 var maybeCallCallback = function() {
2535 if (gotPlaying && gotTimeUpdate && callback) {
2537 callback = undefined;
2538 video.removeEventListener('playing', playingListener, true);
2539 video.removeEventListener('timeupdate', timeupdateListener, true);
2543 var playingListener = function() {
2545 maybeCallCallback();
2548 var timeupdateListener = function() {
2549 // Checking to make sure the current time has advanced beyond
2550 // the start time seems to be a reliable heuristic that the
2551 // video element has data that can be consumed.
2552 if (video.currentTime > 0.0) {
2553 gotTimeUpdate = true;
2554 maybeCallCallback();
2558 video.addEventListener('playing', playingListener, true);
2559 video.addEventListener('timeupdate', timeupdateListener, true);
2564 var getHost = function(url) {
2565 url = url.replace("\\", "/");
2566 var pos = url.indexOf("://");
2568 url = url.substr(pos + 3);
2570 var parts = url.split('/');
2574 // This function returns the last 2 words of the domain of a URL
2575 // This is probably not the correct check but it will do for now.
2576 var getBaseDomain = function(host) {
2577 var parts = host.split(":");
2578 var hostname = parts[0];
2579 var port = parts[1] || "80";
2580 parts = hostname.split(".");
2581 if(parts.length < 2)
2582 return hostname + ":" + port;
2583 var tld = parts[parts.length-1];
2584 var domain = parts[parts.length-2];
2585 return domain + "." + tld + ":" + port;
2588 var runningOnLocalhost = function() {
2589 return window.location.hostname.indexOf("localhost") != -1 ||
2590 window.location.hostname.indexOf("127.0.0.1") != -1;
2593 var getLocalCrossOrigin = function() {
2595 if (window.location.host.indexOf("localhost") != -1) {
2596 domain = "127.0.0.1";
2598 domain = "localhost";
2601 var port = window.location.port || "80";
2602 return window.location.protocol + "//" + domain + ":" + port
2605 var getRelativePath = function(path) {
2606 var relparts = window.location.pathname.split("/");
2607 relparts.pop(); // Pop off filename
2608 var pathparts = path.split("/");
2611 for (i = 0; i < pathparts.length; ++i) {
2612 switch (pathparts[i]) {
2619 relparts.push(pathparts[i]);
2624 return relparts.join("/");
2627 var setupImageForCrossOriginTest = function(img, imgUrl, localUrl, callback) {
2628 window.addEventListener("load", function() {
2629 if (typeof(img) == "string")
2630 img = document.querySelector(img);
2634 img.addEventListener("load", callback, false);
2635 img.addEventListener("error", callback, false);
2637 if (runningOnLocalhost())
2638 img.src = getLocalCrossOrigin() + getRelativePath(localUrl);
2640 img.src = getUrlOptions().imgUrl || imgUrl;
2645 addShaderSource: addShaderSource,
2646 addShaderSources: addShaderSources,
2647 cancelAnimFrame: cancelAnimFrame,
2648 create3DContext: create3DContext,
2649 create3DContextWithWrapperThatThrowsOnGLError:
2650 create3DContextWithWrapperThatThrowsOnGLError,
2651 checkAreaInAndOut: checkAreaInAndOut,
2652 checkCanvas: checkCanvas,
2653 checkCanvasRect: checkCanvasRect,
2654 checkCanvasRectColor: checkCanvasRectColor,
2655 checkTextureSize: checkTextureSize,
2656 clipToRange: clipToRange,
2657 createColoredTexture: createColoredTexture,
2658 createProgram: createProgram,
2659 clearAndDrawUnitQuad: clearAndDrawUnitQuad,
2660 clearAndDrawIndexedQuad: clearAndDrawIndexedQuad,
2661 drawUnitQuad: drawUnitQuad,
2662 drawIndexedQuad: drawIndexedQuad,
2663 drawUByteColorQuad: drawUByteColorQuad,
2664 drawFloatColorQuad: drawFloatColorQuad,
2665 dumpShadersInfo: dumpShadersInfo,
2667 fillTexture: fillTexture,
2668 getBytesPerComponent: getBytesPerComponent,
2669 getExtensionPrefixedNames: getExtensionPrefixedNames,
2670 getExtensionWithKnownPrefixes: getExtensionWithKnownPrefixes,
2671 getFileListAsync: getFileListAsync,
2672 getLastError: getLastError,
2673 getPrefixedProperty: getPrefixedProperty,
2674 getScript: getScript,
2675 getSupportedExtensionWithKnownPrefixes: getSupportedExtensionWithKnownPrefixes,
2676 getTypedArrayElementsPerPixel: getTypedArrayElementsPerPixel,
2677 getUrlArguments: getUrlArguments,
2678 getUrlOptions: getUrlOptions,
2679 getAttribMap: getAttribMap,
2680 getUniformMap: getUniformMap,
2681 glEnumToString: glEnumToString,
2682 glErrorShouldBe: glErrorShouldBe,
2683 glTypeToTypedArrayType: glTypeToTypedArrayType,
2684 hasAttributeCaseInsensitive: hasAttributeCaseInsensitive,
2685 insertImage: insertImage,
2686 loadImageAsync: loadImageAsync,
2687 loadImagesAsync: loadImagesAsync,
2688 loadProgram: loadProgram,
2689 loadProgramFromFile: loadProgramFromFile,
2690 loadProgramFromScript: loadProgramFromScript,
2691 loadProgramFromScriptExpectError: loadProgramFromScriptExpectError,
2692 loadShader: loadShader,
2693 loadShaderFromFile: loadShaderFromFile,
2694 loadShaderFromScript: loadShaderFromScript,
2695 loadStandardProgram: loadStandardProgram,
2696 loadStandardVertexShader: loadStandardVertexShader,
2697 loadStandardFragmentShader: loadStandardFragmentShader,
2698 loadTextFileAsync: loadTextFileAsync,
2699 loadTexture: loadTexture,
2701 loggingOff: loggingOff,
2702 makeImage: makeImage,
2703 makeImageFromCanvas: makeImageFromCanvas,
2704 makeVideo: makeVideo,
2706 shallowCopyObject: shallowCopyObject,
2707 setupColorQuad: setupColorQuad,
2708 setupProgram: setupProgram,
2709 setupQuad: setupQuad,
2710 setupIndexedQuad: setupIndexedQuad,
2711 setupIndexedQuadWithOptions: setupIndexedQuadWithOptions,
2712 setupSimpleColorFragmentShader: setupSimpleColorFragmentShader,
2713 setupSimpleColorVertexShader: setupSimpleColorVertexShader,
2714 setupSimpleColorProgram: setupSimpleColorProgram,
2715 setupSimpleTextureFragmentShader: setupSimpleTextureFragmentShader,
2716 setupSimpleTextureProgram: setupSimpleTextureProgram,
2717 setupSimpleTextureVertexShader: setupSimpleTextureVertexShader,
2718 setupSimpleVertexColorFragmentShader: setupSimpleVertexColorFragmentShader,
2719 setupSimpleVertexColorProgram: setupSimpleVertexColorProgram,
2720 setupSimpleVertexColorVertexShader: setupSimpleVertexColorVertexShader,
2721 setupNoTexCoordTextureProgram: setupNoTexCoordTextureProgram,
2722 setupNoTexCoordTextureVertexShader: setupNoTexCoordTextureVertexShader,
2723 setupTexturedQuad: setupTexturedQuad,
2724 setupTexturedQuadWithTexCoords: setupTexturedQuadWithTexCoords,
2725 setupUnitQuad: setupUnitQuad,
2726 setupUnitQuadWithTexCoords: setupUnitQuadWithTexCoords,
2727 setFloatDrawColor: setFloatDrawColor,
2728 setUByteDrawColor: setUByteDrawColor,
2729 startPlayingAndWaitForVideo: startPlayingAndWaitForVideo,
2730 startsWith: startsWith,
2731 shouldGenerateGLError: shouldGenerateGLError,
2733 readFileList: readFileList,
2734 replaceParams: replaceParams,
2735 requestAnimFrame: requestAnimFrame,
2737 waitForComposite: waitForComposite,
2740 setupFullscreen: setupFullscreen,
2743 getBaseDomain: getBaseDomain,
2744 runningOnLocalhost: runningOnLocalhost,
2745 getLocalCrossOrigin: getLocalCrossOrigin,
2746 getRelativePath: getRelativePath,
2747 setupImageForCrossOriginTest: setupImageForCrossOriginTest,