├── src ├── webgl-lint.js ├── wrap.js ├── parse-stack.js ├── check-framebuffer-feedback.js ├── vertex-array-manager.js ├── check-attributes-buffer-overflow.js ├── samplers.js └── utils.js ├── .gitignore ├── .eslintignore ├── .npmignore ├── webgl-lint.png ├── test ├── mocha-support.js ├── tests │ ├── wrong-number-of-arguments-tests.js │ ├── extension-enum-tests.js │ ├── drawing-test.js │ ├── data-view-tests.js │ ├── uniform-mismatch-tests.js │ ├── uniform-buffer-tests.js │ ├── uniform-type-tests.js │ ├── enum-tests.js │ ├── draw-reports-program-and-vao-tests.js │ ├── ignore-uniforms-tests.js │ ├── framebuffer-feedback-tests.js │ ├── report-vao-tests.js │ ├── untagged-objects-tests.js │ ├── disable-tests.js │ ├── program-delete-tests.js │ ├── uniformXXv-tests.js │ ├── bad-data-tests.js │ ├── naming-tests.js │ ├── arrays-with-offsets-tests.js │ ├── buffer-tests.js │ ├── zero-matrix-tests.js │ ├── shader-fail-tests.js │ ├── recommended-extensions.js │ ├── unset-uniform-tests.js │ ├── undefined-uniform-tests.js │ ├── buffer-overflow-tests.js │ ├── redundant-state-tests.js │ └── unrenderable-texture-tests.js ├── index.js ├── webgl.js ├── index.html ├── assert.js └── mocha.css ├── rollup.config.js ├── .vscode └── settings.json ├── package.json ├── webgl-lint-check-redundant-state-setting.js ├── LICENSE.md ├── .eslintrc.js └── README.md /src/webgl-lint.js: -------------------------------------------------------------------------------- 1 | import './wrap.js'; 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.pyc 2 | .DS_Store 3 | node_modules 4 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | test/js 2 | test/mocha.js 3 | /webgl-lint.js -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | test 2 | src 3 | rollup.config.js 4 | .* 5 | *.png 6 | -------------------------------------------------------------------------------- /webgl-lint.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/greggman/webgl-lint/HEAD/webgl-lint.png -------------------------------------------------------------------------------- /test/mocha-support.js: -------------------------------------------------------------------------------- 1 | /* global window */ 2 | 3 | export const describe = window.describe; 4 | export const it = window.it; 5 | export const before = window.before; 6 | export const after = window.after; 7 | export const beforeEach = window.beforeEach; 8 | export const afterEach = window.afterEach; 9 | 10 | -------------------------------------------------------------------------------- /test/tests/wrong-number-of-arguments-tests.js: -------------------------------------------------------------------------------- 1 | import {createContext} from '../webgl.js'; 2 | import {assertThrowsWith} from '../assert.js'; 3 | import {describe, it} from '../mocha-support.js'; 4 | 5 | describe('wrong number of arguments test', () => { 6 | 7 | it('test wrong number of args', () => { 8 | const {gl} = createContext(); 9 | assertThrowsWith(() => { 10 | gl.enable(gl.DEPTH_TEST, 0); // wrong number of args 11 | }, [/'enable'.*?2 arguments/]); 12 | }); 13 | 14 | }); -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import resolve from 'rollup-plugin-node-resolve'; 2 | import fs from 'fs'; 3 | 4 | const pkg = JSON.parse(fs.readFileSync('package.json', {encoding: 'utf8'})); 5 | const banner = `/* webgl-lint@${pkg.version}, license MIT */`; 6 | 7 | export default [ 8 | { 9 | input: 'src/webgl-lint.js', 10 | plugins: [ 11 | resolve({ 12 | modulesOnly: true, 13 | }), 14 | ], 15 | output: [ 16 | { 17 | format: 'umd', 18 | file: 'webgl-lint.js', 19 | indent: ' ', 20 | banner, 21 | }, 22 | ], 23 | }, 24 | ]; 25 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "cSpell.words": [ 3 | "Bufferfi", 4 | "Bufferfv", 5 | "Bufferiv", 6 | "Bufferuiv", 7 | "bvec", 8 | "camelcase", 9 | "eqeqeq", 10 | "framebuffer", 11 | "gman", 12 | "highp", 13 | "isampler", 14 | "mediump", 15 | "minmax", 16 | "Multisample", 17 | "nonwords", 18 | "phong", 19 | "proto", 20 | "Renderability", 21 | "Renderbuffers", 22 | "SNORM", 23 | "SRGB", 24 | "Unrenderability", 25 | "unrenderable", 26 | "untagging", 27 | "usampler", 28 | "uvec", 29 | "webgl" 30 | ] 31 | } -------------------------------------------------------------------------------- /test/tests/extension-enum-tests.js: -------------------------------------------------------------------------------- 1 | import {createContext} from '../webgl.js'; 2 | import {assertThrowsWith} from '../assert.js'; 3 | import {describe, it} from '../mocha-support.js'; 4 | 5 | describe('extension enum test', () => { 6 | 7 | it('test extension enums', () => { 8 | const {gl} = createContext(); 9 | const ext = gl.getExtension('OES_standard_derivatives'); 10 | if (!ext) { 11 | throw new Error('FRAGMENT_SHADER_DERIVATIVE_HINT_OES'); 12 | } 13 | assertThrowsWith(() => { 14 | gl.enable(ext.FRAGMENT_SHADER_DERIVATIVE_HINT_OES); 15 | }, [/FRAGMENT_SHADER_DERIVATIVE_HINT_OES/]); 16 | }); 17 | 18 | }); -------------------------------------------------------------------------------- /test/tests/drawing-test.js: -------------------------------------------------------------------------------- 1 | import * as twgl from '../js/twgl-full.module.js'; 2 | import {describe, it} from '../mocha-support.js'; 3 | import {createContext} from '../webgl.js'; 4 | 5 | describe('test drawing', () => { 6 | it('draws', () => { 7 | const {gl, tagObject} = createContext(); 8 | const prg = twgl.createProgram(gl, [ 9 | ` 10 | void main() { 11 | gl_Position = vec4(0, 0, 0, 1); 12 | gl_PointSize = 128.0; 13 | } 14 | `, 15 | ` 16 | precision mediump float; 17 | uniform vec4 pointColor; 18 | void main() { 19 | gl_FragColor = pointColor; 20 | } 21 | `, 22 | ]); 23 | tagObject(prg, 'point program'); 24 | gl.useProgram(prg); 25 | const loc = gl.getUniformLocation(prg, 'pointColor'); 26 | gl.uniform4fv(loc, [1, 0.7, .5, 1]); 27 | gl.drawArrays(gl.POINTS, 0, 1); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /test/tests/data-view-tests.js: -------------------------------------------------------------------------------- 1 | import {createContext} from '../webgl.js'; 2 | import {assertThrowsWith} from '../assert.js'; 3 | import {describe, it} from '../mocha-support.js'; 4 | 5 | describe('DataView tests', () => { 6 | 7 | it('test good data with DataView', () => { 8 | const {gl, tagObject} = createContext(); 9 | const buf = gl.createBuffer(); 10 | tagObject(buf, 'positions-buffer'); 11 | gl.bindBuffer(gl.ARRAY_BUFFER, buf); 12 | gl.bufferData(gl.ARRAY_BUFFER, new DataView(new ArrayBuffer(13)), gl.STATIC_DRAW); 13 | }); 14 | 15 | it('test bad enum with DataView', () => { 16 | const {gl, tagObject} = createContext(); 17 | const buf = gl.createBuffer(); 18 | tagObject(buf, 'positions-buffer'); 19 | gl.bindBuffer(gl.ARRAY_BUFFER, buf); 20 | assertThrowsWith(() => { 21 | gl.bufferData(gl.ARRAY_BUFFER, new DataView(new ArrayBuffer(13)), gl.BLEND); 22 | }, [/positions-buffer/, /INVALID_ENUM/, /DataView/]); 23 | }); 24 | }); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webgl-lint", 3 | "version": "1.11.4", 4 | "description": "A semi strict WebGL checker", 5 | "main": "webgl-lint.js", 6 | "scripts": { 7 | "build": "rollup -c", 8 | "eslint": "eslint \"**/*.js\"", 9 | "pre-push": "npm run eslint", 10 | "test": "echo \"Error: no test specified\" && exit 1" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "git+https://github.com/greggman/webgl-lint.git" 15 | }, 16 | "keywords": [ 17 | "webgl" 18 | ], 19 | "author": "Gregg Tavares", 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/greggman/webgl-lint/issues" 23 | }, 24 | "homepage": "https://github.com/greggman/webgl-lint#readme", 25 | "devDependencies": { 26 | "eslint": "^7.5.0", 27 | "eslint-plugin-html": "^6.0.2", 28 | "eslint-plugin-optional-comma-spacing": "0.0.4", 29 | "eslint-plugin-require-trailing-comma": "0.0.1", 30 | "rollup": "^2.23.0", 31 | "rollup-plugin-node-resolve": "^5.2.0" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /test/tests/uniform-mismatch-tests.js: -------------------------------------------------------------------------------- 1 | import * as twgl from '../js/twgl-full.module.js'; 2 | import assert from '../assert.js'; 3 | import {describe, it} from '../mocha-support.js'; 4 | import {createContext} from '../webgl.js'; 5 | 6 | describe('uniform mismatch tests', () => { 7 | it('test uniform mis-match', () => { 8 | const {gl, tagObject} = createContext(); 9 | const prg = twgl.createProgram(gl, [ 10 | ` 11 | void main() { 12 | gl_Position = vec4(0, 0, 0, 1); 13 | } 14 | `, 15 | ` 16 | precision mediump float; 17 | uniform vec4 pointColor; 18 | void main() { 19 | gl_FragColor = pointColor; 20 | } 21 | `, 22 | ]); 23 | tagObject(prg, 'point program'); 24 | gl.useProgram(prg); 25 | const loc = gl.getUniformLocation(prg, 'pointColor'); 26 | assert.throwsWith(() => { 27 | gl.uniform3fv(loc, [1, 0.7, .5]); // error, needs to be 4fv 28 | }, [/vec4 which is wrong for uniform3fv/]); 29 | }); 30 | 31 | }); -------------------------------------------------------------------------------- /test/tests/uniform-buffer-tests.js: -------------------------------------------------------------------------------- 1 | import * as twgl from '../js/twgl-full.module.js'; 2 | import {assertEqual} from '../assert.js'; 3 | import {describe, it} from '../mocha-support.js'; 4 | import {createContext2} from '../webgl.js'; 5 | 6 | describe('uniform buffer tests', () => { 7 | 8 | it('test it does not warn about uniforms in UBOs when linking', () => { 9 | const {gl, ext, tagObject} = createContext2(); 10 | ext.setConfiguration({failUndefinedUniforms: true}); 11 | const prg = twgl.createProgram(gl, [ 12 | `#version 300 es 13 | uniform Foo { 14 | vec4 bar; 15 | vec4 moo; 16 | }; 17 | 18 | void main() { 19 | gl_Position = bar + moo; 20 | } 21 | `, 22 | `#version 300 es 23 | precision mediump float; 24 | uniform vec4 pointColor; 25 | out vec4 fragColor; 26 | void main() { 27 | fragColor = pointColor; 28 | } 29 | `, 30 | ]); 31 | tagObject(prg, 'ubo program'); 32 | gl.useProgram(prg); 33 | assertEqual(gl.getError(), gl.NO_ERROR); 34 | }); 35 | 36 | 37 | }); -------------------------------------------------------------------------------- /test/tests/uniform-type-tests.js: -------------------------------------------------------------------------------- 1 | import * as twgl from '../js/twgl-full.module.js'; 2 | import {assertThrowsWith} from '../assert.js'; 3 | import {describe, it} from '../mocha-support.js'; 4 | import {createContext} from '../webgl.js'; 5 | 6 | describe('uniform type tests', () => { 7 | 8 | it('test uniform fails if array of arrays passed to v func', () => { 9 | const {gl, tagObject} = createContext(); 10 | const prg = twgl.createProgram(gl, [ 11 | ` 12 | void main() { 13 | gl_Position = vec4(0, 0, 0, 1); 14 | } 15 | `, 16 | ` 17 | precision mediump float; 18 | uniform vec3 pointColor[4]; 19 | void main() { 20 | gl_FragColor = vec4(pointColor[3], 1); 21 | } 22 | `, 23 | ]); 24 | tagObject(prg, 'point program'); 25 | gl.useProgram(prg); 26 | const loc = gl.getUniformLocation(prg, 'pointColor'); 27 | const value = [ 28 | [1, 2, 3], 29 | [5, 6, 7], 30 | [9, 10, 11], 31 | [13, 14, 15], 32 | ]; 33 | assertThrowsWith(() => { 34 | gl.uniform3fv(loc, value); 35 | }, [/point program/, /pointColor/, /flat arrays/]); 36 | }); 37 | 38 | }); -------------------------------------------------------------------------------- /test/tests/enum-tests.js: -------------------------------------------------------------------------------- 1 | import {createContext} from '../webgl.js'; 2 | import {assertThrowsWith} from '../assert.js'; 3 | import {describe, it} from '../mocha-support.js'; 4 | 5 | describe('enum tests', () => { 6 | 7 | it('test bad enum 1', () => { 8 | const {gl} = createContext(); 9 | const buf = gl.createBuffer(); 10 | gl.bindBuffer(gl.ARRAY_BUFFER, buf); 11 | assertThrowsWith(() => { 12 | gl.vertexAttribPointer(0, 1, gl.BYE, false, 0, 0); // error 13 | }, [/argument.*?is undefined/]); 14 | }); 15 | 16 | it('test bad enum 2', () => { 17 | const {gl} = createContext(); 18 | gl.enable(gl.BLEND); 19 | assertThrowsWith(() => { 20 | gl.enable(gl.CULL_FADE); // error 21 | }, [/argument.*?is undefined/]); 22 | gl.enable(gl.DEPTH_TEST); 23 | }); 24 | 25 | it('test bad enum 3', () => { 26 | const {gl, tagObject} = createContext(); 27 | const tex = gl.createTexture(); 28 | tagObject(tex, 'depth-tex'); 29 | gl.bindTexture(gl.TEXTURE_2D, tex); 30 | assertThrowsWith(() => { 31 | gl.texImage2D(gl.TEXTURE_2D, 0, gl.DEPTH_COMPONENT16, 512, 256, 0, gl.DEPTH_COMPONENT16, gl.INT, null); // error 32 | }, [/depth-tex.*?INVALID_VALUE/]); 33 | }); 34 | 35 | }); -------------------------------------------------------------------------------- /test/tests/draw-reports-program-and-vao-tests.js: -------------------------------------------------------------------------------- 1 | import * as twgl from '../js/twgl-full.module.js'; 2 | import {assertThrowsWith} from '../assert.js'; 3 | import {describe, it} from '../mocha-support.js'; 4 | import {createContext2} from '../webgl.js'; 5 | 6 | describe('draw reports program and vao tests', () => { 7 | 8 | it('test drawArrays with bad enum reports program and vao', () => { 9 | const {gl, tagObject} = createContext2(); 10 | if (!gl) { 11 | throw new Error('drawArraysBE vaoBE'); 12 | } 13 | 14 | const vs = ` 15 | attribute vec4 position; 16 | 17 | void main() { 18 | gl_Position = position; 19 | } 20 | `; 21 | 22 | const fs = ` 23 | precision mediump float; 24 | void main() { 25 | gl_FragColor = vec4(0); 26 | } 27 | `; 28 | 29 | const vao = gl.createVertexArray(); 30 | // tagObject(vao, 'vaoBE'); 31 | gl.bindVertexArray(vao); 32 | const prg = twgl.createProgram(gl, [vs, fs]); 33 | tagObject(prg, 'drawArraysBE'); 34 | 35 | gl.useProgram(prg); 36 | assertThrowsWith(() => { 37 | gl.drawArrays(gl.TRAINGLES, 0, 1); // error, TRIANGLES misspelled. 38 | }, [/drawArraysBE/, /WebGLVertexArrayObject\("\*UNTAGGED:VertexArray1\*"\)/]); 39 | }); 40 | 41 | }); -------------------------------------------------------------------------------- /test/tests/ignore-uniforms-tests.js: -------------------------------------------------------------------------------- 1 | import * as twgl from '../js/twgl-full.module.js'; 2 | import {describe, it} from '../mocha-support.js'; 3 | import {createContext} from '../webgl.js'; 4 | 5 | describe('ignore uniforms test', () => { 6 | 7 | it('test ignore uniforms', () => { 8 | const {gl, ext, tagObject} = createContext(); 9 | if (ext) { 10 | ext.setConfiguration({ignoreUniforms: ['perspective']}); 11 | } 12 | const prg = twgl.createProgram(gl, [ 13 | ` 14 | attribute vec4 position; 15 | uniform mat4 perspective; 16 | uniform mat4 view; 17 | uniform mat4 model; 18 | void main() { 19 | gl_Position = perspective * view * model * position; 20 | } 21 | `, 22 | ` 23 | precision mediump float; 24 | void main() { 25 | gl_FragColor = vec4(0); 26 | } 27 | `, 28 | ]); 29 | tagObject(prg, 'uniforms-with-matrices'); 30 | gl.useProgram(prg); 31 | gl.uniformMatrix4fv(gl.getUniformLocation(prg, 'view'), false, new Float32Array([ 32 | 0, 0, 0, 0, 33 | 0, 0, 0, 0.00000001, 34 | 0, 0, 0, 0, 35 | 0, 0, 0, 0, 36 | ])); 37 | gl.uniformMatrix4fv(gl.getUniformLocation(prg, 'perspective'), false, new Float32Array([ 38 | 0, 0, 0, 0, 39 | 0, 0, 0, 0, 40 | 0, 0, 0, 0, 41 | 0, 0, 0, 0, 42 | ])); 43 | }); 44 | 45 | }); -------------------------------------------------------------------------------- /test/tests/framebuffer-feedback-tests.js: -------------------------------------------------------------------------------- 1 | import * as twgl from '../js/twgl-full.module.js'; 2 | import {assertThrowsWith} from '../assert.js'; 3 | import {describe, it} from '../mocha-support.js'; 4 | import {createContext} from '../webgl.js'; 5 | 6 | describe('framebuffer feedback tests', () => { 7 | 8 | it('test feedback check', () => { 9 | const {gl, tagObject} = createContext(); 10 | const vs = ` 11 | void main() { 12 | gl_Position = vec4(0, 0, 0, 1); 13 | gl_PointSize = 100.0; 14 | } 15 | `; 16 | 17 | const fs = ` 18 | precision mediump float; 19 | uniform sampler2D u_diffuse; 20 | void main() { 21 | gl_FragColor = texture2D(u_diffuse, vec2(0)); 22 | } 23 | `; 24 | 25 | const prg = twgl.createProgram(gl, [vs, fs]); 26 | tagObject(prg, 'fbPrg'); 27 | 28 | const tex = gl.createTexture(); 29 | tagObject(tex, 'fbTex'); 30 | gl.bindTexture(gl.TEXTURE_2D, tex); 31 | gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); 32 | 33 | const fb = gl.createFramebuffer(); 34 | tagObject(fb, 'fbTest'); 35 | gl.bindFramebuffer(gl.FRAMEBUFFER, fb); 36 | gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0); 37 | 38 | gl.useProgram(prg); 39 | assertThrowsWith(() => { 40 | gl.drawArrays(gl.POINTS, 0, 1); // feedback 41 | }, [/fbPrg/, /fbTex/, /fbTest/, /u_diffuse/, /COLOR_ATTACHMENT0/]); 42 | }); 43 | 44 | }); -------------------------------------------------------------------------------- /test/index.js: -------------------------------------------------------------------------------- 1 | /* global mocha */ 2 | /* global URLSearchParams */ 3 | /* global window */ 4 | 5 | import './tests/arrays-with-offsets-tests.js'; 6 | import './tests/bad-data-tests.js'; 7 | import './tests/buffer-tests.js'; 8 | import './tests/buffer-overflow-tests.js'; 9 | import './tests/data-view-tests.js'; 10 | import './tests/disable-tests.js'; 11 | import './tests/draw-reports-program-and-vao-tests.js'; 12 | import './tests/drawing-test.js'; 13 | import './tests/framebuffer-feedback-tests.js'; 14 | import './tests/enum-tests.js'; 15 | import './tests/extension-enum-tests.js'; 16 | import './tests/ignore-uniforms-tests.js'; 17 | import './tests/naming-tests.js'; 18 | import './tests/program-delete-tests.js'; 19 | import './tests/redundant-state-tests.js'; 20 | import './tests/report-vao-tests.js'; 21 | import './tests/shader-fail-tests.js'; 22 | import './tests/undefined-uniform-tests.js'; 23 | import './tests/uniform-buffer-tests.js'; 24 | import './tests/uniform-mismatch-tests.js'; 25 | import './tests/uniform-type-tests.js'; 26 | import './tests/uniformXXv-tests.js'; 27 | import './tests/untagged-objects-tests.js'; 28 | import './tests/unrenderable-texture-tests.js'; 29 | import './tests/unset-uniform-tests.js'; 30 | import './tests/wrong-number-of-arguments-tests.js'; 31 | import './tests/zero-matrix-tests.js'; 32 | 33 | const settings = Object.fromEntries(new URLSearchParams(window.location.search).entries()); 34 | if (settings.reporter) { 35 | mocha.reporter(settings.reporter); 36 | } 37 | mocha.run((failures) => { 38 | window.testsPromiseInfo.resolve(failures); 39 | }); 40 | -------------------------------------------------------------------------------- /test/tests/report-vao-tests.js: -------------------------------------------------------------------------------- 1 | import {assertThrowsWith} from '../assert.js'; 2 | import {describe, it} from '../mocha-support.js'; 3 | import {createContext} from '../webgl.js'; 4 | 5 | describe('report vao tests', () => { 6 | 7 | it('test vertex func reports vao', () => { 8 | const {gl, tagObject} = createContext(); 9 | const ext = gl.getExtension('OES_vertex_array_object'); 10 | if (!ext) { 11 | throw new Error('sphere-data'); // something to satisfy test. 12 | } 13 | const vao = ext.createVertexArrayOES(); 14 | tagObject(vao, 'sphere-data'); 15 | const buf = gl.createBuffer(); 16 | tagObject(buf, 'normals'); 17 | ext.bindVertexArrayOES(vao); 18 | gl.bindBuffer(gl.ARRAY_BUFFER, buf); 19 | assertThrowsWith(() => { 20 | gl.vertexAttribPointer(3, 5, gl.FLOAT, false, 0, 0); // error, size too large, INVALID_VALUE 21 | }, [/sphere-data/]); 22 | }); 23 | 24 | it('test vertex func reports vao 2', () => { 25 | const {gl, tagObject} = createContext(); 26 | const ext = gl.getExtension('OES_vertex_array_object'); 27 | if (!ext) { 28 | throw new Error('sphere-data'); // something to satisfy test. 29 | } 30 | const vao = ext.createVertexArrayOES(); 31 | tagObject(vao, 'sphere-data'); 32 | const buf = gl.createBuffer(); 33 | tagObject(buf, 'normals'); 34 | ext.bindVertexArrayOES(vao); 35 | gl.bindBuffer(gl.ARRAY_BUFFER, buf); 36 | assertThrowsWith(() => { 37 | gl.vertexAttribPointer(3, 4, gl.FLOATs, false, 0, 0); // error, undefined 38 | }, [/sphere-data/]); 39 | }); 40 | 41 | }); -------------------------------------------------------------------------------- /webgl-lint-check-redundant-state-setting.js: -------------------------------------------------------------------------------- 1 | /* eslint-env browser */ 2 | /* global WeakRef */ 3 | import './webgl-lint.js'; 4 | 5 | const glContextRefs = []; 6 | HTMLCanvasElement.prototype.getContext = (function(origFn) { 7 | return function(contextType, ...args) { 8 | const ctx = origFn.call(this, contextType, ...args); 9 | if (ctx && (contextType === 'webgl' || contextType === 'webgl2')) { 10 | if (glContextRefs.findIndex(ref => ref.deref() === ctx) < 0) { 11 | const ext = ctx.getExtension('GMAN_debug_helper'); 12 | ext.setConfiguration({maxDrawCalls: 0}); 13 | glContextRefs.push({ref: new WeakRef(ctx), ext}); 14 | } 15 | } 16 | return ctx; 17 | }; 18 | })(HTMLCanvasElement.prototype.getContext); 19 | 20 | window.requestAnimationFrame = (function(origFn) { 21 | return function(fn) { 22 | return origFn.call(this, (time) => { 23 | // add up all calls across contexts since we have no idea which contexts will render 24 | // Note: You could call getAndResetRedundantCallInfo yourself for your own context. 25 | const sums = {}; 26 | 27 | const refs = glContextRefs.filter(({ref}) => ref.deref()); 28 | glContextRefs.length = 0; 29 | glContextRefs.push(...refs); 30 | 31 | for (const {ext} of glContextRefs) { 32 | const info = ext.getAndResetRedundantCallInfo(); 33 | for (const [key, value] of Object.entries(info)) { 34 | sums[key] = (sums[key] || 0) + value; 35 | } 36 | } 37 | console.log('rc:', JSON.stringify(sums)); 38 | fn(time); 39 | }); 40 | }; 41 | })(window.requestAnimationFrame); -------------------------------------------------------------------------------- /test/tests/untagged-objects-tests.js: -------------------------------------------------------------------------------- 1 | import {assertThrowsWith} from '../assert.js'; 2 | import {describe, it} from '../mocha-support.js'; 3 | import {createContext, createContext2} from '../webgl.js'; 4 | 5 | describe('untagged objects test', () => { 6 | 7 | it('test untagged buffer is called UNTAGGED:BufferX', () => { 8 | const {gl} = createContext(); 9 | const buf1 = gl.createBuffer(); 10 | gl.bindBuffer(gl.ARRAY_BUFFER, buf1); 11 | assertThrowsWith(() => { 12 | gl.bufferData(gl.ARRAY_BUFFER, 3, gl.BLEND); 13 | }, [/\*UNTAGGED:Buffer1\*/]); 14 | const buf2 = gl.createBuffer(); 15 | gl.bindBuffer(gl.ARRAY_BUFFER, buf2); 16 | assertThrowsWith(() => { 17 | gl.bufferData(gl.ARRAY_BUFFER, 3, gl.BLEND); 18 | }, [/\*UNTAGGED:Buffer2\*/]); 19 | gl.bindBuffer(gl.ARRAY_BUFFER, buf1); 20 | assertThrowsWith(() => { 21 | gl.bufferData(gl.ARRAY_BUFFER, 3, gl.BLEND); 22 | }, [/\*UNTAGGED:Buffer1\*/]); 23 | }); 24 | 25 | it('test untagged buffer is uses *unnamed* if default names are off', () => { 26 | const {gl, ext} = createContext(); 27 | ext.setConfiguration({makeDefaultTags: false}); 28 | const buf1 = gl.createBuffer(); 29 | gl.bindBuffer(gl.ARRAY_BUFFER, buf1); 30 | assertThrowsWith(() => { 31 | gl.bufferData(gl.ARRAY_BUFFER, 3, gl.BLEND); 32 | }, [/\*unnamed\*/]); 33 | }); 34 | 35 | it('test untagged sync', () => { 36 | const {gl} = createContext2(); 37 | if (!gl) { 38 | return; 39 | } 40 | const sync = gl.fenceSync(gl.SYNC_GPU_COMMANDS_COMPLETE, 0); 41 | assertThrowsWith(() => { 42 | gl.clientWaitSync(sync, 0xFF, 0); 43 | }, [/\*UNTAGGED:Sync1\*/]); 44 | }); 45 | 46 | }); -------------------------------------------------------------------------------- /test/tests/disable-tests.js: -------------------------------------------------------------------------------- 1 | import * as twgl from '../js/twgl-full.module.js'; 2 | import {assertEqual, assertNotEqual} from '../assert.js'; 3 | import {describe, it} from '../mocha-support.js'; 4 | import {createContext} from '../webgl.js'; 5 | 6 | describe('disable tests', () => { 7 | 8 | it('test disable', () => { 9 | const {gl, ext, vaoExt} = createContext(); 10 | if (!ext) { 11 | return; 12 | } 13 | const before = gl.bufferData.toString(); 14 | const beforeVAO = vaoExt ? vaoExt.createVertexArrayOES.toString() : 'b4'; 15 | ext.disable(); 16 | const after = gl.bufferData.toString(); 17 | const afterVAO = vaoExt ? vaoExt.createVertexArrayOES.toString() : 'af'; 18 | assertNotEqual(before, after); 19 | assertNotEqual(beforeVAO, afterVAO); 20 | }); 21 | 22 | it('test disable on maxDrawCalls', () => { 23 | const {gl, ext} = createContext(); 24 | if (!ext) { 25 | return; 26 | } 27 | ext.setConfiguration({ 28 | maxDrawCalls: 2, 29 | }); 30 | 31 | const prg = twgl.createProgram(gl, [ 32 | ` 33 | void main() { 34 | gl_Position = vec4(0, 0, 0, 1); 35 | gl_PointSize = 128.0; 36 | } 37 | `, 38 | ` 39 | precision mediump float; 40 | void main() { 41 | gl_FragColor = vec4(0); 42 | } 43 | `, 44 | ]); 45 | gl.useProgram(prg); 46 | const before = gl.bufferData.toString(); 47 | gl.drawArrays(gl.POINTS, 0, 1); 48 | const between = gl.bufferData.toString(); 49 | assertEqual(before, between); 50 | gl.drawArrays(gl.POINTS, 0, 1); 51 | const after = gl.bufferData.toString(); 52 | assertNotEqual(before, after); 53 | }); 54 | 55 | }); -------------------------------------------------------------------------------- /test/tests/program-delete-tests.js: -------------------------------------------------------------------------------- 1 | import * as twgl from '../js/twgl-full.module.js'; 2 | import {describe, it} from '../mocha-support.js'; 3 | import {createContext} from '../webgl.js'; 4 | 5 | describe('program re-link/delete tests', () => { 6 | 7 | it('test program re-link/delete', () => { 8 | const {gl, tagObject} = createContext(); 9 | const vs = ` 10 | attribute vec4 position; 11 | attribute vec2 texcoord; 12 | attribute vec4 color; 13 | 14 | varying vec4 v_color; 15 | varying vec2 v_texcoord; 16 | 17 | void main() { 18 | gl_Position = position; 19 | v_color = color; 20 | v_texcoord = texcoord; 21 | } 22 | `; 23 | 24 | const fs = ` 25 | precision mediump float; 26 | 27 | varying vec4 v_color; 28 | varying vec2 v_texcoord; 29 | uniform float u_mult; 30 | 31 | uniform sampler2D u_diffuse; 32 | 33 | void main() { 34 | gl_FragColor = texture2D(u_diffuse, v_texcoord) * v_color * u_mult; 35 | } 36 | `; 37 | 38 | const prg = twgl.createProgram(gl, [vs, fs]); 39 | tagObject(prg, 'prgToDelete'); 40 | gl.linkProgram(prg); 41 | gl.deleteProgram(prg); 42 | 43 | const prg2 = twgl.createProgram(gl, [vs, fs]); 44 | tagObject(prg2, 'prgToDelete2'); 45 | gl.getUniformLocation(prg2, 'u_mult'); 46 | gl.getUniformLocation(prg2, 'u_mult'); // double lookup is intentional 47 | gl.getUniformLocation(prg2, 'u_diffuse'); 48 | gl.getUniformLocation(prg2, 'u_notExist'); 49 | gl.linkProgram(prg2); 50 | gl.getUniformLocation(prg2, 'u_mult'); 51 | gl.getUniformLocation(prg2, 'u_mult'); // double lookup is intentional 52 | gl.getUniformLocation(prg2, 'u_diffuse'); 53 | gl.getUniformLocation(prg2, 'u_notExist'); 54 | gl.deleteProgram(prg2); 55 | }); 56 | 57 | }); -------------------------------------------------------------------------------- /test/tests/uniformXXv-tests.js: -------------------------------------------------------------------------------- 1 | import * as twgl from '../js/twgl-full.module.js'; 2 | import {assertThrowsWith} from '../assert.js'; 3 | import {describe, it} from '../mocha-support.js'; 4 | import {createContext} from '../webgl.js'; 5 | 6 | describe('uniformXXv tests', () => { 7 | 8 | it('test arrays when uniformXXv has offset', () => { 9 | const {gl, tagObject} = createContext(); 10 | const prg = twgl.createProgram(gl, [ 11 | ` 12 | void main() { 13 | gl_Position = vec4(0, 0, 0, 1); 14 | } 15 | `, 16 | ` 17 | precision mediump float; 18 | uniform vec4 pointColor; 19 | void main() { 20 | gl_FragColor = pointColor; 21 | } 22 | `, 23 | ]); 24 | tagObject(prg, 'point program'); 25 | gl.useProgram(prg); 26 | const loc = gl.getUniformLocation(prg, 'pointColor'); 27 | const array = new Array(16).fill(1); 28 | array[13] = undefined; 29 | assertThrowsWith(() => { 30 | gl.uniform4fv(loc, array, 12); 31 | }, [/element 13 of argument 1 is undefined/]); 32 | }); 33 | 34 | it('test arrays when uniformXXv has offset and length', () => { 35 | const {gl, tagObject} = createContext(); 36 | const prg = twgl.createProgram(gl, [ 37 | ` 38 | void main() { 39 | gl_Position = vec4(0, 0, 0, 1); 40 | } 41 | `, 42 | ` 43 | precision mediump float; 44 | uniform vec4 pointColor; 45 | void main() { 46 | gl_FragColor = pointColor; 47 | } 48 | `, 49 | ]); 50 | tagObject(prg, 'point program'); 51 | gl.useProgram(prg); 52 | const loc = gl.getUniformLocation(prg, 'pointColor'); 53 | const array = new Array(16).fill(1); 54 | array[9] = undefined; 55 | assertThrowsWith(() => { 56 | gl.uniform4fv(loc, array, 8, 4); 57 | }, [/element 9 of argument 1 is undefined/]); 58 | }); 59 | 60 | }); -------------------------------------------------------------------------------- /test/tests/bad-data-tests.js: -------------------------------------------------------------------------------- 1 | import {assertThrowsWith} from '../assert.js'; 2 | import {describe, it} from '../mocha-support.js'; 3 | import {createContext, createContext2} from '../webgl.js'; 4 | 5 | describe('bad data tests', () => { 6 | 7 | it('test bad vertex data', () => { 8 | const {gl, tagObject} = createContext(); 9 | const buf = gl.createBuffer(); 10 | tagObject(buf, 'positions-buffer'); 11 | gl.bindBuffer(gl.ARRAY_BUFFER, buf); 12 | gl.bufferData(gl.ARRAY_BUFFER, 12, gl.STATIC_DRAW); 13 | gl.bufferData(gl.ARRAY_BUFFER, new ArrayBuffer(13), gl.STATIC_DRAW); 14 | const data = new Float32Array(40000); 15 | data[34567] = 3 / 'foo'; 16 | assertThrowsWith(() => { 17 | gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW); // error 18 | }, [/positions-buffer.*?NaN/, /Float32Array/]); 19 | }); 20 | 21 | it('test bad texture data', () => { 22 | const {gl, tagObject} = createContext(); 23 | const ext = gl.getExtension('OES_texture_float'); 24 | if (!ext) { 25 | return; 26 | } 27 | const tex = gl.createTexture(); 28 | tagObject(tex, 'float-texture'); 29 | gl.bindTexture(gl.TEXTURE_2D, tex); 30 | gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.FLOAT, null); 31 | assertThrowsWith(() => { 32 | gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.FLOAT, new Float32Array([1, 2, 3 / 'foo', 4])); // error 33 | }, [/texImage2D.*?float-texture.*?NaN/]); 34 | }); 35 | 36 | it('test bad argument', () => { 37 | const {gl} = createContext2(); 38 | if (!gl) { 39 | return; 40 | } 41 | gl.clearBufferfv(gl.COLOR, 0, [0, 0, 0, 0]); 42 | gl.clearBufferfv(gl.COLOR, 0, new Float32Array([0, 0, 0, 0]), 0); 43 | assertThrowsWith(() => { 44 | gl.clearBufferfv(gl.COLOR, 'foo', [0, 0, 0, 0]); 45 | }, [/not a number/]); 46 | assertThrowsWith(() => { 47 | gl.clearBufferfv(gl.COLOR, 0, 0); 48 | }, [/not an array or typedarray/]); 49 | }); 50 | 51 | }); -------------------------------------------------------------------------------- /test/tests/naming-tests.js: -------------------------------------------------------------------------------- 1 | import * as twgl from '../js/twgl-full.module.js'; 2 | import {assertThrowsWith} from '../assert.js'; 3 | import {describe, it} from '../mocha-support.js'; 4 | import {createContext} from '../webgl.js'; 5 | 6 | describe('namings test', () => { 7 | 8 | it('test naming objects', () => { 9 | const {gl, tagObject} = createContext(); 10 | // console.assert(gl.getExtension('OES_vertex_array_objects') === gl.getExtension('OES_vertex_array_objects')); 11 | // console.assert(gl.getSupportedExtensions().includes('GMAN_debug_helper')); 12 | const p = gl.createProgram(); 13 | tagObject(p, 'my-test-prg'); 14 | assertThrowsWith(() => { 15 | gl.useProgram(p); 16 | }, [/my-test-prg/]); 17 | }); 18 | 19 | it('test getting names of uniforms', () => { 20 | const {gl, tagObject} = createContext(); 21 | const prg = twgl.createProgram(gl, [ 22 | ` 23 | void main() { 24 | gl_Position = vec4(0); 25 | } 26 | `, 27 | ` 28 | precision mediump float; 29 | uniform vec4 diffuseColor; 30 | void main() { 31 | gl_FragColor = diffuseColor; 32 | } 33 | `, 34 | ]); 35 | tagObject(prg, 'simple program'); 36 | gl.useProgram(prg); 37 | const loc = gl.getUniformLocation(prg, 'diffuseColor'); 38 | gl.uniform4fv(loc, [1, 2, 3, 4]); 39 | assertThrowsWith(() => { 40 | gl.uniform4fv(loc, [1, 2, 3 / 'foo', 4]); 41 | }, [/diffuseColor.*?NaN/]); 42 | }); 43 | 44 | it('test large uniform', () => { 45 | const {gl, tagObject} = createContext(); 46 | const prg = twgl.createProgram(gl, [ 47 | ` 48 | void main() { 49 | gl_Position = vec4(0); 50 | } 51 | `, 52 | ` 53 | precision mediump float; 54 | uniform vec4 diffuseColors[9]; 55 | void main() { 56 | gl_FragColor = diffuseColors[8]; 57 | } 58 | `, 59 | ]); 60 | tagObject(prg, 'simple program'); 61 | gl.useProgram(prg); 62 | const loc = gl.getUniformLocation(prg, 'diffuseColors'); 63 | const value = new Array(36).fill(0); 64 | value[33] = 3 / 'foo'; 65 | assertThrowsWith(() => { 66 | gl.uniform4fv(loc, value); 67 | }, [/diffuseColors.*?NaN/]); 68 | }); 69 | 70 | }); -------------------------------------------------------------------------------- /test/tests/arrays-with-offsets-tests.js: -------------------------------------------------------------------------------- 1 | import {assertThrowsWith} from '../assert.js'; 2 | import {describe, it} from '../mocha-support.js'; 3 | import {createContext2} from '../webgl.js'; 4 | 5 | describe('arrays with offsets', () => { 6 | it('test bufferData with offset and length', () => { 7 | const {gl, tagObject} = createContext2(); 8 | if (!gl) { 9 | return; 10 | } 11 | const buf = gl.createBuffer(); 12 | tagObject(buf, 'test-buf'); 13 | gl.bindBuffer(gl.ARRAY_BUFFER, buf); 14 | gl.bufferData(gl.ARRAY_BUFFER, 5, gl.STATIC_DRAW); 15 | gl.bufferData(gl.ARRAY_BUFFER, new ArrayBuffer(5), gl.STATIC_DRAW); 16 | gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([1, 2, 3 / 'foo', 4, 5]), gl.STATIC_DRAW, 3); 17 | gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([1, 2, 3 / 'foo', 4, 5]), gl.STATIC_DRAW, 0, 2); 18 | assertThrowsWith(() => { 19 | gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([1, 2, 3 / 'foo', 4, 5]), gl.STATIC_DRAW, 2); 20 | }, 21 | [/element 2 of argument 1 is NaN/], 22 | ); 23 | assertThrowsWith(() => { 24 | gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([1, 2, 3 / 'foo', 4, 5]), gl.STATIC_DRAW, 2, 2); 25 | }, 26 | [/element 2 of argument 1 is NaN/], 27 | ); 28 | }); 29 | 30 | it('test bufferSubData with offset and length', () => { 31 | const {gl, tagObject} = createContext2(); 32 | if (!gl) { 33 | return; 34 | } 35 | const buf = gl.createBuffer(); 36 | tagObject(buf, 'test-buf'); 37 | gl.bindBuffer(gl.ARRAY_BUFFER, buf); 38 | gl.bufferData(gl.ARRAY_BUFFER, 50, gl.STATIC_DRAW); 39 | gl.bufferSubData(gl.ARRAY_BUFFER, 1, new Float32Array(5)); 40 | gl.bufferSubData(gl.ARRAY_BUFFER, 4, new Float32Array([1, 2, 3 / 'foo', 4, 5]), 3); 41 | gl.bufferSubData(gl.ARRAY_BUFFER, 4, new Float32Array([1, 2, 3 / 'foo', 4, 5]), 0, 2); 42 | assertThrowsWith(() => { 43 | gl.bufferSubData(gl.ARRAY_BUFFER, 4, new Float32Array([1, 2, 3 / 'foo', 4, 5]), 2); 44 | }, 45 | [/element 2 of argument 2 is NaN/], 46 | ); 47 | assertThrowsWith(() => { 48 | gl.bufferSubData(gl.ARRAY_BUFFER, 4, new Float32Array([1, 2, 3 / 'foo', 4, 5]), 2, 2); 49 | }, 50 | [/element 2 of argument 2 is NaN/], 51 | ); 52 | }); 53 | 54 | }); -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2019 Gregg Tavares 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | 22 | -------------------------------------------------------------------------------- 23 | 24 | Copyright (c) 2012 The Khronos Group Inc. 25 | 26 | Permission is hereby granted, free of charge, to any person obtaining a 27 | copy of this software and/or associated documentation files (the 28 | "Materials"), to deal in the Materials without restriction, including 29 | without limitation the rights to use, copy, modify, merge, publish, 30 | distribute, sublicense, and/or sell copies of the Materials, and to 31 | permit persons to whom the Materials are furnished to do so, subject to 32 | the following conditions: 33 | 34 | The above copyright notice and this permission notice shall be included 35 | in all copies or substantial portions of the Materials. 36 | 37 | THE MATERIALS ARE PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 38 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 39 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 40 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY 41 | CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, 42 | TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE 43 | MATERIALS OR THE USE OR OTHER DEALINGS IN THE MATERIALS. -------------------------------------------------------------------------------- /test/webgl.js: -------------------------------------------------------------------------------- 1 | /* global document */ 2 | 3 | export function createContext() { 4 | const gl = document.createElement('canvas').getContext('webgl'); 5 | const ext = gl.getExtension('GMAN_debug_helper'); 6 | const vaoExt = gl.getExtension('OES_vertex_array_object'); 7 | const tagObject = ext ? ext.tagObject.bind(ext) : () => {}; 8 | return { gl, ext, vaoExt, tagObject }; 9 | } 10 | 11 | export function createContext2() { 12 | const gl = document.createElement('canvas').getContext('webgl2'); 13 | const ext = gl ? gl.getExtension('GMAN_debug_helper') : null; 14 | const tagObject = ext ? ext.tagObject.bind(ext) : () => {}; 15 | return { gl, ext, tagObject }; 16 | } 17 | 18 | export function createContexts() { 19 | const {gl, ext, vaoExt, tagObject} = createContext(); 20 | const {gl: gl2, ext: ext2, tagObject: tagObject2} = createContext2(); 21 | return { gl, gl2, ext, ext2, vaoExt, tagObject, tagObject2 }; 22 | } 23 | 24 | function resetContext(gl) { 25 | gl.bindBuffer(gl.ARRAY_BUFFER, null); 26 | gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null); 27 | gl.bindRenderbuffer(gl.RENDERBUFFER, null); 28 | gl.bindFramebuffer(gl.FRAMEBUFFER, null); 29 | gl.activeTexture(gl.TEXTURE0); 30 | gl.bindTexture(gl.TEXTURE_2D, null); 31 | gl.bindTexture(gl.TEXTURE_CUBE_MAP, null); 32 | gl.useProgram(null); 33 | } 34 | 35 | export function resetContexts(context) { 36 | const { gl, gl2, vaoExt } = context; 37 | if (vaoExt) { 38 | vaoExt.bindVertexArrayOES(null); 39 | } 40 | resetContext(gl); 41 | 42 | if (gl2) { 43 | gl2.bindVertexArray(null); 44 | resetContext(gl2); 45 | } 46 | } 47 | 48 | export function escapeRE(str) { 49 | return str.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&'); 50 | } 51 | 52 | export function not(str) { 53 | return new RegExp(`^((?!${escapeRE(str)}).)*$`); 54 | } 55 | 56 | export function checkDest(gl, color) { 57 | const {width, height} = gl.canvas; 58 | const pixels = new Uint8Array(width * height * 4); 59 | gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels); 60 | for (let i = 0; i < pixels.length; i += 4) { 61 | if (pixels[i + 0] !== color[0] || 62 | pixels[i + 1] !== color[1] || 63 | pixels[i + 2] !== color[2] || 64 | pixels[i + 3] !== color[3]) { 65 | const x = (i / 4) % width; 66 | const y = (i / 4) / width | 0; 67 | throw new Error(`pixel at ${x},${y} expected: ${color}, was ${pixels.slice(i, i + 4)}`); 68 | } 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /test/tests/buffer-tests.js: -------------------------------------------------------------------------------- 1 | import {assertEqual} from '../assert.js'; 2 | import {describe, it} from '../mocha-support.js'; 3 | import {createContext} from '../webgl.js'; 4 | 5 | describe('buffer tests', () => { 6 | 7 | it('test bindBuffer with null and undefined', () => { 8 | const {gl} = createContext(); 9 | gl.bindBuffer(gl.ARRAY_BUFFER, null); 10 | gl.bindBuffer(gl.ARRAY_BUFFER, undefined); 11 | }); 12 | 13 | it('test bufferData with different BufferSource', () => { 14 | const {gl} = createContext(); 15 | 16 | const buf = gl.createBuffer(); 17 | gl.bindBuffer(gl.ARRAY_BUFFER, buf); 18 | 19 | gl.bufferData(gl.ARRAY_BUFFER, 10, gl.STATIC_DRAW); 20 | gl.bufferData(gl.ARRAY_BUFFER, new Int8Array(10), gl.STATIC_DRAW); 21 | gl.bufferData(gl.ARRAY_BUFFER, new Uint8Array(10), gl.STATIC_DRAW); 22 | gl.bufferData(gl.ARRAY_BUFFER, new Int16Array(10), gl.STATIC_DRAW); 23 | gl.bufferData(gl.ARRAY_BUFFER, new Uint16Array(10), gl.STATIC_DRAW); 24 | gl.bufferData(gl.ARRAY_BUFFER, new Int32Array(10), gl.STATIC_DRAW); 25 | gl.bufferData(gl.ARRAY_BUFFER, new Uint32Array(10), gl.STATIC_DRAW); 26 | gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(10), gl.STATIC_DRAW); 27 | gl.bufferData(gl.ARRAY_BUFFER, new Float64Array(10), gl.STATIC_DRAW); 28 | gl.bufferData(gl.ARRAY_BUFFER, new ArrayBuffer(10), gl.STATIC_DRAW); 29 | gl.bufferData(gl.ARRAY_BUFFER, new DataView(new ArrayBuffer(200)), gl.STATIC_DRAW); 30 | 31 | assertEqual(gl.getError(), gl.NO_ERROR, 'no errors'); 32 | }); 33 | 34 | it('test bufferSubData with different BufferSource', () => { 35 | const {gl} = createContext(); 36 | 37 | const buf = gl.createBuffer(); 38 | gl.bindBuffer(gl.ARRAY_BUFFER, buf); 39 | 40 | gl.bufferData(gl.ARRAY_BUFFER, 200, gl.STATIC_DRAW); 41 | 42 | gl.bufferSubData(gl.ARRAY_BUFFER, 4, new Int8Array(10)); 43 | gl.bufferSubData(gl.ARRAY_BUFFER, 4, new Uint8Array(10)); 44 | gl.bufferSubData(gl.ARRAY_BUFFER, 4, new Int16Array(10)); 45 | gl.bufferSubData(gl.ARRAY_BUFFER, 4, new Uint16Array(10)); 46 | gl.bufferSubData(gl.ARRAY_BUFFER, 4, new Int32Array(10)); 47 | gl.bufferSubData(gl.ARRAY_BUFFER, 4, new Uint32Array(10)); 48 | gl.bufferSubData(gl.ARRAY_BUFFER, 4, new Float32Array(10)); 49 | gl.bufferSubData(gl.ARRAY_BUFFER, 4, new Float64Array(10)); 50 | gl.bufferSubData(gl.ARRAY_BUFFER, 4, new ArrayBuffer(10)); 51 | gl.bufferSubData(gl.ARRAY_BUFFER, 4, new DataView(new ArrayBuffer(10))); 52 | 53 | assertEqual(gl.getError(), gl.NO_ERROR, 'no errors'); 54 | }); 55 | 56 | }); -------------------------------------------------------------------------------- /test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | WebGL Lint Tests 6 | 7 | 8 | 13 | 14 | 15 |
16 |

** SEE JAVASCRIPT CONSOLE!! **
compare the error messages to this

17 |
18 | 34 | 35 | 86 | 87 | 88 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | /* global module */ 2 | 3 | module.exports = { 4 | env: { 5 | 'es6': true, 6 | }, 7 | parserOptions: { 8 | 'sourceType': 'module', 9 | 'ecmaVersion': 9, 10 | }, 11 | 12 | plugins: [ 13 | 'eslint-plugin-html', 14 | 'eslint-plugin-optional-comma-spacing', 15 | // "eslint-plugin-one-variable-per-var", 16 | 'eslint-plugin-require-trailing-comma', 17 | ], 18 | extends: 'eslint:recommended', 19 | rules: { 20 | 'one-var': ['error', 'never'], 21 | 'no-eval': 2, 22 | 'no-array-constructor': 2, 23 | 'no-caller': 2, 24 | 'no-catch-shadow': 2, 25 | 'no-extend-native': 2, 26 | 'no-extra-bind': 2, 27 | 'no-implied-eval': 2, 28 | 'no-inner-declarations': 0, 29 | 'no-iterator': 2, 30 | 'no-label-var': 2, 31 | 'no-labels': 2, 32 | 'no-lone-blocks': 0, 33 | 'no-multi-str': 2, 34 | 'no-native-reassign': 2, 35 | 'no-new': 2, 36 | 'no-new-func': 2, 37 | 'no-new-object': 2, 38 | 'no-new-wrappers': 2, 39 | 'no-octal-escape': 2, 40 | 'no-process-exit': 2, 41 | 'no-proto': 2, 42 | 'no-return-assign': 2, 43 | 'no-script-url': 2, 44 | 'no-sequences': 2, 45 | 'no-shadow-restricted-names': 2, 46 | 'no-spaced-func': 2, 47 | 'no-trailing-spaces': 2, 48 | 'no-undef-init': 2, 49 | 'no-unused-expressions': 2, 50 | 'no-use-before-define': 0, 51 | 'no-var': 2, 52 | 'no-with': 2, 53 | 'prefer-const': 2, 54 | 'consistent-return': 2, 55 | 'curly': [2, 'all'], 56 | 'no-extra-parens': [2, 'functions'], 57 | 'eqeqeq': 2, 58 | 'new-cap': 2, 59 | 'new-parens': 2, 60 | 'semi-spacing': [2, {'before': false, 'after': true}], 61 | 'space-infix-ops': 2, 62 | 'space-unary-ops': [2, { 'words': true, 'nonwords': false }], 63 | 'yoda': [2, 'never'], 64 | 65 | 'brace-style': [2, '1tbs', { 'allowSingleLine': false }], 66 | 'camelcase': [0], 67 | 'comma-spacing': 0, 68 | 'comma-dangle': 0, 69 | 'comma-style': [2, 'last'], 70 | 'optional-comma-spacing/optional-comma-spacing': [2, {'after': true}], 71 | 'dot-notation': 0, 72 | 'eol-last': [0], 73 | 'global-strict': [0], 74 | 'key-spacing': [0], 75 | 'no-comma-dangle': [0], 76 | 'no-irregular-whitespace': 2, 77 | 'no-multi-spaces': [0], 78 | 'no-loop-func': 0, 79 | 'no-obj-calls': 2, 80 | 'no-redeclare': [0], 81 | 'no-shadow': [0], 82 | 'no-undef': [2], 83 | 'no-unreachable': 2, 84 | //"one-variable-per-var/one-variable-per-var": [2], 85 | 'quotes': [2, 'single'], 86 | 'require-atomic-updates': 0, 87 | 'require-trailing-comma/require-trailing-comma': [2], 88 | 'require-yield': 0, 89 | 'semi': [2, 'always'], 90 | 'strict': [2, 'global'], 91 | 'space-before-function-paren': [2, 'never'], 92 | 'keyword-spacing': [1, {'before': true, 'after': true, 'overrides': {}} ], 93 | }, 94 | }; 95 | -------------------------------------------------------------------------------- /test/tests/zero-matrix-tests.js: -------------------------------------------------------------------------------- 1 | import * as twgl from '../js/twgl-full.module.js'; 2 | import {assertThrowsWith} from '../assert.js'; 3 | import {describe, it} from '../mocha-support.js'; 4 | import {createContext, not} from '../webgl.js'; 5 | 6 | describe('zero matrix tests', () => { 7 | 8 | it('test zero matrix', () => { 9 | const {gl, tagObject} = createContext(); 10 | const prg = twgl.createProgram(gl, [ 11 | ` 12 | attribute vec4 position; 13 | uniform mat4 perspective; 14 | uniform mat4 view; 15 | uniform mat4 model; 16 | void main() { 17 | gl_Position = perspective * view * model * position; 18 | } 19 | `, 20 | ` 21 | precision mediump float; 22 | void main() { 23 | gl_FragColor = vec4(0); 24 | } 25 | `, 26 | ]); 27 | tagObject(prg, 'uniforms-with-matrices'); 28 | gl.useProgram(prg); 29 | gl.uniformMatrix4fv(gl.getUniformLocation(prg, 'model'), false, [ 30 | 0, 0, 0, 0, 31 | 0, 0, 0, 0.00000001, 32 | 0, 0, 0, 0, 33 | 0, 0, 0, 0, 34 | ]); 35 | gl.uniformMatrix4fv(gl.getUniformLocation(prg, 'view'), false, new Float32Array([ 36 | 0, 0, 0, 0, 37 | 0, 0, 0, 0.00000001, 38 | 0, 0, 0, 0, 39 | 0, 0, 0, 0, 40 | ])); 41 | assertThrowsWith(() => { 42 | gl.uniformMatrix4fv(gl.getUniformLocation(prg, 'perspective'), false, new Float32Array([ 43 | 0, 0, 0, 0, 44 | 0, 0, 0, 0, 45 | 0, 0, 0, 0, 46 | 0, 0, 0, 0, 47 | ])); 48 | }, [ 49 | /perspective/, 50 | not('view'), 51 | not('model'), 52 | ]); 53 | }); 54 | 55 | it('test zero matrix disabled', () => { 56 | const {gl, ext, tagObject} = createContext(); 57 | if (ext) { 58 | ext.setConfiguration({failZeroMatrixUniforms: false}); 59 | } 60 | const prg = twgl.createProgram(gl, [ 61 | ` 62 | attribute vec4 position; 63 | uniform mat4 perspective; 64 | uniform mat4 view; 65 | uniform mat4 model; 66 | void main() { 67 | gl_Position = perspective * view * model * position; 68 | } 69 | `, 70 | ` 71 | precision mediump float; 72 | void main() { 73 | gl_FragColor = vec4(0); 74 | } 75 | `, 76 | ]); 77 | tagObject(prg, 'uniforms-with-matrices'); 78 | gl.useProgram(prg); 79 | gl.uniformMatrix4fv(gl.getUniformLocation(prg, 'model'), false, [ 80 | 0, 0, 0, 0, 81 | 0, 0, 0, 0.00000001, 82 | 0, 0, 0, 0, 83 | 0, 0, 0, 0, 84 | ]); 85 | gl.uniformMatrix4fv(gl.getUniformLocation(prg, 'view'), false, new Float32Array([ 86 | 0, 0, 0, 0, 87 | 0, 0, 0, 0.00000001, 88 | 0, 0, 0, 0, 89 | 0, 0, 0, 0, 90 | ])); 91 | gl.uniformMatrix4fv(gl.getUniformLocation(prg, 'perspective'), false, new Float32Array([ 92 | 0, 0, 0, 0, 93 | 0, 0, 0, 0, 94 | 0, 0, 0, 0, 95 | 0, 0, 0, 0, 96 | ])); 97 | }); 98 | 99 | }); -------------------------------------------------------------------------------- /src/wrap.js: -------------------------------------------------------------------------------- 1 | /* 2 | The MIT License (MIT) 3 | 4 | Copyright (c) 2019 Gregg Tavares 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy of 7 | this software and associated documentation files (the "Software"), to deal in 8 | the Software without restriction, including without limitation the rights to 9 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 10 | the Software, and to permit persons to whom the Software is furnished to do so, 11 | subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in all 14 | copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 18 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 19 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 20 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 21 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 22 | */ 23 | 24 | import {augmentAPI} from './augment-api.js'; 25 | 26 | /* global console */ 27 | /* global document */ 28 | /* global HTMLCanvasElement */ 29 | /* global OffscreenCanvas */ 30 | 31 | console.log('webgl-lint running'); 32 | 33 | function wrapGetContext(Ctor) { 34 | const oldFn = Ctor.prototype.getContext; 35 | Ctor.prototype.getContext = function(type, ...args) { 36 | const ctx = oldFn.call(this, type, ...args); 37 | // Using bindTexture to see if it's WebGL. Could check for instanceof WebGLRenderingContext 38 | // but that might fail if wrapped by debugging extension 39 | if (ctx && ctx.bindTexture) { 40 | const config = { 41 | maxDrawCalls: 1000, 42 | throwOnError: true, 43 | failBadShadersAndPrograms: true, 44 | failUnsetUniforms: true, 45 | failUnsetSamplerUniforms: false, 46 | failZeroMatrixUniforms: true, 47 | failUnrenderableTextures: true, 48 | failUndefinedUniforms: false, 49 | warnUndefinedUniforms: true, 50 | makeDefaultTags: true, 51 | ignoreUniforms: [], 52 | }; 53 | augmentAPI(ctx, type, config); 54 | const ext = ctx.getExtension('GMAN_debug_helper'); 55 | document.querySelectorAll('[data-gman-debug-helper]').forEach(elem => { 56 | const str = elem.dataset.gmanDebugHelper; 57 | let config; 58 | try { 59 | config = JSON.parse(str); 60 | } catch (e) { 61 | e.message += `\n${str}\nfailed to parse data-gman-debug-helper as JSON in: ${elem.outerHTML}`; 62 | throw e; 63 | } 64 | if (config) { 65 | ext.setConfiguration(config); 66 | } 67 | }); 68 | } 69 | return ctx; 70 | }; 71 | } 72 | 73 | if (typeof HTMLCanvasElement !== 'undefined') { 74 | wrapGetContext(HTMLCanvasElement); 75 | } 76 | if (typeof OffscreenCanvas !== 'undefined') { 77 | wrapGetContext(OffscreenCanvas); 78 | } 79 | 80 | -------------------------------------------------------------------------------- /src/parse-stack.js: -------------------------------------------------------------------------------- 1 | /* global navigator */ 2 | 3 | // adapted from http://stackoverflow.com/a/2401861/128511 4 | function getBrowser() { 5 | const userAgent = navigator.userAgent; 6 | let m = userAgent.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || []; 7 | if (/trident/i.test(m[1])) { 8 | m = /\brv[ :]+(\d+)/g.exec(userAgent) || []; 9 | return { 10 | name: 'IE', 11 | version: m[1], 12 | }; 13 | } 14 | if (m[1] === 'Chrome') { 15 | const temp = userAgent.match(/\b(OPR|Edge)\/(\d+)/); 16 | if (temp) { 17 | return { 18 | name: temp[1].replace('OPR', 'Opera'), 19 | version: temp[2], 20 | }; 21 | } 22 | } 23 | m = m[2] ? [m[1], m[2]] : [navigator.appName, navigator.appVersion, '-?']; 24 | const version = userAgent.match(/version\/(\d+)/i); 25 | if (version) { 26 | m.splice(1, 1, version[1]); 27 | } 28 | return { 29 | name: m[0], 30 | version: m[1], 31 | }; 32 | } 33 | 34 | /** 35 | * @typedef {Object} StackInfo 36 | * @property {string} url Url of line 37 | * @property {number} lineNo line number of error 38 | * @property {number} colNo column number of error 39 | * @property {string} [funcName] name of function 40 | */ 41 | 42 | /** 43 | * @parameter {string} stack A stack string as in `(new Error()).stack` 44 | * @returns {StackInfo} 45 | */ 46 | export const parseStack = function() { 47 | const browser = getBrowser(); 48 | let lineNdx; 49 | let matcher; 50 | if ((/chrome|opera/i).test(browser.name)) { 51 | lineNdx = 3; 52 | matcher = function(line) { 53 | const m = /at ([^(]+)*\(*(.*?):(\d+):(\d+)/.exec(line); 54 | if (m) { 55 | let userFnName = m[1]; 56 | let url = m[2]; 57 | const lineNo = parseInt(m[3]); 58 | const colNo = parseInt(m[4]); 59 | if (url === '') { 60 | url = userFnName; 61 | userFnName = ''; 62 | } 63 | return { 64 | url: url, 65 | lineNo: lineNo, 66 | colNo: colNo, 67 | funcName: userFnName, 68 | }; 69 | } 70 | return undefined; 71 | }; 72 | } else if ((/firefox|safari/i).test(browser.name)) { 73 | lineNdx = 2; 74 | matcher = function(line) { 75 | const m = /@(.*?):(\d+):(\d+)/.exec(line); 76 | if (m) { 77 | const url = m[1]; 78 | const lineNo = parseInt(m[2]); 79 | const colNo = parseInt(m[3]); 80 | return { 81 | url: url, 82 | lineNo: lineNo, 83 | colNo: colNo, 84 | }; 85 | } 86 | return undefined; 87 | }; 88 | } 89 | 90 | return function stackParser(stack) { 91 | if (matcher) { 92 | try { 93 | const lines = stack.split('\n'); 94 | // window.fooLines = lines; 95 | // lines.forEach(function(line, ndx) { 96 | // origConsole.log("#", ndx, line); 97 | // }); 98 | return matcher(lines[lineNdx]); 99 | } catch (e) { 100 | // do nothing 101 | } 102 | } 103 | return undefined; 104 | }; 105 | }(); 106 | 107 | -------------------------------------------------------------------------------- /test/tests/shader-fail-tests.js: -------------------------------------------------------------------------------- 1 | import { assertEqual, assertThrowsWith } from '../assert.js'; 2 | import {describe, it} from '../mocha-support.js'; 3 | import {createContext} from '../webgl.js'; 4 | 5 | describe('shader fail tests', () => { 6 | 7 | it('fails on bad shader', () => { 8 | const {gl, tagObject} = createContext(); 9 | const vs = ` 10 | void main() { 11 | gl_Position = vec4(1) * 1; // BAD: vec4 * int 12 | } 13 | `; 14 | 15 | const sh = gl.createShader(gl.VERTEX_SHADER); 16 | tagObject(sh, 'myBadShader'); 17 | gl.shaderSource(sh, vs); 18 | assertThrowsWith(() => { 19 | gl.compileShader(sh); 20 | }, [/myBadShader/]); 21 | }); 22 | 23 | it('fails on bad program', () => { 24 | const {gl, tagObject} = createContext(); 25 | const vs = ` 26 | attribute vec4 position; 27 | void main() { 28 | gl_Position = vec4(1); 29 | } 30 | `; 31 | const fs = ` 32 | precision mediump float; 33 | varying vec3 foo; // BAD: no foo in vertex shader 34 | void main() { 35 | gl_FragColor = vec4(foo, 0); 36 | } 37 | `; 38 | 39 | const vShader = gl.createShader(gl.VERTEX_SHADER); 40 | tagObject(vShader, 'myGoodVertexShader'); 41 | gl.shaderSource(vShader, vs); 42 | gl.compileShader(vShader); 43 | 44 | const fShader = gl.createShader(gl.FRAGMENT_SHADER); 45 | tagObject(fShader, 'myGoodFragmentShader'); 46 | gl.shaderSource(fShader, fs); 47 | gl.compileShader(fShader); 48 | 49 | const prg = gl.createProgram(); 50 | tagObject(prg, 'myBadProgram'); 51 | gl.attachShader(prg, vShader); 52 | gl.attachShader(prg, fShader); 53 | assertThrowsWith(() => { 54 | gl.linkProgram(prg); 55 | }, [ 56 | /myBadProgram/, 57 | /myGoodVertexShader/, 58 | /myGoodFragmentShader/, 59 | ]); 60 | }); 61 | 62 | it('does not fail if disabled', () => { 63 | const {gl, ext, tagObject} = createContext(); 64 | if (!ext) { 65 | return; 66 | } 67 | ext.setConfiguration({ 68 | failBadShadersAndPrograms: false, 69 | }); 70 | 71 | { 72 | const vs = ` 73 | void main() { 74 | gl_Position = vec4(1) * 1; // BAD: vec4 * int 75 | } 76 | `; 77 | 78 | const sh = gl.createShader(gl.VERTEX_SHADER); 79 | tagObject(sh, 'myBadShader'); 80 | gl.shaderSource(sh, vs); 81 | gl.compileShader(sh); 82 | assertEqual(gl.getShaderParameter(sh, gl.COMPILE_STATUS), false); 83 | } 84 | { 85 | const vs = ` 86 | attribute vec4 position; 87 | void main() { 88 | gl_Position = vec4(1); 89 | } 90 | `; 91 | const fs = ` 92 | precision mediump float; 93 | varying vec3 foo; // BAD: no foo in vertex shader 94 | void main() { 95 | gl_FragColor = vec4(foo, 0); 96 | } 97 | `; 98 | 99 | const vShader = gl.createShader(gl.VERTEX_SHADER); 100 | tagObject(vShader, 'myGoodVertexShader'); 101 | gl.shaderSource(vShader, vs); 102 | gl.compileShader(vShader); 103 | 104 | const fShader = gl.createShader(gl.FRAGMENT_SHADER); 105 | tagObject(fShader, 'myGoodFragmentShader'); 106 | gl.shaderSource(fShader, fs); 107 | gl.compileShader(fShader); 108 | 109 | const prg = gl.createProgram(); 110 | tagObject(prg, 'myBadProgram'); 111 | gl.attachShader(prg, vShader); 112 | gl.attachShader(prg, fShader); 113 | gl.linkProgram(prg); 114 | assertEqual(gl.getProgramParameter(prg, gl.LINK_STATUS), false); 115 | } 116 | }); 117 | 118 | }); -------------------------------------------------------------------------------- /src/check-framebuffer-feedback.js: -------------------------------------------------------------------------------- 1 | /* global WebGLTexture */ 2 | 3 | import {glEnumToString, isWebGL2, isBuiltIn} from './utils.js'; 4 | import {uniformTypeIsSampler, getTextureForUnit} from './samplers.js'; 5 | 6 | const MAX_COLOR_ATTACHMENTS = 0x8CDF; 7 | 8 | function getMaxColorAttachments(gl) { 9 | if (!isWebGL2(gl)) { 10 | const ext = gl.getExtension('WEBGL_draw_buffers'); 11 | if (!ext) { 12 | return 1; 13 | } 14 | } 15 | return gl.getParameter(MAX_COLOR_ATTACHMENTS); 16 | } 17 | 18 | /** 19 | * slow non-cached version 20 | * @param {WebGLRenderingContext} gl 21 | * @param {number} attachment 22 | * @param {Map} textureAttachments 23 | */ 24 | function addTextureAttachment(gl, attachment, textureAttachments) { 25 | const type = gl.getFramebufferAttachmentParameter(gl.FRAMEBUFFER, attachment, gl.FRAMEBUFFER_ATTACHMENT_OBJECT_TYPE); 26 | if (type === gl.NONE) { 27 | return; 28 | } 29 | const obj = gl.getFramebufferAttachmentParameter(gl.FRAMEBUFFER, attachment, gl.FRAMEBUFFER_ATTACHMENT_OBJECT_NAME); 30 | if (obj instanceof WebGLTexture) { 31 | if (!textureAttachments.has(obj)) { 32 | textureAttachments.set(obj, []); 33 | } 34 | textureAttachments.get(obj).push(attachment); 35 | } 36 | } 37 | 38 | /** 39 | * slow non-cached version 40 | * @param {WebGLRenderingContext} gl 41 | */ 42 | export function checkFramebufferFeedback(gl, getWebGLObjectString) { 43 | const framebuffer = gl.getParameter(gl.FRAMEBUFFER_BINDING); 44 | if (!framebuffer) { 45 | // drawing to canvas 46 | return []; 47 | } 48 | 49 | // get framebuffer texture attachments 50 | const maxColorAttachments = getMaxColorAttachments(gl); 51 | const textureAttachments = new Map(); 52 | for (let i = 0; i < maxColorAttachments; ++i) { 53 | addTextureAttachment(gl, gl.COLOR_ATTACHMENT0 + i, textureAttachments); 54 | } 55 | addTextureAttachment(gl, gl.DEPTH_ATTACHMENT, textureAttachments); 56 | addTextureAttachment(gl, gl.STENCIL_ATTACHMENT, textureAttachments); 57 | 58 | if (!isWebGL2(gl)) { 59 | addTextureAttachment(gl, gl.DEPTH_STENCIL_ATTACHMENT, textureAttachments); 60 | } 61 | 62 | const oldActiveTexture = gl.getParameter(gl.ACTIVE_TEXTURE); 63 | const program = gl.getParameter(gl.CURRENT_PROGRAM); 64 | // get the texture units used by the current program 65 | const numUniforms = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS); 66 | const errors = []; 67 | for (let ii = 0; ii < numUniforms; ++ii) { 68 | const {name, type, size} = gl.getActiveUniform(program, ii); 69 | if (isBuiltIn(name) || !uniformTypeIsSampler(type)) { 70 | continue; 71 | } 72 | 73 | if (size > 1) { 74 | const baseName = (name.substr(-3) === '[0]') 75 | ? name.substr(0, name.length - 3) 76 | : name; 77 | for (let t = 0; t < size; ++t) { 78 | errors.push(...checkTextureUsage(gl, framebuffer, textureAttachments, program, `${baseName}[${t}]`, type, getWebGLObjectString)); 79 | } 80 | } else { 81 | errors.push(...checkTextureUsage(gl, framebuffer, textureAttachments, program, name, type, getWebGLObjectString)); 82 | } 83 | } 84 | gl.activeTexture(oldActiveTexture); 85 | 86 | return errors; 87 | } 88 | 89 | function checkTextureUsage(gl, framebuffer, textureAttachments, program, uniformName, uniformType, getWebGLObjectString) { 90 | const location = gl.getUniformLocation(program, uniformName); 91 | const textureUnit = gl.getUniform(program, location); 92 | const texture = getTextureForUnit(gl, textureUnit, uniformType); 93 | const attachments = textureAttachments.get(texture); 94 | return attachments 95 | ? [`${getWebGLObjectString(texture)} on uniform: ${uniformName} bound to texture unit ${textureUnit} is also attached to ${getWebGLObjectString(framebuffer)} on attachment: ${attachments.map(a => glEnumToString(a)).join(', ')}`] 96 | : []; 97 | } 98 | -------------------------------------------------------------------------------- /src/vertex-array-manager.js: -------------------------------------------------------------------------------- 1 | import { 2 | createWeakRef, 3 | isObjectRefEqual, 4 | } from './utils.js'; 5 | 6 | class VertexArray { 7 | constructor(numAttribs) { 8 | this.elementAttribArray = null; 9 | this.attribs = []; 10 | for (let i = 0; i < numAttribs; ++i) { 11 | this.attribs.push({ 12 | size: 0, 13 | type: 0, 14 | normalize: false, 15 | stride: 0, 16 | offset: 0, 17 | divisor: 0, 18 | buffer: null, 19 | iPointer: false, 20 | }); 21 | } 22 | } 23 | setElementArrayBuffer(redundantStateSetting, buffer) { 24 | if (isObjectRefEqual(this.elementAttribArray, buffer)) { 25 | ++redundantStateSetting.bindBuffer; 26 | } else { 27 | this.elementAttribArray = createWeakRef(buffer); 28 | } 29 | } 30 | setAttrib(redundantStateSetting, iPointer, index, size, type, normalize, stride, offset, buffer) { 31 | const attrib = this.attribs[index]; 32 | if (isObjectRefEqual(attrib.buffer, buffer) && 33 | attrib.iPointer === iPointer && 34 | attrib.size === size && 35 | attrib.type === type && 36 | attrib.normalize === normalize && 37 | attrib.stride === stride && 38 | attrib.offset === offset) { 39 | ++redundantStateSetting.vertexAttribPointer; 40 | } else { 41 | Object.assign(attrib, { 42 | iPointer, size, type, normalize, stride, offset, buffer: createWeakRef(buffer), 43 | }); 44 | } 45 | } 46 | } 47 | 48 | export class VertexArrayManager { 49 | constructor(gl, redundantStateSetting) { 50 | this.gl = gl; 51 | this.redundantStateSetting = redundantStateSetting; 52 | this.numAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS); 53 | this.vertexArrays = new WeakMap(); 54 | this.defaultVertexArray = new VertexArray(this.numAttribs); 55 | this.currentVertexArray = this.defaultVertexArray; 56 | 57 | const createVertexArray = (ctx, funcName, args, obj) => { 58 | this.vertexArrays.set(obj, new VertexArray(this.numAttribs)); 59 | }; 60 | 61 | const deleteVertexArray = (ctx, funcName, args) => { 62 | const [obj] = args; 63 | const vertexArray = this.vertexArrays.get(obj); 64 | if (this.currentVertexArray === vertexArray) { 65 | this.currentVertexArray = this.defaultVertexArray; 66 | } 67 | this.vertexArrays.delete(obj); 68 | }; 69 | 70 | const bindVertexArray = (ctx, funcName, args) => { 71 | let [vertexArray] = args; 72 | vertexArray = vertexArray ? this.vertexArrays.get(vertexArray) : this.defaultVertexArray; 73 | if (vertexArray === this.currentVertexArray) { 74 | ++this.redundantStateSetting.bindVertexArray; 75 | } else { 76 | this.currentVertexArray = vertexArray; 77 | } 78 | }; 79 | 80 | this.postChecks = { 81 | createVertexArray, 82 | createVertexArrayOES: createVertexArray, 83 | bindVertexArray, 84 | bindVertexArrayOES: bindVertexArray, 85 | bindBuffer: (ctx, funcName, args) => { 86 | const [target, buffer] = args; 87 | if (target === gl.ELEMENT_ARRAY_BUFFER) { 88 | this.currentVertexArray.setElementArrayBuffer(this.redundantStateSetting, buffer); 89 | } 90 | }, 91 | deleteVertexArray, 92 | deleteVertexArrayOES: deleteVertexArray, 93 | vertexAttribPointer: (ctx, funcName, args) => { 94 | const [index, size, type, normalize, stride, offset] = args; 95 | const gl = this.gl; 96 | this.currentVertexArray.setAttrib(this.redundantStateSetting, false, index, size, type, normalize, stride, offset, gl.getParameter(gl.ARRAY_BUFFER_BINDING)); 97 | }, 98 | vertexAttribIPointer: (ctx, funcName, args) => { 99 | const [index, size, type, stride, offset] = args; 100 | const gl = this.gl; 101 | this.currentVertexArray.setAttrib(this.redundantStateSetting, true, index, size, type, false, stride, offset, gl.getParameter(gl.ARRAY_BUFFER_BINDING)); 102 | }, 103 | }; 104 | } 105 | } -------------------------------------------------------------------------------- /test/tests/recommended-extensions.js: -------------------------------------------------------------------------------- 1 | import * as twgl from '../js/twgl-full.module.js'; 2 | import {assertThrowsWith} from '../assert.js'; 3 | import {describe, it} from '../mocha-support.js'; 4 | import {createContext, createContext2} from '../shared.js'; 5 | 6 | describe('unrenderable texture tests', () => { 7 | 8 | it('test OES_texture_float', () => { 9 | const {gl, tagObject} = createContext(); 10 | 11 | const tex = gl.createTexture(); 12 | tagObject(tex, 'floatTex'); 13 | gl.bindTexture(gl.TEXTURE_2D, tex); 14 | assertThrowsWith(() => { 15 | gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.FLOAT, null); 16 | }, [/OES_texture_float/]); 17 | 18 | }); 19 | 20 | it('test oes_texture_float_linear', () => { 21 | const {gl, tagObject} = createContext(); 22 | const ext = gl.getExtension('OES_texture_float'); 23 | if (!ext) { 24 | return; 25 | } 26 | 27 | const vs = ` 28 | void main() { 29 | gl_Position = vec4(0, 0, 0, 1); 30 | gl_PointSize = 10.0; 31 | } 32 | `; 33 | const fs = ` 34 | precision mediump float; 35 | uniform sampler2D u_tex; 36 | void main() { 37 | gl_FragColor = texture2D(u_tex, vec2(0)); 38 | } 39 | `; 40 | const prg = twgl.createProgram(gl, [vs, fs]); 41 | tagObject(prg, 'dummyPrg'); 42 | 43 | const tex = gl.createTexture(); 44 | tagObject(tex, 'floatTex'); 45 | gl.bindTexture(gl.TEXTURE_2D, tex); 46 | gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.FLOAT, null); 47 | 48 | 49 | assertThrowsWith(() => { 50 | gl.drawArrays(gl.POINTS, 0, 1); 51 | }, [/OES_texture_float_linear/]); 52 | 53 | }); 54 | 55 | it('test webgl_color_buffer_float', () => { 56 | const {gl, tagObject} = createContext(); 57 | const ext = gl.getExtension('OES_texture_float'); 58 | if (!ext) { 59 | return; 60 | } 61 | 62 | const tex = gl.createTexture(); 63 | tagObject(tex, 'floatTex'); 64 | gl.bindTexture(gl.TEXTURE_2D, tex); 65 | gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.FLOAT, null); 66 | gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); 67 | gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); 68 | 69 | assertThrowsWith(() => { 70 | gl.clear(gl.COLOR_BUFFER_BIT); // float is not renderable 71 | }, [/WEBGL_color_buffer_float/]); 72 | }); 73 | 74 | it('test oes_element_index_uint', () => { 75 | const {gl, tagObject} = createContext(); 76 | 77 | const vs = ` 78 | attribute vec4 position; 79 | void main() { 80 | gl_Position = position; 81 | } 82 | `; 83 | const fs = ` 84 | precision mediump float; 85 | void main() { 86 | gl_FragColor = vec4(0); 87 | } 88 | `; 89 | const prg = twgl.createProgram(gl, [vs, fs]); 90 | tagObject(prg, 'dummyPrg'); 91 | 92 | function makeBuffer(gl, name, data, target = gl.ARRAY_BUFFER) { 93 | const buf = gl.createBuffer(); 94 | tagObject(buf, name); 95 | gl.bindBuffer(target, buf); 96 | gl.bufferData(target, data, gl.STATIC_DRAW); 97 | } 98 | 99 | function makeBufferAndSetAttrib(gl, prg, name, size, data) { 100 | makeBuffer(gl, name, data); 101 | const loc = gl.getAttribLocation(prg, name); 102 | gl.enableVertexAttribArray(loc); 103 | gl.vertexAttribPointer(loc, size, gl.FLOAT, false, 0, 0); 104 | } 105 | 106 | const positions = new Float32Array([0, 0, 1, 0, 0, 1]); 107 | makeBufferAndSetAttrib(gl, prg, 'position', 1, positions); 108 | makeBuffer(gl, 'indices', new Uint8Array([0]), gl.ELEMENT_ARRAY_BUFFER); 109 | 110 | assertThrowsWith(() => { 111 | gl.drawElements(gl.TRIANGLES, 1, gl.UNSIGNED_INT, 0); 112 | }, [/OES_element_index_uint/]); 113 | 114 | 115 | }); 116 | 117 | it('test ext_color_buffer_float', () => { 118 | const {gl, tagObject} = createContext2(); 119 | if (!gl) { 120 | return; 121 | } 122 | 123 | const fb = gl.createFramebuffer(); 124 | tagObject(fb, 'floatFB'); 125 | gl.bindFramebuffer(gl.FRAMEBUFFER, fb); 126 | 127 | const tex = gl.createTexture(); 128 | gl.bindTexture(gl.TEXTURE_2D, tex); 129 | tagObject(tex, 'floatTex'); 130 | gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0); 131 | gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA32F, 1, 1, 0, gl.RGBA, gl.FLOAT, null); 132 | 133 | assertThrowsWith(() => { 134 | gl.clear(gl.COLOR_BUFFER_BIT); // float is not renderable 135 | }, [/EXT_color_buffer_float/]); 136 | }); 137 | 138 | }); -------------------------------------------------------------------------------- /test/assert.js: -------------------------------------------------------------------------------- 1 | /* global console */ 2 | 3 | export const config = {}; 4 | 5 | export function setConfig(options) { 6 | Object.assign(config, options); 7 | } 8 | 9 | function formatMsg(msg) { 10 | return `${msg}${msg ? ': ' : ''}`; 11 | } 12 | 13 | export function assertTruthy(actual, msg = '') { 14 | if (!config.noLint && !actual) { 15 | throw new Error(`${formatMsg(msg)}expected: truthy, actual: ${actual}`); 16 | } 17 | } 18 | 19 | export function assertFalsy(actual, msg = '') { 20 | if (!config.noLint && actual) { 21 | throw new Error(`${formatMsg(msg)}expected: falsy, actual: ${actual}`); 22 | } 23 | } 24 | 25 | export function assertStringMatchesRegEx(actual, regex, msg = '') { 26 | if (!config.noLint && !regex.test(actual)) { 27 | throw new Error(`${formatMsg(msg)}expected: ${regex}, actual: ${actual}`); 28 | } 29 | } 30 | 31 | export function assertEqual(actual, expected, msg = '') { 32 | if (!config.noLint && actual !== expected) { 33 | throw new Error(`${formatMsg(msg)}expected: ${expected} to equal actual: ${actual}`); 34 | } 35 | } 36 | 37 | export function assertNotEqual(actual, expected, msg = '') { 38 | if (!config.noLint && actual === expected) { 39 | throw new Error(`${formatMsg(msg)}expected: ${expected} to not equal actual: ${actual}`); 40 | } 41 | } 42 | 43 | export function assertThrowsWith(func, expectations, msg = '') { 44 | let error = ''; 45 | if (config.throwOnError === false) { 46 | const origFn = console.error; 47 | const errors = []; 48 | console.error = function(...args) { 49 | errors.push(args.join(' ')); 50 | }; 51 | func(); 52 | console.error = origFn; 53 | if (errors.length) { 54 | error = errors.join('\n'); 55 | console.error(error); 56 | } 57 | } else { 58 | try { 59 | func(); 60 | } catch (e) { 61 | console.error(e); // eslint-disable-line 62 | error = e; 63 | } 64 | 65 | } 66 | 67 | if (config.noLint) { 68 | return; 69 | } 70 | 71 | assertStringMatchesREs(error.toString().replace(/\n/g, ' '), expectations, msg); 72 | } 73 | 74 | export function assertDoesNotThrow(func, msg = '') { 75 | let error = ''; 76 | if (config.throwOnError === false) { 77 | const origFn = console.error; 78 | const errors = []; 79 | console.error = function(...args) { 80 | errors.push(args.join(' ')); 81 | }; 82 | func(); 83 | console.error = origFn; 84 | if (errors.length) { 85 | error = errors.join('\n'); 86 | console.error(error); 87 | } 88 | } else { 89 | try { 90 | func(); 91 | } catch (e) { 92 | console.error(e); // eslint-disable-line 93 | error = e; 94 | } 95 | 96 | } 97 | 98 | if (config.noLint) { 99 | return; 100 | } 101 | 102 | assertEqual(error.toString(), '', msg); 103 | } 104 | 105 | // check if it throws it throws with x 106 | export function assertIfThrowsItThrowsWith(func, expectations, msg = '') { 107 | let error = ''; 108 | let threw = false; 109 | if (config.throwOnError === false) { 110 | const origFn = console.error; 111 | const errors = []; 112 | console.error = function(...args) { 113 | errors.push(args.join(' ')); 114 | }; 115 | func(); 116 | console.error = origFn; 117 | if (errors.length) { 118 | error = errors.join('\n'); 119 | console.error(error); 120 | } 121 | } else { 122 | try { 123 | func(); 124 | } catch (e) { 125 | console.error(e); // eslint-disable-line 126 | error = e; 127 | threw = true; 128 | } 129 | 130 | } 131 | 132 | if (config.noLint) { 133 | return; 134 | } 135 | 136 | if (!threw) { 137 | return; 138 | } 139 | 140 | assertStringMatchesREs(error.toString().replace(/\n/g, ' '), expectations, msg); 141 | } 142 | 143 | function assertStringMatchesREs(actual, expectations, msg) { 144 | for (const expectation of expectations) { 145 | if (expectation instanceof RegExp) { 146 | if (!expectation.test(actual)) { 147 | throw new Error(`${formatMsg(msg)}expected: ${expectation}, actual: ${actual}`); 148 | } 149 | } 150 | } 151 | 152 | } 153 | export function assertWarnsWith(func, expectations, msg = '') { 154 | const warnings = []; 155 | const origWarnFn = console.warn; 156 | console.warn = function(...args) { 157 | origWarnFn.call(this, ...args); 158 | warnings.push(args.join(' ')); 159 | }; 160 | 161 | let error; 162 | try { 163 | func(); 164 | } catch (e) { 165 | error = e; 166 | } 167 | 168 | console.warn = origWarnFn; 169 | 170 | if (error) { 171 | throw error; 172 | } 173 | 174 | if (config.noLint) { 175 | return; 176 | } 177 | 178 | assertStringMatchesREs(warnings.join(' '), expectations, msg); 179 | } 180 | 181 | export default { 182 | false: assertFalsy, 183 | equal: assertEqual, 184 | matchesRegEx: assertStringMatchesRegEx, 185 | notEqual: assertNotEqual, 186 | throwsWith: assertThrowsWith, 187 | true: assertTruthy, 188 | }; -------------------------------------------------------------------------------- /src/check-attributes-buffer-overflow.js: -------------------------------------------------------------------------------- 1 | import { 2 | getAttributeTypeInfo, 3 | getBytesPerValueForGLType, 4 | getDrawFunctionArgs, 5 | glEnumToString, 6 | glTypeToTypedArray, 7 | isWebGL2, 8 | isBuiltIn, 9 | } from './utils.js'; 10 | 11 | const VERTEX_ATTRIB_ARRAY_DIVISOR = 0x88FE; 12 | 13 | function computeLastUseIndexForDrawArrays(startOffset, vertCount/*, instances, errors*/) { 14 | return startOffset + vertCount - 1; 15 | } 16 | 17 | function getLastUsedIndexForDrawElements(gl, funcName, startOffset, vertCount, instances, indexType, getWebGLObjectString, getIndicesForBuffer, errors) { 18 | const elementBuffer = gl.getParameter(gl.ELEMENT_ARRAY_BUFFER_BINDING); 19 | if (!elementBuffer) { 20 | errors.push('No ELEMENT_ARRAY_BUFFER bound'); 21 | return undefined; 22 | } 23 | const bytesPerIndex = getBytesPerValueForGLType(indexType); 24 | const bufferSize = gl.getBufferParameter(gl.ELEMENT_ARRAY_BUFFER, gl.BUFFER_SIZE); 25 | const sizeNeeded = startOffset + vertCount * bytesPerIndex; 26 | if (sizeNeeded > bufferSize) { 27 | errors.push(`offset: ${startOffset} and count: ${vertCount} with index type: ${glEnumToString(indexType)} passed to ${funcName} are out of range for current ELEMENT_ARRAY_BUFFER. 28 | Those parameters require ${sizeNeeded} bytes but the current ELEMENT_ARRAY_BUFFER ${getWebGLObjectString(elementBuffer)} only has ${bufferSize} bytes`); 29 | return undefined; 30 | } 31 | const buffer = getIndicesForBuffer(elementBuffer); 32 | const Type = glTypeToTypedArray(indexType); 33 | const view = new Type(buffer, startOffset); 34 | let maxIndex = view[0]; 35 | for (let i = 1; i < vertCount; ++i) { 36 | maxIndex = Math.max(maxIndex, view[i]); 37 | } 38 | return maxIndex; 39 | } 40 | 41 | 42 | export function checkAttributesForBufferOverflow(gl, funcName, args, getWebGLObjectString, getIndicesForBuffer) { 43 | const {vertCount, startOffset, indexType, instances} = getDrawFunctionArgs(funcName, args); 44 | if (vertCount <= 0 || instances <= 0) { 45 | return []; 46 | } 47 | const program = gl.getParameter(gl.CURRENT_PROGRAM); 48 | const errors = []; 49 | const nonInstancedLastIndex = indexType 50 | ? getLastUsedIndexForDrawElements(gl, funcName, startOffset, vertCount, instances, indexType, getWebGLObjectString, getIndicesForBuffer, errors) 51 | : computeLastUseIndexForDrawArrays(startOffset, vertCount, instances, errors); 52 | if (errors.length) { 53 | return errors; 54 | } 55 | 56 | const hasDivisor = isWebGL2(gl) || gl.getExtension('ANGLE_instanced_arrays'); 57 | 58 | // get the attributes used by the current program 59 | const numAttributes = gl.getProgramParameter(program, gl.ACTIVE_ATTRIBUTES); 60 | const oldArrayBuffer = gl.getParameter(gl.ARRAY_BUFFER_BINDING); 61 | for (let ii = 0; ii < numAttributes; ++ii) { 62 | const {name, type} = gl.getActiveAttrib(program, ii); 63 | if (isBuiltIn(name)) { 64 | continue; 65 | } 66 | const index = gl.getAttribLocation(program, name); 67 | const {count} = {count: 1, ...getAttributeTypeInfo(type)}; 68 | for (let jj = 0; jj < count; ++jj) { 69 | const ndx = index + jj; 70 | const enabled = gl.getVertexAttrib(ndx, gl.VERTEX_ATTRIB_ARRAY_ENABLED); 71 | if (!enabled) { 72 | continue; 73 | } 74 | const buffer = gl.getVertexAttrib(ndx, gl.VERTEX_ATTRIB_ARRAY_BUFFER_BINDING); 75 | if (!buffer) { 76 | errors.push(`no buffer bound to attribute (${name}) location: ${index}`); 77 | continue; 78 | } 79 | const numComponents = gl.getVertexAttrib(ndx, gl.VERTEX_ATTRIB_ARRAY_SIZE); 80 | const type = gl.getVertexAttrib(ndx, gl.VERTEX_ATTRIB_ARRAY_TYPE); 81 | const bytesPerElement = getBytesPerValueForGLType(type) * numComponents; 82 | const offset = gl.getVertexAttribOffset(ndx, gl.VERTEX_ATTRIB_ARRAY_POINTER); 83 | const specifiedStride = gl.getVertexAttrib(ndx, gl.VERTEX_ATTRIB_ARRAY_STRIDE); 84 | const stride = specifiedStride ? specifiedStride : bytesPerElement; 85 | const divisor = hasDivisor 86 | ? gl.getVertexAttrib(ndx, VERTEX_ATTRIB_ARRAY_DIVISOR) 87 | : 0; 88 | gl.bindBuffer(gl.ARRAY_BUFFER, buffer); 89 | const bufferSize = gl.getBufferParameter(gl.ARRAY_BUFFER, gl.BUFFER_SIZE); 90 | const effectiveLastIndex = divisor > 0 91 | ? ((instances + divisor - 1) / divisor | 0) - 1 92 | : nonInstancedLastIndex; 93 | const sizeNeeded = offset + effectiveLastIndex * stride + bytesPerElement; 94 | if (sizeNeeded > bufferSize) { 95 | errors.push(`${getWebGLObjectString(buffer)} assigned to attribute ${ndx} used as attribute '${name}' in current program is too small for draw parameters. 96 | index of highest vertex accessed: ${effectiveLastIndex} 97 | attribute size: ${numComponents}, type: ${glEnumToString(type)}, stride: ${specifiedStride}, offset: ${offset}, divisor: ${divisor} 98 | needs ${sizeNeeded} bytes for draw but buffer is only ${bufferSize} bytes`); 99 | } 100 | } 101 | } 102 | gl.bindBuffer(gl.ARRAY_BUFFER, oldArrayBuffer); 103 | return errors; 104 | } 105 | 106 | -------------------------------------------------------------------------------- /src/samplers.js: -------------------------------------------------------------------------------- 1 | const SAMPLER_2D = 0x8B5E; 2 | const SAMPLER_CUBE = 0x8B60; 3 | const SAMPLER_3D = 0x8B5F; 4 | const SAMPLER_2D_SHADOW = 0x8B62; 5 | const SAMPLER_2D_ARRAY = 0x8DC1; 6 | const SAMPLER_2D_ARRAY_SHADOW = 0x8DC4; 7 | const SAMPLER_CUBE_SHADOW = 0x8DC5; 8 | const INT_SAMPLER_2D = 0x8DCA; 9 | const INT_SAMPLER_3D = 0x8DCB; 10 | const INT_SAMPLER_CUBE = 0x8DCC; 11 | const INT_SAMPLER_2D_ARRAY = 0x8DCF; 12 | const UNSIGNED_INT_SAMPLER_2D = 0x8DD2; 13 | const UNSIGNED_INT_SAMPLER_3D = 0x8DD3; 14 | const UNSIGNED_INT_SAMPLER_CUBE = 0x8DD4; 15 | const UNSIGNED_INT_SAMPLER_2D_ARRAY = 0x8DD7; 16 | 17 | const samplers = new Set([ 18 | SAMPLER_2D, 19 | SAMPLER_CUBE, 20 | SAMPLER_3D, 21 | SAMPLER_2D_SHADOW, 22 | SAMPLER_2D_ARRAY, 23 | SAMPLER_2D_ARRAY_SHADOW, 24 | SAMPLER_CUBE_SHADOW, 25 | ]); 26 | 27 | export function isSampler(type) { 28 | return samplers.has(type); 29 | } 30 | 31 | const samplerTypes = new Map([ 32 | [SAMPLER_2D, {uniformType: 'sampler2D', numberType: 'float/normalized', bindPoint: '2D'}], 33 | [SAMPLER_CUBE, {uniformType: 'samplerCube', numberType: 'float/normalized', bindPoint: 'CUBE'}], 34 | [SAMPLER_3D, {uniformType: 'sampler3D', numberType: 'float/normalized', bindPoint: '3D'}], 35 | [SAMPLER_2D_SHADOW, {uniformType: 'sampler2D', numberType: 'float/normalized', bindPoint: '2D'}], 36 | [SAMPLER_2D_ARRAY, {uniformType: 'sampler2DArray', numberType: 'float/normalized', bindPoint: '2D_ARRAY'}], 37 | [SAMPLER_2D_ARRAY_SHADOW, {uniformType: 'sampler2DArray', numberType: 'float/normalized', bindPoint: '2D_ARRAY'}], 38 | [SAMPLER_CUBE_SHADOW, {uniformType: 'samplerCube', numberType: 'float/normalized', bindPoint: 'CUBE'}], 39 | [INT_SAMPLER_2D, {uniformType: 'isampler2D', numberType: 'int', bindPoint: '2D'}], 40 | [INT_SAMPLER_3D, {uniformType: 'isampler3D', numberType: 'int', bindPoint: '3D'}], 41 | [INT_SAMPLER_CUBE, {uniformType: 'isamplerCube', numberType: 'int', bindPoint: 'CUBE'}], 42 | [INT_SAMPLER_2D_ARRAY, {uniformType: 'isampler2DArray', numberType: 'int', bindPoint: '2D_ARRAY'}], 43 | [UNSIGNED_INT_SAMPLER_2D, {uniformType: 'usampler2D', numberType: 'unsigned int', bindPoint: '2D'}], 44 | [UNSIGNED_INT_SAMPLER_3D, {uniformType: 'usampler3D', numberType: 'unsigned int', bindPoint: '3D'}], 45 | [UNSIGNED_INT_SAMPLER_CUBE, {uniformType: 'usamplerCube', numberType: 'unsigned int', bindPoint: 'CUBE'}], 46 | [UNSIGNED_INT_SAMPLER_2D_ARRAY, {uniformType: 'usampler2DArray', numberType: 'unsigned int', bindPoint: '2D_ARRAY'}], 47 | ]); 48 | 49 | export function getBindPointForSampler(type) { 50 | return samplerTypes.get(type).bindPoint; 51 | } 52 | 53 | export function uniformTypeIsSampler(type) { 54 | return samplerTypes.has(type); 55 | } 56 | 57 | export function getNumberTypeForUniformSamplerType(type) { 58 | return samplerTypes.get(type).numberType; 59 | } 60 | 61 | export function getUniformTypeForUniformSamplerType(type) { 62 | return samplerTypes.get(type).uniformType; 63 | } 64 | 65 | const TEXTURE_2D = 0x0DE1; 66 | const TEXTURE_3D = 0x806F; 67 | const TEXTURE_2D_ARRAY = 0x8C1A; 68 | const TEXTURE_CUBE_MAP = 0x8513; 69 | const TEXTURE_CUBE_MAP_POSITIVE_X = 0x8515; 70 | const TEXTURE_CUBE_MAP_NEGATIVE_X = 0x8516; 71 | const TEXTURE_CUBE_MAP_POSITIVE_Y = 0x8517; 72 | const TEXTURE_CUBE_MAP_NEGATIVE_Y = 0x8518; 73 | const TEXTURE_CUBE_MAP_POSITIVE_Z = 0x8519; 74 | const TEXTURE_CUBE_MAP_NEGATIVE_Z = 0x851A; 75 | 76 | const targetToBindPointMap = new Map([ 77 | [TEXTURE_2D, '2D'], 78 | [TEXTURE_3D, '3D'], 79 | [TEXTURE_CUBE_MAP, 'CUBE'], 80 | [TEXTURE_CUBE_MAP_POSITIVE_X, 'CUBE'], 81 | [TEXTURE_CUBE_MAP_NEGATIVE_X, 'CUBE'], 82 | [TEXTURE_CUBE_MAP_POSITIVE_Y, 'CUBE'], 83 | [TEXTURE_CUBE_MAP_NEGATIVE_Y, 'CUBE'], 84 | [TEXTURE_CUBE_MAP_POSITIVE_Z, 'CUBE'], 85 | [TEXTURE_CUBE_MAP_NEGATIVE_Z, 'CUBE'], 86 | [TEXTURE_2D_ARRAY, '2D_ARRAY'], 87 | ]); 88 | 89 | export function getBindPointForTarget(target) { 90 | return targetToBindPointMap.get(target); 91 | } 92 | 93 | const TEXTURE_BINDING_2D = 0x8069; 94 | const TEXTURE_BINDING_CUBE_MAP = 0x8514; 95 | const TEXTURE_BINDING_3D = 0x806A; 96 | const TEXTURE_BINDING_2D_ARRAY = 0x8C1D; 97 | 98 | const samplerTypeToBinding = new Map([ 99 | [SAMPLER_2D, TEXTURE_BINDING_2D], 100 | [SAMPLER_2D_SHADOW, TEXTURE_BINDING_2D], 101 | [SAMPLER_3D, TEXTURE_BINDING_3D], 102 | [SAMPLER_2D_ARRAY, TEXTURE_BINDING_2D_ARRAY], 103 | [SAMPLER_2D_ARRAY_SHADOW, TEXTURE_BINDING_2D_ARRAY], 104 | [SAMPLER_CUBE, TEXTURE_BINDING_CUBE_MAP], 105 | [SAMPLER_CUBE_SHADOW, TEXTURE_BINDING_CUBE_MAP], 106 | ]); 107 | 108 | export function getTextureForUnit(gl, unit, type) { 109 | gl.activeTexture(gl.TEXTURE0 + unit); 110 | const binding = samplerTypeToBinding.get(type); 111 | return gl.getParameter(binding); 112 | } 113 | -------------------------------------------------------------------------------- /test/tests/unset-uniform-tests.js: -------------------------------------------------------------------------------- 1 | import * as twgl from '../js/twgl-full.module.js'; 2 | import {assertDoesNotThrow, assertThrowsWith} from '../assert.js'; 3 | import {describe, it} from '../mocha-support.js'; 4 | import {createContext, not} from '../webgl.js'; 5 | 6 | describe('unset uniform tests', () => { 7 | 8 | it('test unset uniforms base', () => { 9 | const {gl, tagObject} = createContext(); 10 | const prg = twgl.createProgram(gl, [ 11 | ` 12 | void main() { 13 | gl_Position = vec4(0); 14 | gl_PointSize = 1.0; 15 | } 16 | `, 17 | ` 18 | precision mediump float; 19 | uniform vec4 diffuseColor; 20 | uniform vec4 ambient; 21 | uniform sampler2D diffuseTex; 22 | void main() { 23 | gl_FragColor = diffuseColor + ambient + texture2D(diffuseTex, vec2(0)); 24 | } 25 | `, 26 | ]); 27 | tagObject(prg, 'uniforms-program'); 28 | 29 | // bind a texture so we don't get an error about the texture missing 30 | const tex = gl.createTexture(); 31 | tagObject(tex, 'onePixelTexture'); 32 | gl.bindTexture(gl.TEXTURE_2D, tex); 33 | gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); 34 | 35 | gl.useProgram(prg); 36 | assertThrowsWith(() => { 37 | gl.drawArrays(gl.POINTS, 0, 1); // error, unset uniforms 38 | }, [ 39 | /ambient/, 40 | /diffuseColor/, 41 | not('diffuseTex'), 42 | ]); 43 | }); 44 | 45 | it('test unset uniforms ignored if disabled', () => { 46 | const {gl, ext, tagObject} = createContext(); 47 | if (!ext) { 48 | return; 49 | } 50 | ext.setConfiguration({failUnsetUniforms: false}); 51 | const prg = twgl.createProgram(gl, [ 52 | ` 53 | void main() { 54 | gl_Position = vec4(0); 55 | gl_PointSize = 1.0; 56 | } 57 | `, 58 | ` 59 | precision mediump float; 60 | uniform vec4 diffuseColor; 61 | uniform vec4 ambient; 62 | uniform sampler2D diffuseTex; 63 | void main() { 64 | gl_FragColor = diffuseColor + ambient + texture2D(diffuseTex, vec2(0)); 65 | } 66 | `, 67 | ]); 68 | tagObject(prg, 'uniforms-program'); 69 | 70 | // bind a texture so we don't get an error about the texture missing 71 | const tex = gl.createTexture(); 72 | tagObject(tex, 'onePixelTexture'); 73 | gl.bindTexture(gl.TEXTURE_2D, tex); 74 | gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); 75 | 76 | gl.useProgram(prg); 77 | assertDoesNotThrow(() => { 78 | gl.drawArrays(gl.POINTS, 0, 1); // error, unset uniforms 79 | }); 80 | }); 81 | 82 | it('test unset uniforms array', () => { 83 | const {gl, tagObject} = createContext(); 84 | const prg = twgl.createProgram(gl, [ 85 | ` 86 | void main() { 87 | gl_Position = vec4(0); 88 | gl_PointSize = 1.0; 89 | } 90 | `, 91 | ` 92 | precision mediump float; 93 | uniform vec4 diffuseColor[3]; 94 | uniform vec4 ambient[4]; 95 | uniform vec4 emissive[4]; 96 | void main() { 97 | gl_FragColor = diffuseColor[2] + ambient[3] + emissive[3]; 98 | } 99 | `, 100 | ]); 101 | tagObject(prg, 'uniforms-program'); 102 | gl.useProgram(prg); 103 | gl.uniform4fv(gl.getUniformLocation(prg, 'diffuseColor'), new Float32Array(16)); 104 | gl.uniform4fv(gl.getUniformLocation(prg, 'ambient[0]'), new Float32Array(4)); 105 | gl.uniform4fv(gl.getUniformLocation(prg, 'ambient[1]'), new Float32Array(4)); 106 | gl.uniform4fv(gl.getUniformLocation(prg, 'ambient[2]'), new Float32Array(4)); 107 | gl.uniform4f(gl.getUniformLocation(prg, 'ambient[3]'), 2, 3, 4, 5); 108 | gl.uniform4fv(gl.getUniformLocation(prg, 'emissive[3]'), [1, 2, 3, 4]); 109 | gl.uniform4fv(gl.getUniformLocation(prg, 'emissive[0]'), [1, 2, 3, 4]); 110 | assertThrowsWith(() => { 111 | gl.drawArrays(gl.POINTS, 0, 1); // error, unset uniforms 112 | }, [ 113 | /emissive\[1\]/, 114 | /emissive\[2\]/, 115 | not('emissive"'), 116 | not('emissive[0]'), 117 | not('emissive[3]'), 118 | not('diffuseColor'), 119 | not('ambient'), 120 | ]); 121 | }); 122 | 123 | it('test unset uniform sampler', () => { 124 | const {gl, ext, tagObject} = createContext(); 125 | if (ext) { 126 | ext.setConfiguration({failUnsetSamplerUniforms: true}); 127 | } 128 | const prg = twgl.createProgram(gl, [ 129 | ` 130 | void main() { 131 | gl_Position = vec4(0); 132 | gl_PointSize = 1.0; 133 | } 134 | `, 135 | ` 136 | precision mediump float; 137 | uniform vec4 diffuseColor; 138 | uniform vec4 ambient; 139 | uniform sampler2D diffuseTex; 140 | void main() { 141 | gl_FragColor = diffuseColor + ambient + texture2D(diffuseTex, vec2(0)); 142 | } 143 | `, 144 | ]); 145 | tagObject(prg, 'uniforms-program-with-samplers'); 146 | gl.useProgram(prg); 147 | 148 | // bind a texture so we don't get an error about the texture missing 149 | const tex = gl.createTexture(); 150 | tagObject(tex, 'onePixelTexture'); 151 | gl.bindTexture(gl.TEXTURE_2D, tex); 152 | gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); 153 | 154 | assertThrowsWith(() => { 155 | gl.drawArrays(gl.POINTS, 0, 1); // error, unset uniforms 156 | }, [/ambient/, /diffuseColor/, /diffuseTex/]); 157 | }); 158 | 159 | }); -------------------------------------------------------------------------------- /test/tests/undefined-uniform-tests.js: -------------------------------------------------------------------------------- 1 | import * as twgl from '../js/twgl-full.module.js'; 2 | import { 3 | assertEqual, 4 | assertThrowsWith, 5 | assertWarnsWith, 6 | } from '../assert.js'; 7 | import {before, describe, it} from '../mocha-support.js'; 8 | import {createContext} from '../webgl.js'; 9 | 10 | describe('undefined uniform tests', () => { 11 | 12 | it('warns when querying the location of an undefined uniform', () => { 13 | const {gl, tagObject} = createContext(); 14 | const prg = twgl.createProgram(gl, [ 15 | ` 16 | void main() { 17 | gl_Position = vec4(0, 0, 0, 1); 18 | } 19 | `, 20 | ` 21 | precision mediump float; 22 | uniform vec4 pointColor; 23 | void main() { 24 | gl_FragColor = pointColor; 25 | } 26 | `, 27 | ]); 28 | tagObject(prg, 'point program'); 29 | gl.useProgram(prg); 30 | let loc = 0; 31 | assertWarnsWith(() => { 32 | loc = gl.getUniformLocation(prg, 'badColor'); 33 | }, [ 34 | /'badColor' does not exist in/, 35 | /point program/, 36 | ]); 37 | assertEqual(loc, null); 38 | }); 39 | 40 | it('warns when setting an undefined uniform', () => { 41 | const {gl, tagObject} = createContext(); 42 | const prg = twgl.createProgram(gl, [ 43 | ` 44 | void main() { 45 | gl_Position = vec4(0, 0, 0, 1); 46 | } 47 | `, 48 | ` 49 | precision mediump float; 50 | uniform vec4 pointColor; 51 | void main() { 52 | gl_FragColor = pointColor; 53 | } 54 | `, 55 | ]); 56 | tagObject(prg, 'point program'); 57 | gl.useProgram(prg); 58 | const loc = gl.getUniformLocation(prg, 'badColor'); 59 | assertEqual(loc, null); 60 | assertWarnsWith(() => { 61 | gl.uniform4fv(loc, [1, 2, 3, 4]); 62 | }, [ 63 | /attempt to set non-existent uniform/, 64 | /point program/, 65 | ]); 66 | }); 67 | 68 | it('warns when setting an undefined uniform integer', () => { 69 | // needed because integer uniform could be a sample 70 | const {gl, tagObject} = createContext(); 71 | const prg = twgl.createProgram(gl, [ 72 | ` 73 | void main() { 74 | gl_Position = vec4(0, 0, 0, 1); 75 | } 76 | `, 77 | ` 78 | precision mediump float; 79 | uniform int foo; 80 | void main() { 81 | gl_FragColor = vec4(float(foo)); 82 | } 83 | `, 84 | ]); 85 | tagObject(prg, 'point program'); 86 | gl.useProgram(prg); 87 | const loc = gl.getUniformLocation(prg, 'bar'); 88 | assertEqual(loc, null); 89 | assertWarnsWith(() => { 90 | gl.uniform1i(loc, 1); 91 | }, [ 92 | /attempt to set non-existent uniform/, 93 | /point program/, 94 | ]); 95 | }); 96 | 97 | it('does not warn when querying the location of an ignored undefined uniform', () => { 98 | const {gl, ext, tagObject} = createContext(); 99 | if (ext) { 100 | ext.setConfiguration({ 101 | ignoreUniforms: ['badColor'], 102 | }); 103 | } 104 | const prg = twgl.createProgram(gl, [ 105 | ` 106 | void main() { 107 | gl_Position = vec4(0, 0, 0, 1); 108 | } 109 | `, 110 | ` 111 | precision mediump float; 112 | uniform vec4 pointColor; 113 | void main() { 114 | gl_FragColor = pointColor; 115 | } 116 | `, 117 | ]); 118 | tagObject(prg, 'point program'); 119 | gl.useProgram(prg); 120 | let loc = 0; 121 | assertWarnsWith(() => { 122 | loc = gl.getUniformLocation(prg, 'badColor'); 123 | }, [/^$/]); 124 | assertEqual(loc, null); 125 | }); 126 | 127 | describe('undefined uniform warnings disabled', () => { 128 | 129 | let gl; 130 | let tagObject; 131 | 132 | before(() => { 133 | const {gl: _gl, ext, tagObject: _tagObject} = createContext(); 134 | if (ext) { 135 | ext.setConfiguration({ 136 | warnUndefinedUniforms: false, 137 | }); 138 | } 139 | gl = _gl; 140 | tagObject = _tagObject; 141 | }); 142 | 143 | it('does not warn when querying the location of an undefined uniform', () => { 144 | const prg = twgl.createProgram(gl, [ 145 | ` 146 | void main() { 147 | gl_Position = vec4(0, 0, 0, 1); 148 | } 149 | `, 150 | ` 151 | precision mediump float; 152 | uniform vec4 pointColor; 153 | void main() { 154 | gl_FragColor = pointColor; 155 | } 156 | `, 157 | ]); 158 | tagObject(prg, 'point program'); 159 | gl.useProgram(prg); 160 | let loc = 1; 161 | assertWarnsWith(() => { 162 | loc = gl.getUniformLocation(prg, 'badColor'); 163 | }, [/^$/]); 164 | assertEqual(loc, null); 165 | }); 166 | 167 | it('does not warn when setting an undefined uniform', () => { 168 | const prg = twgl.createProgram(gl, [ 169 | ` 170 | void main() { 171 | gl_Position = vec4(0, 0, 0, 1); 172 | } 173 | `, 174 | ` 175 | precision mediump float; 176 | uniform vec4 pointColor; 177 | void main() { 178 | gl_FragColor = pointColor; 179 | } 180 | `, 181 | ]); 182 | tagObject(prg, 'point program'); 183 | gl.useProgram(prg); 184 | const loc = gl.getUniformLocation(prg, 'badColor'); 185 | assertEqual(loc, null); 186 | assertWarnsWith(() => { 187 | gl.uniform4fv(loc, [1, 2, 3, 4]); 188 | }, [/^$/]); 189 | }); 190 | 191 | }); 192 | 193 | describe('undefined uniform throws', () => { 194 | 195 | let gl; 196 | let tagObject; 197 | 198 | before(() => { 199 | const {gl: _gl, ext, tagObject: _tagObject} = createContext(); 200 | if (ext) { 201 | ext.setConfiguration({ 202 | failUndefinedUniforms: true, 203 | }); 204 | } 205 | gl = _gl; 206 | tagObject = _tagObject; 207 | }); 208 | 209 | it('throws querying the location of an undefined uniform', () => { 210 | const prg = twgl.createProgram(gl, [ 211 | ` 212 | void main() { 213 | gl_Position = vec4(0, 0, 0, 1); 214 | } 215 | `, 216 | ` 217 | precision mediump float; 218 | uniform vec4 pointColor; 219 | void main() { 220 | gl_FragColor = pointColor; 221 | } 222 | `, 223 | ]); 224 | tagObject(prg, 'point program'); 225 | gl.useProgram(prg); 226 | assertThrowsWith(() => { 227 | gl.getUniformLocation(prg, 'badColor'); 228 | }, [ 229 | /'badColor' does not exist in/, 230 | /point program/, 231 | ]); 232 | }); 233 | 234 | it('throws when setting an undefined uniform', () => { 235 | const prg = twgl.createProgram(gl, [ 236 | ` 237 | void main() { 238 | gl_Position = vec4(0, 0, 0, 1); 239 | } 240 | `, 241 | ` 242 | precision mediump float; 243 | uniform vec4 pointColor; 244 | void main() { 245 | gl_FragColor = pointColor; 246 | } 247 | `, 248 | ]); 249 | tagObject(prg, 'point program'); 250 | gl.useProgram(prg); 251 | const loc = null; 252 | assertThrowsWith(() => { 253 | gl.uniform4fv(loc, [1, 2, 3, 4]); 254 | }, [ 255 | /attempt to set non-existent uniform/, 256 | /point program/, 257 | ]); 258 | }); 259 | 260 | }); 261 | 262 | }); -------------------------------------------------------------------------------- /test/mocha.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | :root { 4 | --mocha-color: #000; 5 | --mocha-bg-color: #fff; 6 | --mocha-pass-icon-color: #00d6b2; 7 | --mocha-pass-color: #fff; 8 | --mocha-pass-shadow-color: rgba(0,0,0,.2); 9 | --mocha-pass-mediump-color: #c09853; 10 | --mocha-pass-slow-color: #b94a48; 11 | --mocha-test-pending-color: #0b97c4; 12 | --mocha-test-pending-icon-color: #0b97c4; 13 | --mocha-test-fail-color: #c00; 14 | --mocha-test-fail-icon-color: #c00; 15 | --mocha-test-fail-pre-color: #000; 16 | --mocha-test-fail-pre-error-color: #c00; 17 | --mocha-test-html-error-color: #000; 18 | --mocha-box-shadow-color: #eee; 19 | --mocha-box-bottom-color: #ddd; 20 | --mocha-test-replay-color: #888; 21 | --mocha-test-replay-bg-color: #eee; 22 | --mocha-stats-color: #888; 23 | --mocha-stats-em-color: #000; 24 | --mocha-stats-hover-color: #eee; 25 | --mocha-error-color: #c00; 26 | 27 | --mocha-code-comment: #ddd; 28 | --mocha-code-init: #2f6fad; 29 | --mocha-code-string: #5890ad; 30 | --mocha-code-keyword: #8a6343; 31 | --mocha-code-number: #2f6fad; 32 | } 33 | 34 | @media (prefers-color-scheme: dark) { 35 | :root { 36 | --mocha-color: #fff; 37 | --mocha-bg-color: #222; 38 | --mocha-pass-icon-color: #00d6b2; 39 | --mocha-pass-color: #222; 40 | --mocha-pass-shadow-color: rgba(255,255,255,.2); 41 | --mocha-pass-mediump-color: #f1be67; 42 | --mocha-pass-slow-color: #f49896; 43 | --mocha-test-pending-color: #0b97c4; 44 | --mocha-test-pending-icon-color: #0b97c4; 45 | --mocha-test-fail-color: #f44; 46 | --mocha-test-fail-icon-color: #f44; 47 | --mocha-test-fail-pre-color: #fff; 48 | --mocha-test-fail-pre-error-color: #f44; 49 | --mocha-test-html-error-color: #fff; 50 | --mocha-box-shadow-color: #444; 51 | --mocha-box-bottom-color: #555; 52 | --mocha-test-replay-color: #888; 53 | --mocha-test-replay-bg-color: #444; 54 | --mocha-stats-color: #aaa; 55 | --mocha-stats-em-color: #fff; 56 | --mocha-stats-hover-color: #444; 57 | --mocha-error-color: #f44; 58 | 59 | --mocha-code-comment: #ddd; 60 | --mocha-code-init: #9cc7f1; 61 | --mocha-code-string: #80d4ff; 62 | --mocha-code-keyword: #e3a470; 63 | --mocha-code-number: #4ca7ff; 64 | } 65 | } 66 | 67 | body { 68 | margin:0; 69 | background-color: var(--mocha-bg-color); 70 | color: var(--mocha-color); 71 | } 72 | 73 | #mocha { 74 | font: 20px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; 75 | margin: 60px 50px; 76 | } 77 | 78 | #mocha ul, 79 | #mocha li { 80 | margin: 0; 81 | padding: 0; 82 | } 83 | 84 | #mocha ul { 85 | list-style: none; 86 | } 87 | 88 | #mocha h1, 89 | #mocha h2 { 90 | margin: 0; 91 | } 92 | 93 | #mocha h1 { 94 | margin-top: 15px; 95 | font-size: 1em; 96 | font-weight: 200; 97 | } 98 | 99 | #mocha h1 a { 100 | text-decoration: none; 101 | color: inherit; 102 | } 103 | 104 | #mocha h1 a:hover { 105 | text-decoration: underline; 106 | } 107 | 108 | #mocha .suite .suite h1 { 109 | margin-top: 0; 110 | font-size: .8em; 111 | } 112 | 113 | #mocha .hidden { 114 | display: none; 115 | } 116 | 117 | #mocha h2 { 118 | font-size: 12px; 119 | font-weight: normal; 120 | cursor: pointer; 121 | } 122 | 123 | #mocha .suite { 124 | margin-left: 15px; 125 | } 126 | 127 | #mocha .test { 128 | margin-left: 15px; 129 | overflow: hidden; 130 | } 131 | 132 | #mocha .test.pending:hover h2::after { 133 | content: '(pending)'; 134 | font-family: arial, sans-serif; 135 | } 136 | 137 | #mocha .test.pass.medium .duration { 138 | background: var(--mocha-pass-mediump-color); 139 | } 140 | 141 | #mocha .test.pass.slow .duration { 142 | background: var(--mocha-pass-slow-color); 143 | } 144 | 145 | #mocha .test.pass::before { 146 | content: '✓'; 147 | font-size: 12px; 148 | display: block; 149 | float: left; 150 | margin-right: 5px; 151 | color: var(--mocha-pass-icon-color); 152 | } 153 | 154 | #mocha .test.pass .duration { 155 | font-size: 9px; 156 | margin-left: 5px; 157 | padding: 2px 5px; 158 | color: var(--mocha-pass-color); 159 | -webkit-box-shadow: inset 0 1px 1px var(--mocha-pass-shadow-color); 160 | -moz-box-shadow: inset 0 1px 1px var(--mocha-pass-shadow-color); 161 | box-shadow: inset 0 1px 1px var(--mocha-pass-shadow-color); 162 | -webkit-border-radius: 5px; 163 | -moz-border-radius: 5px; 164 | -ms-border-radius: 5px; 165 | -o-border-radius: 5px; 166 | border-radius: 5px; 167 | } 168 | 169 | #mocha .test.pass.fast .duration { 170 | display: none; 171 | } 172 | 173 | #mocha .test.pending { 174 | color: var(--mocha-test-pending-color); 175 | } 176 | 177 | #mocha .test.pending::before { 178 | content: '◦'; 179 | color: var(--mocha-test-pending-icon-color); 180 | } 181 | 182 | #mocha .test.fail { 183 | color: var(--mocha-test-fail-color); 184 | } 185 | 186 | #mocha .test.fail pre { 187 | color: var(--mocha-test-fail-pre-color); 188 | } 189 | 190 | #mocha .test.fail::before { 191 | content: '✖'; 192 | font-size: 12px; 193 | display: block; 194 | float: left; 195 | margin-right: 5px; 196 | color: var(--mocha-pass-icon-color); 197 | } 198 | 199 | #mocha .test pre.error { 200 | color: var(--mocha-test-fail-pre-error-color); 201 | max-height: 300px; 202 | overflow: auto; 203 | } 204 | 205 | #mocha .test .html-error { 206 | overflow: auto; 207 | color: var(--mocha-test-html-error-color); 208 | display: block; 209 | float: left; 210 | clear: left; 211 | font: 12px/1.5 monaco, monospace; 212 | margin: 5px; 213 | padding: 15px; 214 | border: 1px solid var(--mocha-box-shadow-color); 215 | max-width: 85%; /*(1)*/ 216 | max-width: -webkit-calc(100% - 42px); 217 | max-width: -moz-calc(100% - 42px); 218 | max-width: calc(100% - 42px); /*(2)*/ 219 | max-height: 300px; 220 | word-wrap: break-word; 221 | border-bottom-color: var(--mocha-box-bottom-color); 222 | -webkit-box-shadow: 0 1px 3px var(--mocha-box-shadow-color); 223 | -moz-box-shadow: 0 1px 3px var(--mocha-box-shadow-color); 224 | box-shadow: 0 1px 3px var(--mocha-box-shadow-color); 225 | -webkit-border-radius: 3px; 226 | -moz-border-radius: 3px; 227 | border-radius: 3px; 228 | } 229 | 230 | #mocha .test .html-error pre.error { 231 | border: none; 232 | -webkit-border-radius: 0; 233 | -moz-border-radius: 0; 234 | border-radius: 0; 235 | -webkit-box-shadow: 0; 236 | -moz-box-shadow: 0; 237 | box-shadow: 0; 238 | padding: 0; 239 | margin: 0; 240 | margin-top: 18px; 241 | max-height: none; 242 | } 243 | 244 | /** 245 | * (1): approximate for browsers not supporting calc 246 | * (2): 42 = 2*15 + 2*10 + 2*1 (padding + margin + border) 247 | * ^^ seriously 248 | */ 249 | #mocha .test pre { 250 | display: block; 251 | float: left; 252 | clear: left; 253 | font: 12px/1.5 monaco, monospace; 254 | margin: 5px; 255 | padding: 15px; 256 | border: 1px solid var(--mocha-box-shadow-color); 257 | max-width: 85%; /*(1)*/ 258 | max-width: -webkit-calc(100% - 42px); 259 | max-width: -moz-calc(100% - 42px); 260 | max-width: calc(100% - 42px); /*(2)*/ 261 | word-wrap: break-word; 262 | border-bottom-color: var(--mocha-box-bottom-color); 263 | -webkit-box-shadow: 0 1px 3px var(--mocha-box-shadow-color); 264 | -moz-box-shadow: 0 1px 3px var(--mocha-box-shadow-color); 265 | box-shadow: 0 1px 3px var(--mocha-box-shadow-color); 266 | -webkit-border-radius: 3px; 267 | -moz-border-radius: 3px; 268 | border-radius: 3px; 269 | } 270 | 271 | #mocha .test h2 { 272 | position: relative; 273 | } 274 | 275 | #mocha .test a.replay { 276 | position: absolute; 277 | top: 3px; 278 | right: 0; 279 | text-decoration: none; 280 | vertical-align: middle; 281 | display: block; 282 | width: 15px; 283 | height: 15px; 284 | line-height: 15px; 285 | text-align: center; 286 | background: var(--mocha-test-replay-bg-color); 287 | font-size: 15px; 288 | -webkit-border-radius: 15px; 289 | -moz-border-radius: 15px; 290 | border-radius: 15px; 291 | -webkit-transition:opacity 200ms; 292 | -moz-transition:opacity 200ms; 293 | -o-transition:opacity 200ms; 294 | transition: opacity 200ms; 295 | opacity: 0.3; 296 | color: var(--mocha-test-replay-color); 297 | } 298 | 299 | #mocha .test:hover a.replay { 300 | opacity: 1; 301 | } 302 | 303 | #mocha-report.pass .test.fail { 304 | display: none; 305 | } 306 | 307 | #mocha-report.fail .test.pass { 308 | display: none; 309 | } 310 | 311 | #mocha-report.pending .test.pass, 312 | #mocha-report.pending .test.fail { 313 | display: none; 314 | } 315 | #mocha-report.pending .test.pass.pending { 316 | display: block; 317 | } 318 | 319 | #mocha-error { 320 | color: var(--mocha-error-color); 321 | font-size: 1.5em; 322 | font-weight: 100; 323 | letter-spacing: 1px; 324 | } 325 | 326 | #mocha-stats { 327 | position: fixed; 328 | top: 15px; 329 | right: 10px; 330 | font-size: 12px; 331 | margin: 0; 332 | color: var(--mocha-stats-color); 333 | z-index: 1; 334 | } 335 | 336 | #mocha-stats .progress { 337 | float: right; 338 | padding-top: 0; 339 | 340 | /** 341 | * Set safe initial values, so mochas .progress does not inherit these 342 | * properties from Bootstrap .progress (which causes .progress height to 343 | * equal line height set in Bootstrap). 344 | */ 345 | height: auto; 346 | -webkit-box-shadow: none; 347 | -moz-box-shadow: none; 348 | box-shadow: none; 349 | background-color: initial; 350 | } 351 | 352 | #mocha-stats em { 353 | color: var(--mocha-stats-em-color); 354 | } 355 | 356 | #mocha-stats a { 357 | text-decoration: none; 358 | color: inherit; 359 | } 360 | 361 | #mocha-stats a:hover { 362 | border-bottom: 1px solid var(--mocha-stats-hover-color); 363 | } 364 | 365 | #mocha-stats li { 366 | display: inline-block; 367 | margin: 0 5px; 368 | list-style: none; 369 | padding-top: 11px; 370 | } 371 | 372 | #mocha-stats canvas { 373 | width: 40px; 374 | height: 40px; 375 | } 376 | 377 | #mocha code .comment { color: var(--mocha-code-comment); } 378 | #mocha code .init { color: var(--mocha-code-init); } 379 | #mocha code .string { color: var(--mocha-code-string); } 380 | #mocha code .keyword { color: var(--mocha-code-keyword); } 381 | #mocha code .number { color: var(--mocha-code-number); } 382 | 383 | @media screen and (max-device-width: 480px) { 384 | #mocha { 385 | margin: 60px 0px; 386 | } 387 | 388 | #mocha #stats { 389 | position: absolute; 390 | } 391 | } 392 | -------------------------------------------------------------------------------- /test/tests/buffer-overflow-tests.js: -------------------------------------------------------------------------------- 1 | import * as twgl from '../js/twgl-full.module.js'; 2 | import {assertDoesNotThrow, assertThrowsWith} from '../assert.js'; 3 | import {describe, it} from '../mocha-support.js'; 4 | import {createContext, checkDest} from '../webgl.js'; 5 | 6 | describe('buffer overflow tests', () => { 7 | 8 | it('test buffer overflow with drawArrays', () => { 9 | const {gl, tagObject} = createContext(); 10 | const vs = ` 11 | attribute vec4 position; 12 | attribute vec2 texcoord; 13 | attribute vec4 color; 14 | 15 | varying vec4 v_color; 16 | varying vec2 v_texcoord; 17 | 18 | void main() { 19 | gl_Position = position; 20 | v_color = color; 21 | v_texcoord = texcoord; 22 | } 23 | `; 24 | 25 | const fs = ` 26 | precision mediump float; 27 | 28 | varying vec4 v_color; 29 | varying vec2 v_texcoord; 30 | 31 | uniform sampler2D u_diffuse; 32 | 33 | void main() { 34 | gl_FragColor = texture2D(u_diffuse, v_texcoord) * v_color; 35 | } 36 | `; 37 | 38 | const prg = twgl.createProgram(gl, [vs, fs]); 39 | tagObject(prg, 'drawArraysPrg'); 40 | 41 | const tex = gl.createTexture(); 42 | tagObject(tex, 'drawArraysTex'); 43 | gl.bindTexture(gl.TEXTURE_2D, tex); 44 | gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); 45 | 46 | function makeBuffer(gl, prg, name, size, data) { 47 | const buf = gl.createBuffer(); 48 | tagObject(buf, name); 49 | gl.bindBuffer(gl.ARRAY_BUFFER, buf); 50 | gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW); 51 | const loc = gl.getAttribLocation(prg, name); 52 | gl.enableVertexAttribArray(loc); 53 | gl.vertexAttribPointer(loc, size, gl.FLOAT, false, 0, 0); 54 | } 55 | 56 | const positions = new Float32Array([0, 0, 1, 0, 0, 1]); 57 | const texcoords = new Float32Array([0, 0, 1, 0, 0]); // 1 short 58 | const colors = new Float32Array([1, 0, 0, 1, 0, 1, 0, 1, 0, 0, 1, 1]); 59 | 60 | makeBuffer(gl, prg, 'position', 2, positions); 61 | makeBuffer(gl, prg, 'texcoord', 2, texcoords); 62 | makeBuffer(gl, prg, 'color', 4, colors); 63 | 64 | gl.useProgram(prg); 65 | // an implementation is allowed to not generate an error 66 | // for out of bounds access if the guarantees that out of bounds 67 | // access is safe. In other words if the out of bound access is 68 | // either limited internally (eg. `ndx = clamp(ndx, 0, maxIndex)`) 69 | // or if the out of bounds access only accesses data provided by 70 | // the page itself. (eg. `ndx = ndx % bufferLength`) 71 | assertThrowsWith(() => { 72 | gl.drawArrays(gl.TRIANGLES, 0, 3); // buffer overflow 73 | }, [/drawArraysPrg/, /"texcoord"/, /attribute 'texcoord'/]); 74 | }); 75 | 76 | it('test buffer overflow with drawElements', () => { 77 | const {gl, tagObject} = createContext(); 78 | const vs = ` 79 | attribute vec4 position; 80 | attribute vec2 texcoord; 81 | attribute vec4 color; 82 | 83 | varying vec4 v_color; 84 | varying vec2 v_texcoord; 85 | 86 | void main() { 87 | gl_Position = position; 88 | v_color = color; 89 | v_texcoord = texcoord; 90 | } 91 | `; 92 | 93 | const fs = ` 94 | precision mediump float; 95 | 96 | varying vec4 v_color; 97 | varying vec2 v_texcoord; 98 | 99 | uniform sampler2D u_diffuse; 100 | 101 | void main() { 102 | gl_FragColor = texture2D(u_diffuse, v_texcoord) * v_color; 103 | } 104 | `; 105 | 106 | const prg = twgl.createProgram(gl, [vs, fs]); 107 | tagObject(prg, 'drawElementsPrg'); 108 | 109 | const tex = gl.createTexture(); 110 | tagObject(tex, 'drawElementsTex'); 111 | gl.bindTexture(gl.TEXTURE_2D, tex); 112 | gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); 113 | 114 | function makeBuffer(gl, name, data, target = gl.ARRAY_BUFFER) { 115 | const buf = gl.createBuffer(); 116 | tagObject(buf, name); 117 | gl.bindBuffer(target, buf); 118 | gl.bufferData(target, data, gl.STATIC_DRAW); 119 | } 120 | 121 | function makeBufferAndSetAttrib(gl, prg, name, size, data) { 122 | makeBuffer(gl, name, data); 123 | const loc = gl.getAttribLocation(prg, name); 124 | gl.enableVertexAttribArray(loc); 125 | gl.vertexAttribPointer(loc, size, gl.FLOAT, false, 0, 0); 126 | } 127 | 128 | const positions = new Float32Array([0, 0, 1, 0, 0, 1, 0, 0]); // 4 entries 129 | const texcoords = new Float32Array([0, 0, 1, 0, 0, 1]); // 3 entries 130 | const colors = new Float32Array([1, 0, 0, 1, 0, 1, 0, 1, 0, 0, 1, 1, 1, 1, 1, 1]); // 4 entries 131 | const indices = new Uint16Array([0, 1, 3]); // 3 is out of bounds for texcoord 132 | 133 | makeBufferAndSetAttrib(gl, prg, 'position', 2, positions); 134 | makeBufferAndSetAttrib(gl, prg, 'texcoord', 2, texcoords); 135 | makeBufferAndSetAttrib(gl, prg, 'color', 4, colors); 136 | makeBuffer(gl, 'indices', indices, gl.ELEMENT_ARRAY_BUFFER); 137 | 138 | gl.useProgram(prg); 139 | 140 | assertThrowsWith(() => { 141 | gl.drawElements(gl.TRIANGLES, 3, gl.UNSIGNED_SHORT, 0); // buffer overflow 142 | }, [/drawElementsPrg/, /"texcoord"/, /attribute 'texcoord'/]); 143 | }); 144 | 145 | it('test buffer overflow with bufferSubData', () => { 146 | const {gl} = createContext(); 147 | const buffer = gl.createBuffer(); 148 | const data = new Uint8Array(512); 149 | gl.bindBuffer(gl.ARRAY_BUFFER, buffer); 150 | gl.bufferData(gl.ARRAY_BUFFER, 512, gl.STATIC_DRAW); 151 | assertThrowsWith(() => { 152 | gl.bufferSubData(gl.ARRAY_BUFFER, 1, data); 153 | }, [/buffer is too small for data/]); 154 | }); 155 | 156 | it('test buffer overflow with bufferSubData on size 0 buffer', () => { 157 | const {gl} = createContext(); 158 | const buffer = gl.createBuffer(); 159 | const data = new Uint8Array(512); 160 | gl.bindBuffer(gl.ARRAY_BUFFER, buffer); 161 | assertThrowsWith(() => { 162 | gl.bufferSubData(gl.ARRAY_BUFFER, 0, data); 163 | }, [/has 0 size/]); 164 | }); 165 | 166 | it('test buffer overflow with drawElements offset TypedArrays', () => { 167 | const {gl, tagObject} = createContext(); 168 | 169 | const vs = ` 170 | attribute vec4 position; 171 | 172 | void main() { 173 | gl_Position = position; 174 | } 175 | `; 176 | 177 | const fs = ` 178 | precision mediump float; 179 | 180 | void main() { 181 | gl_FragColor = vec4(1, 0, 0, 1); 182 | } 183 | `; 184 | const prg = twgl.createProgram(gl, [vs, fs]); 185 | gl.useProgram(prg); 186 | 187 | function makeBuffer(gl, name, data, target = gl.ARRAY_BUFFER) { 188 | const buf = gl.createBuffer(); 189 | tagObject(buf, name); 190 | gl.bindBuffer(target, buf); 191 | gl.bufferData(target, data, gl.STATIC_DRAW); 192 | } 193 | 194 | function makeBufferAndSetAttrib(gl, prg, name, size, data) { 195 | makeBuffer(gl, name, data); 196 | const loc = gl.getAttribLocation(prg, name); 197 | gl.enableVertexAttribArray(loc); 198 | gl.vertexAttribPointer(loc, size, gl.FLOAT, false, 0, 0); 199 | } 200 | 201 | const arrayBuffer = new ArrayBuffer(12 * 4 + 6 * 2); 202 | const positions = new Float32Array(arrayBuffer, 0, 12); 203 | const indices = new Uint16Array(arrayBuffer, 12 * 4, 6); 204 | positions.set([-1, 1, 0, 1, 1, 0, 1, -1, 0, -1, -1, 0]); 205 | indices.set([0, 1, 2, 0, 2, 3]); 206 | 207 | makeBufferAndSetAttrib(gl, prg, 'position', 3, positions); 208 | makeBuffer(gl, 'indices', indices, gl.ELEMENT_ARRAY_BUFFER); 209 | 210 | gl.useProgram(prg); 211 | 212 | // there was an internal bug not handling offset TypedArrays 213 | assertDoesNotThrow(() => { 214 | gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0); 215 | }); 216 | }); 217 | 218 | it('test buffer overflow with drawElements offset TypedArrays using bufferSubData', () => { 219 | const {gl, tagObject} = createContext(); 220 | 221 | const vs = ` 222 | attribute vec4 position; 223 | 224 | void main() { 225 | gl_Position = position; 226 | } 227 | `; 228 | 229 | const fs = ` 230 | precision mediump float; 231 | 232 | void main() { 233 | gl_FragColor = vec4(0, 1, 0, 1); 234 | } 235 | `; 236 | const prg = twgl.createProgram(gl, [vs, fs]); 237 | gl.useProgram(prg); 238 | 239 | function makeBuffer(gl, name, data, target = gl.ARRAY_BUFFER) { 240 | const buf = gl.createBuffer(); 241 | tagObject(buf, name); 242 | gl.bindBuffer(target, buf); 243 | gl.bufferData(target, data.byteLength, gl.STATIC_DRAW); 244 | gl.bufferSubData(target, 0, data); 245 | } 246 | 247 | function makeBufferAndSetAttrib(gl, prg, name, size, data) { 248 | makeBuffer(gl, name, data); 249 | const loc = gl.getAttribLocation(prg, name); 250 | gl.enableVertexAttribArray(loc); 251 | gl.vertexAttribPointer(loc, size, gl.FLOAT, false, 0, 0); 252 | } 253 | 254 | const arrayBuffer = new ArrayBuffer(12 * 4 + 6 * 2); 255 | const positions = new Float32Array(arrayBuffer, 0, 12); 256 | const indices = new Uint16Array(arrayBuffer, 12 * 4, 6); 257 | positions.set([ 258 | -1, 1, 0, 259 | 1, 1, 0, 260 | 1, -1, 0, 261 | -1, -1, 0, 262 | ]); 263 | indices.set([0, 1, 2, 0, 2, 3]); 264 | 265 | makeBufferAndSetAttrib(gl, prg, 'position', 3, positions); 266 | makeBuffer(gl, 'indices', indices, gl.ELEMENT_ARRAY_BUFFER); 267 | 268 | gl.useProgram(prg); 269 | gl.clearColor(1, 0, 0, 1); 270 | gl.clear(gl.COLOR_BUFFER_BIT); 271 | gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0); 272 | 273 | checkDest(gl, [0, 255, 0, 255]); 274 | }); 275 | 276 | it('test buffer overflow with drawArraysInstanced', () => { 277 | const {gl, tagObject} = createContext(); 278 | const vs = ` 279 | attribute vec4 position; 280 | attribute vec2 texcoord; 281 | attribute vec4 color; 282 | 283 | varying vec4 v_color; 284 | varying vec2 v_texcoord; 285 | 286 | void main() { 287 | gl_Position = position; 288 | v_color = color; 289 | v_texcoord = texcoord; 290 | } 291 | `; 292 | 293 | const fs = ` 294 | precision mediump float; 295 | 296 | varying vec4 v_color; 297 | varying vec2 v_texcoord; 298 | 299 | uniform sampler2D u_diffuse; 300 | 301 | void main() { 302 | gl_FragColor = texture2D(u_diffuse, v_texcoord) * v_color; 303 | } 304 | `; 305 | 306 | const ext = gl.getExtension('ANGLE_instanced_arrays'); 307 | if (!ext) { 308 | throw new Error('drawArraysInstancedProg "color", attribute \'color\''); 309 | } 310 | 311 | const prg = twgl.createProgram(gl, [vs, fs]); 312 | tagObject(prg, 'drawArraysInstancedPrg'); 313 | 314 | const tex = gl.createTexture(); 315 | tagObject(tex, 'drawArraysInstancedTex'); 316 | gl.bindTexture(gl.TEXTURE_2D, tex); 317 | gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); 318 | 319 | function makeBuffer(gl, name, data, target = gl.ARRAY_BUFFER) { 320 | const buf = gl.createBuffer(); 321 | tagObject(buf, name); 322 | gl.bindBuffer(target, buf); 323 | gl.bufferData(target, data, gl.STATIC_DRAW); 324 | } 325 | 326 | function makeBufferAndSetAttrib(gl, prg, name, size, data, divisor = 0) { 327 | makeBuffer(gl, name, data); 328 | const loc = gl.getAttribLocation(prg, name); 329 | gl.enableVertexAttribArray(loc); 330 | gl.vertexAttribPointer(loc, size, gl.FLOAT, false, 0, 0); 331 | ext.vertexAttribDivisorANGLE(loc, divisor); 332 | } 333 | 334 | const positions = new Float32Array([0, 0, 1, 0, 0, 1]); 335 | const texcoords = new Float32Array([0, 0, 1, 0, 0, 1]); 336 | const colors = new Float32Array([1, 0, 0, 1, 0, 1, 0, 1, 0, 0, 1, 1]); // 1 short 337 | 338 | makeBufferAndSetAttrib(gl, prg, 'position', 2, positions); 339 | makeBufferAndSetAttrib(gl, prg, 'texcoord', 2, texcoords); 340 | makeBufferAndSetAttrib(gl, prg, 'color', 4, colors, 1); 341 | 342 | gl.useProgram(prg); 343 | // an implementation is allowed to not generate an error 344 | // for out of bounds access if the guarantees that out of bounds 345 | // access is safe. In other words if the out of bound access is 346 | // either limited internally (eg. `ndx = clamp(ndx, 0, maxIndex)`) 347 | // or if the out of bounds access only accesses data provided by 348 | // the page itself. (eg. `ndx = ndx % bufferLength`) 349 | assertThrowsWith(() => { 350 | ext.drawArraysInstancedANGLE(gl.TRIANGLES, 0, 3, 4); // 1 too many instances 351 | }, [/drawArraysInstancedPrg/, /"color"/, /attribute 'color'/]); 352 | }); 353 | 354 | }); -------------------------------------------------------------------------------- /src/utils.js: -------------------------------------------------------------------------------- 1 | export function isBuiltIn(name) { 2 | return name.startsWith('gl_') || name.startsWith('webgl_'); 3 | } 4 | 5 | export function isWebGL2(gl) { 6 | // a proxy for if this is webgl 7 | return !!gl.texImage3D; 8 | } 9 | 10 | export function isTypedArray(v) { 11 | return v && v.buffer && v.buffer instanceof ArrayBuffer; 12 | } 13 | 14 | export function isArrayThatCanHaveBadValues(v) { 15 | return Array.isArray(v) || 16 | v instanceof Float32Array || 17 | v instanceof Float64Array; 18 | } 19 | 20 | export function quotedStringOrEmpty(s) { 21 | return s ? `"${s}"` : ''; 22 | } 23 | 24 | /** 25 | * Types of contexts we have added to map 26 | */ 27 | const mappedContextTypes = {}; 28 | 29 | /** 30 | * Map of numbers to names. 31 | * @type {Object} 32 | */ 33 | const glEnums = {}; 34 | 35 | /** 36 | * Map of names to numbers. 37 | * @type {Object} 38 | */ 39 | const enumStringToValue = {}; 40 | 41 | /** 42 | * Initializes this module. Safe to call more than once. 43 | * @param {!WebGLRenderingContext} ctx A WebGL context. If 44 | * you have more than one context it doesn't matter which one 45 | * you pass in, it is only used to pull out constants. 46 | */ 47 | export function addEnumsForContext(ctx, type) { 48 | if (!mappedContextTypes[type]) { 49 | mappedContextTypes[type] = true; 50 | for (const propertyName in ctx) { 51 | if (typeof ctx[propertyName] === 'number') { 52 | glEnums[ctx[propertyName]] = propertyName; 53 | enumStringToValue[propertyName] = ctx[propertyName]; 54 | } 55 | } 56 | } 57 | } 58 | 59 | export function enumArrayToString(gl, enums) { 60 | const enumStrings = []; 61 | if (enums.length) { 62 | for (let i = 0; i < enums.length; ++i) { 63 | enums.push(glEnumToString(enums[i])); // eslint-disable-line 64 | } 65 | return '[' + enumStrings.join(', ') + ']'; 66 | } 67 | return enumStrings.toString(); 68 | } 69 | 70 | export function makeBitFieldToStringFunc(enums) { 71 | return function(gl, value) { 72 | let orResult = 0; 73 | const orEnums = []; 74 | for (let i = 0; i < enums.length; ++i) { 75 | const enumValue = enumStringToValue[enums[i]]; 76 | if ((value & enumValue) !== 0) { 77 | orResult |= enumValue; 78 | orEnums.push(glEnumToString(enumValue)); // eslint-disable-line 79 | } 80 | } 81 | if (orResult === value) { 82 | return orEnums.join(' | '); 83 | } else { 84 | return glEnumToString(value); // eslint-disable-line 85 | } 86 | }; 87 | } 88 | 89 | /** @type Map> */ 90 | const enumToStringsMap = new Map(); 91 | export function addEnumsFromAPI(api) { 92 | for (const key in api) { 93 | const value = api[key]; 94 | if (typeof value === 'number') { 95 | if (!enumToStringsMap.has(value)) { 96 | enumToStringsMap.set(value, new Set()); 97 | } 98 | enumToStringsMap.get(value).add(key); 99 | } 100 | } 101 | } 102 | 103 | /** 104 | * Gets an string version of an WebGL enum. 105 | * 106 | * Example: 107 | * var str = WebGLDebugUtil.glEnumToString(ctx.getError()); 108 | * 109 | * @param {number} value Value to return an enum for 110 | * @return {string} The string version of the enum. 111 | */ 112 | export function glEnumToString(value) { 113 | const matches = enumToStringsMap.get(value); 114 | return matches 115 | ? [...matches.keys()].map(v => `${v}`).join(' | ') 116 | : `/*UNKNOWN WebGL ENUM*/ ${typeof value === 'number' ? `0x${value.toString(16)}` : value}`; 117 | } 118 | 119 | // --------------------------------- 120 | const FLOAT = 0x1406; 121 | const FLOAT_VEC2 = 0x8B50; 122 | const FLOAT_VEC3 = 0x8B51; 123 | const FLOAT_VEC4 = 0x8B52; 124 | const INT = 0x1404; 125 | const INT_VEC2 = 0x8B53; 126 | const INT_VEC3 = 0x8B54; 127 | const INT_VEC4 = 0x8B55; 128 | const BOOL = 0x8B56; 129 | const BOOL_VEC2 = 0x8B57; 130 | const BOOL_VEC3 = 0x8B58; 131 | const BOOL_VEC4 = 0x8B59; 132 | const FLOAT_MAT2 = 0x8B5A; 133 | const FLOAT_MAT3 = 0x8B5B; 134 | const FLOAT_MAT4 = 0x8B5C; 135 | const SAMPLER_2D = 0x8B5E; 136 | const SAMPLER_CUBE = 0x8B60; 137 | const SAMPLER_3D = 0x8B5F; 138 | const SAMPLER_2D_SHADOW = 0x8B62; 139 | const FLOAT_MAT2x3 = 0x8B65; 140 | const FLOAT_MAT2x4 = 0x8B66; 141 | const FLOAT_MAT3x2 = 0x8B67; 142 | const FLOAT_MAT3x4 = 0x8B68; 143 | const FLOAT_MAT4x2 = 0x8B69; 144 | const FLOAT_MAT4x3 = 0x8B6A; 145 | const SAMPLER_2D_ARRAY = 0x8DC1; 146 | const SAMPLER_2D_ARRAY_SHADOW = 0x8DC4; 147 | const SAMPLER_CUBE_SHADOW = 0x8DC5; 148 | const UNSIGNED_INT = 0x1405; 149 | const UNSIGNED_INT_VEC2 = 0x8DC6; 150 | const UNSIGNED_INT_VEC3 = 0x8DC7; 151 | const UNSIGNED_INT_VEC4 = 0x8DC8; 152 | const INT_SAMPLER_2D = 0x8DCA; 153 | const INT_SAMPLER_3D = 0x8DCB; 154 | const INT_SAMPLER_CUBE = 0x8DCC; 155 | const INT_SAMPLER_2D_ARRAY = 0x8DCF; 156 | const UNSIGNED_INT_SAMPLER_2D = 0x8DD2; 157 | const UNSIGNED_INT_SAMPLER_3D = 0x8DD3; 158 | const UNSIGNED_INT_SAMPLER_CUBE = 0x8DD4; 159 | const UNSIGNED_INT_SAMPLER_2D_ARRAY = 0x8DD7; 160 | 161 | const uniformTypeMap = new Map([ 162 | [FLOAT, { size: 1, name: 'float', }], 163 | [FLOAT_VEC2, { size: 2, name: 'vec2', }], 164 | [FLOAT_VEC3, { size: 3, name: 'vec3', }], 165 | [FLOAT_VEC4, { size: 4, name: 'vec4', }], 166 | [INT, { size: 1, name: 'int', }], 167 | [INT_VEC2, { size: 2, name: 'ivec2', }], 168 | [INT_VEC3, { size: 3, name: 'ivec3', }], 169 | [INT_VEC4, { size: 4, name: 'ivec4', }], 170 | [UNSIGNED_INT, { size: 1, name: 'uint', }], 171 | [UNSIGNED_INT_VEC2, { size: 2, name: 'uvec2', }], 172 | [UNSIGNED_INT_VEC3, { size: 3, name: 'uvec3', }], 173 | [UNSIGNED_INT_VEC4, { size: 4, name: 'uvec4', }], 174 | [BOOL, { size: 1, name: 'bool', }], 175 | [BOOL_VEC2, { size: 2, name: 'bvec2', }], 176 | [BOOL_VEC3, { size: 3, name: 'bvec3', }], 177 | [BOOL_VEC4, { size: 4, name: 'bvec4', }], 178 | [FLOAT_MAT2, { size: 4, name: 'mat2', }], 179 | [FLOAT_MAT3, { size: 9, name: 'mat3', }], 180 | [FLOAT_MAT4, { size: 16, name: 'mat4', }], 181 | [FLOAT_MAT2x3, { size: 6, name: 'mat2x3', }], 182 | [FLOAT_MAT2x4, { size: 8, name: 'mat2x4', }], 183 | [FLOAT_MAT3x2, { size: 6, name: 'mat3x2', }], 184 | [FLOAT_MAT3x4, { size: 12, name: 'mat3x4', }], 185 | [FLOAT_MAT4x2, { size: 8, name: 'mat4x2', }], 186 | [FLOAT_MAT4x3, { size: 12, name: 'mat4x3', }], 187 | [SAMPLER_2D, { size: 1, name: 'sampler2D', }], 188 | [SAMPLER_CUBE, { size: 1, name: 'samplerCube', }], 189 | [SAMPLER_3D, { size: 1, name: 'sampler3D', }], 190 | [SAMPLER_2D_SHADOW, { size: 1, name: 'sampler2DShadow', }], 191 | [SAMPLER_2D_ARRAY, { size: 1, name: 'sampler2DArray', }], 192 | [SAMPLER_2D_ARRAY_SHADOW, { size: 1, name: 'sampler2DArrayShadow', }], 193 | [SAMPLER_CUBE_SHADOW, { size: 1, name: 'samplerCubeShadow', }], 194 | [INT_SAMPLER_2D, { size: 1, name: 'isampler2D', }], 195 | [INT_SAMPLER_3D, { size: 1, name: 'isampler3D', }], 196 | [INT_SAMPLER_CUBE, { size: 1, name: 'isamplerCube', }], 197 | [INT_SAMPLER_2D_ARRAY, { size: 1, name: 'isampler2DArray', }], 198 | [UNSIGNED_INT_SAMPLER_2D, { size: 1, name: 'usampler2D', }], 199 | [UNSIGNED_INT_SAMPLER_3D, { size: 1, name: 'usampler3D', }], 200 | [UNSIGNED_INT_SAMPLER_CUBE, { size: 1, name: 'usamplerCube', }], 201 | [UNSIGNED_INT_SAMPLER_2D_ARRAY, { size: 1, name: 'usampler2DArray', }], 202 | ]); 203 | 204 | export function getUniformTypeInfo(type) { 205 | return uniformTypeMap.get(type); 206 | } 207 | 208 | // --------------------------------- 209 | 210 | 211 | const TEXTURE_BINDING_2D = 0x8069; 212 | const TEXTURE_BINDING_CUBE_MAP = 0x8514; 213 | const TEXTURE_BINDING_3D = 0x806A; 214 | const TEXTURE_BINDING_2D_ARRAY = 0x8C1D; 215 | 216 | 217 | const ARRAY_BUFFER = 0x8892; 218 | const ELEMENT_ARRAY_BUFFER = 0x8893; 219 | const ARRAY_BUFFER_BINDING = 0x8894; 220 | const ELEMENT_ARRAY_BUFFER_BINDING = 0x8895; 221 | const TEXTURE_2D = 0x0DE1; 222 | const TEXTURE_3D = 0x806F; 223 | const TEXTURE_2D_ARRAY = 0x8C1A; 224 | const TEXTURE_CUBE_MAP = 0x8513; 225 | const FRAMEBUFFER = 0x8D40; 226 | const RENDERBUFFER = 0x8D41; 227 | const FRAMEBUFFER_BINDING = 0x8CA6; 228 | const RENDERBUFFER_BINDING = 0x8CA7; 229 | const TRANSFORM_FEEDBACK_BUFFER = 0x8C8E; 230 | const TRANSFORM_FEEDBACK_BUFFER_BINDING = 0x8C8F; 231 | const DRAW_FRAMEBUFFER = 0x8CA9; 232 | const READ_FRAMEBUFFER = 0x8CA8; 233 | const READ_FRAMEBUFFER_BINDING = 0x8CAA; 234 | const UNIFORM_BUFFER = 0x8A11; 235 | const UNIFORM_BUFFER_BINDING = 0x8A28; 236 | const TRANSFORM_FEEDBACK = 0x8E22; 237 | const TRANSFORM_FEEDBACK_BINDING = 0x8E25; 238 | 239 | const bindPointMap = new Map([ 240 | [ARRAY_BUFFER, ARRAY_BUFFER_BINDING], 241 | [ELEMENT_ARRAY_BUFFER, ELEMENT_ARRAY_BUFFER_BINDING], 242 | [TEXTURE_2D, TEXTURE_BINDING_2D], 243 | [TEXTURE_CUBE_MAP, TEXTURE_BINDING_CUBE_MAP], 244 | [TEXTURE_3D, TEXTURE_BINDING_3D], 245 | [TEXTURE_2D_ARRAY, TEXTURE_BINDING_2D_ARRAY], 246 | [RENDERBUFFER, RENDERBUFFER_BINDING], 247 | [FRAMEBUFFER, FRAMEBUFFER_BINDING], 248 | [DRAW_FRAMEBUFFER, FRAMEBUFFER_BINDING], 249 | [READ_FRAMEBUFFER, READ_FRAMEBUFFER_BINDING], 250 | [UNIFORM_BUFFER, UNIFORM_BUFFER_BINDING], 251 | [TRANSFORM_FEEDBACK_BUFFER, TRANSFORM_FEEDBACK_BUFFER_BINDING], 252 | [TRANSFORM_FEEDBACK, TRANSFORM_FEEDBACK_BINDING], 253 | ]); 254 | 255 | export function getBindingQueryEnumForBindPoint(bindPoint) { 256 | return bindPointMap.get(bindPoint); 257 | } 258 | 259 | const BYTE = 0x1400; 260 | const SHORT = 0x1402; 261 | const UNSIGNED_BYTE = 0x1401; 262 | const UNSIGNED_SHORT = 0x1403; 263 | 264 | const glTypeToSizeMap = new Map([ 265 | [BOOL , 1], 266 | [BYTE , 1], 267 | [UNSIGNED_BYTE , 1], 268 | [SHORT , 2], 269 | [UNSIGNED_SHORT , 2], 270 | [INT , 4], 271 | [UNSIGNED_INT , 4], 272 | [FLOAT , 4], 273 | ]); 274 | 275 | export function getBytesPerValueForGLType(type) { 276 | return glTypeToSizeMap.get(type) || 0; 277 | } 278 | 279 | const glTypeToTypedArrayMap = new Map([ 280 | [UNSIGNED_BYTE, Uint8Array], 281 | [UNSIGNED_SHORT, Uint16Array], 282 | [UNSIGNED_INT, Uint32Array], 283 | ]); 284 | 285 | export function glTypeToTypedArray(type) { 286 | return glTypeToTypedArrayMap.get(type); 287 | } 288 | 289 | const drawFuncsToArgs = { 290 | drawArrays(primType, startOffset, vertCount) { 291 | return {startOffset, vertCount, instances: 1}; 292 | }, 293 | drawElements(primType, vertCount, indexType, startOffset) { 294 | return {startOffset, vertCount, instances: 1, indexType}; 295 | }, 296 | drawArraysInstanced(primType, startOffset, vertCount, instances) { 297 | return {startOffset, vertCount, instances}; 298 | }, 299 | drawElementsInstanced(primType, vertCount, indexType, startOffset, instances) { 300 | return {startOffset, vertCount, instances, indexType}; 301 | }, 302 | drawArraysInstancedANGLE(primType, startOffset, vertCount, instances) { 303 | return {startOffset, vertCount, instances}; 304 | }, 305 | drawElementsInstancedANGLE(primType, vertCount, indexType, startOffset, instances) { 306 | return {startOffset, vertCount, instances, indexType}; 307 | }, 308 | drawRangeElements(primType, start, end, vertCount, indexType, startOffset) { 309 | return {startOffset, vertCount, instances: 1, indexType}; 310 | }, 311 | }; 312 | 313 | export function getDrawFunctionArgs(funcName, args) { 314 | return drawFuncsToArgs[funcName](...args); 315 | } 316 | 317 | export function isDrawFunction(funcName) { 318 | return !!drawFuncsToArgs[funcName]; 319 | } 320 | 321 | const attrTypeMap = new Map([ 322 | [FLOAT, { size: 4, }], 323 | [FLOAT_VEC2, { size: 8, }], 324 | [FLOAT_VEC3, { size: 12, }], 325 | [FLOAT_VEC4, { size: 16, }], 326 | [INT, { size: 4, }], 327 | [INT_VEC2, { size: 8, }], 328 | [INT_VEC3, { size: 12, }], 329 | [INT_VEC4, { size: 16, }], 330 | [UNSIGNED_INT, { size: 4, }], 331 | [UNSIGNED_INT_VEC2, { size: 8, }], 332 | [UNSIGNED_INT_VEC3, { size: 12, }], 333 | [UNSIGNED_INT_VEC4, { size: 16, }], 334 | [BOOL, { size: 4, }], 335 | [BOOL_VEC2, { size: 8, }], 336 | [BOOL_VEC3, { size: 12, }], 337 | [BOOL_VEC4, { size: 16, }], 338 | [FLOAT_MAT2, { size: 4, count: 2, }], 339 | [FLOAT_MAT3, { size: 9, count: 3, }], 340 | [FLOAT_MAT4, { size: 16, count: 4, }], 341 | ]); 342 | 343 | export function getAttributeTypeInfo(type) { 344 | return attrTypeMap.get(type); 345 | } 346 | 347 | export const createWeakRef = obj => obj ? new WeakRef(obj) : null; 348 | export const isObjectRefEqual = (ref, obj) => { 349 | const refed = ref?.deref(); 350 | // check they both reference something or both don't reference something. 351 | if (!!refed !== !!obj) { 352 | return false; 353 | } 354 | return refed ? refed === obj : true; 355 | }; 356 | 357 | export function getWithDefault(v, defaultValue) { 358 | return v === undefined ? defaultValue : v; 359 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # WebGL Lint 2 | 3 | 4 | 5 | WebGL lint is a script you can throw into your WebGL project 6 | to check for common WebGL errors. 7 | 8 | * Calls `getError` after every function and throws if there was an error. 9 | 10 | * Checks that no arguments to any functions are `undefined`. 11 | 12 | Pass `0` or `false` or `null` where you mean `0` or `false` or `null`. 13 | 14 | * Checks that no numbers or values in arrays of numbers are `NaN`. 15 | 16 | * Checks that all non-sampler uniforms are set. (see configuration below) 17 | 18 | * Checks that uniform matrices are not all zero. 19 | 20 | * Warns if you try to access an undefined uniform. 21 | 22 | * Checks for out of range access issues and will tell you which attribute/s are out of range 23 | 24 | * Checks that shaders compile. On failure prints the shader and tries to highlight errors. 25 | 26 | * Checks that programs link. On failure prints the attached shaders. 27 | 28 | * If there is a WebGL error it tries to provide more info about why 29 | 30 | * for framebuffer feedback it will tell you which textures assigned to which uniforms and which attachments 31 | 32 | * for other errors it will try print extra info where possible. 33 | 34 | * it lets you name webgl objects so those names can be shown in the error messages. 35 | 36 | ## Example 37 | 38 | **Open the JavaScript console**. You'll see the first example prints fewer 39 | errors and less info where as the second prints much more info. 40 | 41 | * [without script](https://greggman.github.io/webgl-lint/test/?lint=false) 42 | * [with script](https://greggman.github.io/webgl-lint/test/) 43 | 44 | # Usage 45 | 46 | ``` 47 | 48 | ``` 49 | 50 | or 51 | 52 | ``` 53 | import 'https://greggman.github.io/webgl-lint/webgl-lint.js'; 54 | ``` 55 | 56 | WebGL Lint `throw`s a JavaScript exception when there is an issue so if you are 57 | using `try`/`catch` to catch errors you might need to print the exceptions 58 | inside your catch block. You can also turn on "pause on exception" on your 59 | JavaScript debugger. 60 | 61 | Throwing seemed more a appropriate than just printing an error because if you 62 | get an error you should fix it! I tried the script out with all the 63 | [three.js examples](https://threejs.org/examples). It found 1 real bug and several half bugs. 64 | By half bugs I mean there were several examples that functioned but were actually 65 | passing `NaN` or `null` in the wrong places for a few frames or they were not setting 66 | uniforms that probably should have been set. Arguably it's 67 | better to fix those so that you can continue to use the helper to find real 68 | errors. In any case most of examples ran without error so you can do it 69 | too! 😉 70 | 71 | ### `GMAN_debug_helper` extension 72 | 73 | WebGL Lint adds a special extension `GMAN_debug_helper` with these functions 74 | 75 | * `tagObject(obj: WebGLObject, name: string): void` - see naming below 76 | * `untagObject(obj: WebGLObject): void` - see naming below 77 | * `getTagForObject(obj: WebGLObject): string` - see naming below 78 | * `setConfiguration(settings): void` - see configuration below 79 | * `disable(): void` - turns off the checking 80 | * `getAndResetRedundantCallInfo(): RedundantCallInfo` - see below 81 | 82 | ### Configuration 83 | 84 | You don't need to configure anything to use in general but there are some settings 85 | for special needs. 86 | 87 | * `maxDrawCalls` (default: 1000) 88 | 89 | Turns off the checking after this many draw calls. Set to 0 to check forever. 90 | 91 | * `failUnsetUniforms`: (default: true) 92 | 93 | Checks that you set uniforms except for samplers and fails if you didn't. 94 | It's a common error to forget to set a uniform or to mis-spell the name of 95 | a uniform and therefore not set the real one. The common exception is 96 | samplers because uniforms default to 0 so not setting a sampler means use 97 | texture unit 0 so samplers are not checked. 98 | 99 | Of course maybe you're not initializing some uniforms on purpose 100 | so you can turn off this check. I'd recommend setting them so you get the 101 | benefit of this check finding errors. 102 | 103 | Note: uniform blocks are not checked directly. They are checked by WebGL itself 104 | in the sense that if you fail to provide uniform buffers for your uniform blocks 105 | you'll get an error but there is no easy way to check that you set them. 106 | 107 | * `failUnsetSamplerUniforms`: (default: false) 108 | 109 | See above why sampler uniforms are not checked by default. You can force them 110 | to be checked by this setting. 111 | 112 | * `failZeroMatrixUniforms`: (default: true) 113 | 114 | Checks that a uniform matrix is not all zeros. It's a common source of errors to 115 | forget to set a matrix to the identity and it seems uncommon to have an all 116 | zero matrix. If you have a reason a matrix needs to be all zeros you may want 117 | to turn this off. 118 | 119 | * `failUnrenderableTextures`: (default: true) 120 | 121 | Unrenderable textures are not an error in WebGL, they just don't render. 122 | WebGL itself usually print's a warning but it's usually fairly cryptic 123 | just telling you an unrenderable texture exists but not much else. 124 | 125 | Examples of unrenderable textures are non-power of 2 textures in WebGL1 126 | with filtering set to need mips and wrap not set to `CLAMP_TO_EDGE` or 127 | in both WebGL and WebGL2 would be mips of different internal formats 128 | or the wrong size. 129 | 130 | * `failUndefinedUniforms`: (default: false) 131 | 132 | WebGL by default returns `null` when you call `gl.getUniformLocation` for 133 | a uniform that does not exist. It then silently ignores calling `gl.uniformXXX` 134 | if the location is `null`. This is great when you're editing a shader in that 135 | if you remove a uniform from the shader your code that is still setting 136 | the old uniform will keep working. 137 | 138 | For example if you are debugging and you go to the bottom of your fragment 139 | shader and add `gl_FragColor = vec4(1, 0, 0, 1);` all the uniforms in your 140 | fragment shader will be optimized out. If WebGL suddenly issues errors trying 141 | to set those it would be much more frustrating to debug. Conversely though, if 142 | you have a typo, for example you want to look up the location of `'u_color'` and 143 | you type `gl.getUniformLocation(prg, 'uColor')` you'll get no error and it 144 | will likely take you a while to find your typo. 145 | 146 | So, by default webgl-lint only prints a warning for undefined uniforms. 147 | You can make throw by setting `failUndefinedUniforms` to `true`. 148 | 149 | * `failBadShadersAndPrograms`: (default: true) 150 | 151 | Most WebGL programs expect all shaders to compile and all programs 152 | to link but often programmers don't check for errors. While it's likely 153 | they'd get an error about a bad program further in their code, at that point 154 | it's likely too late to tell them it's because the program didn't compile or 155 | link. Instead the message will just be something like "no valid program in use". 156 | 157 | If you're working on a project that expects shaders to fail to compile 158 | and/or programs to link you can set this to `false`. 159 | 160 | * `warnUndefinedUniforms`: (default: true) 161 | 162 | See `failUndefinedUniforms`. Setting this to false turns off warnings 163 | about undefined uniforms. 164 | 165 | * `ignoreUniforms`: (default: []) 166 | 167 | Lets you configure certain uniforms not to be checked. This way you can turn 168 | off checking for certain uniforms if they don't obey the rules above and still 169 | keep the rules on for other uniforms. This configuration is additive. In other words 170 | 171 | ```js 172 | ext.setConfiguration({ignoreUniforms: ['foo', 'bar']}); 173 | ext.setConfiguration({ignoreUniforms: ['baz']}); 174 | ``` 175 | 176 | Ignores uniforms called 'foo', 'bar', and 'baz'. 177 | 178 | * `throwOnError`: (default: true) 179 | 180 | The default is to throw an exception on error. This has several benefits. 181 | 182 | 1. It encourages you to fix the bug. 183 | 184 | 2. You'll get a stack trace which you can drill down to find the bug. 185 | 186 | 3. If you use "pause on exception" in your browser's dev tools you'll 187 | get a live stack trace where you can explore all the local variables 188 | and state of your program. 189 | 190 | But, there might be times when you can't avoid the error, say you're 191 | running a 3rd party library that gets errors. You should go politely 192 | ask them to fix the bug or better, fix it yourself and send them a pull request. 193 | In any case, if you just want it to print an error instead of throw then 194 | you can set `throwOnError` to false. 195 | 196 | * `makeDefaultTags`: (default: true) 197 | 198 | If true, all objects get a default tag, Example `*UNTAGGED:Buffer1`, 199 | `*UNTAGGED:Buffer2` etc. This is a minor convenience to have something 200 | to distinguish one object from another though it's highly recommended 201 | you tag your objects. (See naming). 202 | 203 | The only reason to turn this off is if you're creating and deleting 204 | lots of objects and you want to make sure tags are not leaking memory 205 | since tags are never deleted automatically. (See "naming). 206 | 207 | There 2 ways to configure 208 | 209 | 1. Via the extension and JavaScript. 210 | 211 | Example: 212 | 213 | ```js 214 | const gl = someCanvas.getContext('webgl'); 215 | const ext = gl.getExtension('GMAN_debug_helper'); 216 | if (ext) { 217 | ext.setConfiguration({ 218 | maxDrawCalls: 2000, 219 | failUnsetSamplerUniforms: true, 220 | }); 221 | } 222 | ``` 223 | 224 | 2. Via an HTML dataset attribute 225 | 226 | Example: 227 | 228 | ```html 229 | 238 | ``` 239 | 240 | Note: (1) the setting string must be valid JSON. (2) any tag will do, `
`, ``, etc. as the 241 | script just applies all tags it finds with `querySelectorAll('[data-gman-debug-helper]')` and applies 242 | the options in the order found. 243 | 244 | ### Naming your WebGL objects (buffers, textures, programs, etc..) 245 | 246 | Using the extension you can name your objects. This way when an error is printed 247 | the names will be inserted where appropriate. 248 | 249 | ```js 250 | const ext = gl.getExtension('GMAN_debug_helper'); 251 | const tex = gl.createTexture(); 252 | ext.tagObject(tex, 'background-tex'); 253 | ``` 254 | 255 | Now if you get an error related to `tex` you might get an told it's related to 'background-tex' 256 | instead of just that you got an error. 257 | 258 | 4 suggestions for using naming 259 | 260 | 1. make some helpers 261 | 262 | ```js 263 | const ext = gl.getExtension('GMAN_debug_helper'); 264 | const tagObject = ext ? ext.tagObject.bind(ext) : () => (); 265 | ``` 266 | 267 | now you can just unconditionally tag things and if the extension does 268 | not exist it will just be a no-op. 269 | 270 | ```js 271 | const tex = gl.createTexture(); 272 | tagObject(tex, 'checkerboard'); 273 | ``` 274 | 275 | 2. wrap the creations functions 276 | 277 | ```js 278 | const ext = gl.getExtension('GMAN_debug_helper'); 279 | if (ext) { 280 | Object.keys(gl.__proto__) 281 | .filter(name => name.startsWith('create')) 282 | .forEach(name => { 283 | const origFn = gl[name]; 284 | if (origFn) { 285 | gl[name] = function(...args) { 286 | const obj = origFn.call(this, ...args); 287 | if (obj) { 288 | ext.tagObject(obj, args[args.length - 1] || '*unknown*'); 289 | } 290 | return obj; 291 | } 292 | } 293 | }); 294 | } 295 | ``` 296 | 297 | Which you use like this 298 | 299 | ```js 300 | const shader = gl.createShader(gl.VERTEX_SHADER, 'phongVertexShader'); 301 | const tex = gl.createTexture('tree-texture'); 302 | ``` 303 | 304 | and they'll still work in normal WebGL as it will ignore 305 | the extra parameter. 306 | 307 | 3. Same as above but not wrapped 308 | 309 | ```js 310 | const ext = gl.getExtension('GMAN_debug_helper'); 311 | const api = Object.fromEntries( 312 | Object.keys(gl.__proto__) 313 | .filter(name => name.startsWith('create')) 314 | .map(name => { 315 | const func = (ext && gl[name]) 316 | ? function(...args) { 317 | const obj = gl[name](...args); 318 | if (obj) { 319 | ext.tagObject(obj, args[args.length - 1] || '*unknown*'); 320 | } 321 | return obj; 322 | } 323 | : function(...args) { 324 | return gl[name](...args); 325 | }; 326 | return [name, func]; 327 | })); 328 | ``` 329 | 330 | Which you use like this 331 | 332 | ```js 333 | const shader = api.createShader(gl.VERTEX_SHADER, 'phongVertexShader'); 334 | const tex = api.createTexture('tree-texture'); 335 | ``` 336 | 337 | If you're allergic to hacking native APIs this is better but you have to 338 | remember to use `api.createXXX` instead of `gl.createXXX` 339 | 340 | 4. Use your own API. 341 | 342 | Lots of people have wrapped WebGL themselves with things like `class Texture` and 343 | `class Framebuffer` or other functions. Those would be a good place to integrate 344 | tagging. 345 | 346 | As a simple example, naming buffers after the attributes they'll 347 | be used with (eg. 'position', 'normal'), naming textures by the URL of the img where they 348 | get their data. Naming vertex array objects by the model ('tree', 'car', 'house'), naming 349 | framebuffers by their usage ('shadow-depth', 'post-processing'), naming programs by what they do ('phong-shading', 'sky-box')... 350 | 351 | You can also untag an object with 352 | 353 | ```js 354 | ext.untagObject(someObj); 355 | ``` 356 | 357 | Arguably for debugging you probably don't want to untag. The problem with 358 | untagging is if you untag and then have a bug where you reuse an untagged 359 | object, for example using an object you deleted, there will be no tag for the 360 | object, so your error will just say something like "error: tried to use 361 | Texture(unknown)" instead of "error: tried to use Texture(yourTag)". At the same 362 | time, if you're running WebGL-lint indefinitely (see `maxDrawCalls`) and 363 | creating and deleting lots of objects, for example sync objects, there is a tiny 364 | bit of memory involved keeping the label of each one so manually untagging 365 | should mean you are not leaking memory. Honestly I wouldn't worry about 366 | untagging but it's here just in case you've got special needs. Also see 367 | `makeDefaultTags` above. 368 | 369 | The extension also includes `getTagForObject` if you want to look up 370 | what string you tagged an object with 371 | 372 | ```js 373 | const buf = gl.createBuffer(); 374 | ext.tagObject(buf, 'normals'); 375 | console.log(ext.getTagForObject(buf)); // prints 'normals' 376 | ``` 377 | 378 | ## Checking for redundant calls 379 | 380 | An example of a redundant call is calling `gl.useProgram` with the same program 381 | or calling `gl.vertexAttribPointer` with the same parameters and the same buffer. 382 | You can get a count to date of the redundant state setting WebGL-Lint has detected 383 | by calling `ext.getAndResetRedundantCallInfo()` 384 | 385 | Example: 386 | 387 | ```js 388 | function render() { 389 | // .. do stuff with webgl .. 390 | 391 | const info = ext.getAndResetRedundantCallInfo(); 392 | console.log(JSON.stringify(info)); 393 | requestAnimationFrame(render); 394 | } 395 | ``` 396 | 397 | Alternatively you can try adding this script to your page (**instead of `webgl-lint.js`**) and it will 398 | attempt to print redundant call info for you. 399 | 400 | ```html 401 | 402 | ``` 403 | 404 | or 405 | 406 | ```js 407 | import 'https://greggman.github.io/webgl-lint/webgl-lint-check-redundant-state-setting.js'; 408 | ``` 409 | 410 | Note: WebGL-Lint does not check every possible redundant set setting. At the moment it checks 411 | 412 | * `bindBuffer` 413 | * `bindFramebuffer` 414 | * `bindRenderbuffer` 415 | * `bindSampler` 416 | * `bindTexture` 417 | * `bindVertexArray` 418 | * `enable` 419 | * `disable` 420 | * `vertexAttribPointer` 421 | * `vertexAttribIPointer` 422 | 423 | It's not important to avoid 100% of redundant state setting. Rather, you can use 424 | this feature to see if you have too much redundant state setting. For example if 425 | you're making 2000 draw calls and you see 500-5000 redundant state setting 426 | counts then you should probably look into adding some state tracking in your own 427 | code or organizing the way calls happen so state is not set. It's not so much 428 | that setting state more than once is bad, it's rather than it's just proof your 429 | code is doing extra work. If it's a lot of extra work then you probably want to 430 | look into it. If it's only a small amount of extra work then don't worry about 431 | it. 432 | 433 | # Suggestions? 434 | 435 | [https://github.com/greggman/webgl-lint/issues](https://github.com/greggman/webgl-lint/issues) 436 | 437 | # Development 438 | 439 | You can run the tests with the un-merged code with `http://localhost:8080/test/?src=true`. You can also filter the tests with `grep=` as in 440 | `http://localhost:8080/test/?grep=shader` or both 441 | `http://localhost:8080/test/?src=true&grep=shader`. 442 | 443 | # Repo 444 | 445 | [https://github.com/greggman/webgl-lint/](https://github.com/greggman/webgl-lint/) 446 | 447 | # License 448 | 449 | [MIT](LICENSE.md) 450 | -------------------------------------------------------------------------------- /test/tests/redundant-state-tests.js: -------------------------------------------------------------------------------- 1 | import * as twgl from '../js/twgl-full.module.js'; 2 | import {assertEqual} from '../assert.js'; 3 | import {describe, it} from '../mocha-support.js'; 4 | import {createContext, createContext2} from '../webgl.js'; 5 | 6 | describe('redundant state tests', () => { 7 | 8 | it('test bindBuffer', () => { 9 | const {gl, ext} = createContext(); 10 | 11 | const buf = gl.createBuffer(); 12 | gl.bindBuffer(gl.ARRAY_BUFFER, buf); 13 | assertEqual(ext.getAndResetRedundantCallInfo().bindBuffer, 0); 14 | gl.bindBuffer(gl.ARRAY_BUFFER, buf); 15 | assertEqual(ext.getAndResetRedundantCallInfo().bindBuffer, 1); 16 | gl.bindBuffer(gl.ARRAY_BUFFER, buf); 17 | gl.bindBuffer(gl.ARRAY_BUFFER, buf); 18 | assertEqual(ext.getAndResetRedundantCallInfo().bindBuffer, 2); 19 | gl.bindBuffer(gl.ARRAY_BUFFER, null); 20 | gl.bindBuffer(gl.ARRAY_BUFFER, null); 21 | assertEqual(ext.getAndResetRedundantCallInfo().bindBuffer, 1); 22 | 23 | const buf2 = gl.createBuffer(); 24 | gl.bindBuffer(gl.ARRAY_BUFFER, buf); 25 | gl.bindBuffer(gl.ARRAY_BUFFER, buf2); 26 | gl.bindBuffer(gl.ARRAY_BUFFER, buf); 27 | gl.bindBuffer(gl.ARRAY_BUFFER, buf2); 28 | assertEqual(ext.getAndResetRedundantCallInfo().bindBuffer, 0); 29 | 30 | assertEqual(gl.getError(), gl.NO_ERROR, 'no errors'); 31 | }); 32 | 33 | it('test bindRenderbuffer', () => { 34 | const {gl, ext} = createContext(); 35 | 36 | const buf = gl.createRenderbuffer(); 37 | gl.bindRenderbuffer(gl.RENDERBUFFER, buf); 38 | assertEqual(ext.getAndResetRedundantCallInfo().bindRenderbuffer, 0); 39 | gl.bindRenderbuffer(gl.RENDERBUFFER, buf); 40 | assertEqual(ext.getAndResetRedundantCallInfo().bindRenderbuffer, 1); 41 | gl.bindRenderbuffer(gl.RENDERBUFFER, buf); 42 | gl.bindRenderbuffer(gl.RENDERBUFFER, buf); 43 | assertEqual(ext.getAndResetRedundantCallInfo().bindRenderbuffer, 2); 44 | gl.bindRenderbuffer(gl.RENDERBUFFER, null); 45 | gl.bindRenderbuffer(gl.RENDERBUFFER, null); 46 | assertEqual(ext.getAndResetRedundantCallInfo().bindRenderbuffer, 1); 47 | 48 | const buf2 = gl.createRenderbuffer(); 49 | gl.bindRenderbuffer(gl.RENDERBUFFER, buf); 50 | gl.bindRenderbuffer(gl.RENDERBUFFER, buf2); 51 | gl.bindRenderbuffer(gl.RENDERBUFFER, buf); 52 | gl.bindRenderbuffer(gl.RENDERBUFFER, buf2); 53 | assertEqual(ext.getAndResetRedundantCallInfo().bindRenderbuffer, 0); 54 | 55 | assertEqual(gl.getError(), gl.NO_ERROR, 'no errors'); 56 | }); 57 | 58 | it('test bindFramebuffer', () => { 59 | const {gl, ext} = createContext(); 60 | 61 | const buf = gl.createFramebuffer(); 62 | gl.bindFramebuffer(gl.FRAMEBUFFER, buf); 63 | assertEqual(ext.getAndResetRedundantCallInfo().bindFramebuffer, 0); 64 | gl.bindFramebuffer(gl.FRAMEBUFFER, buf); 65 | assertEqual(ext.getAndResetRedundantCallInfo().bindFramebuffer, 1); 66 | gl.bindFramebuffer(gl.FRAMEBUFFER, buf); 67 | gl.bindFramebuffer(gl.FRAMEBUFFER, buf); 68 | assertEqual(ext.getAndResetRedundantCallInfo().bindFramebuffer, 2); 69 | gl.bindFramebuffer(gl.FRAMEBUFFER, null); 70 | gl.bindFramebuffer(gl.FRAMEBUFFER, null); 71 | assertEqual(ext.getAndResetRedundantCallInfo().bindFramebuffer, 1); 72 | 73 | const buf2 = gl.createFramebuffer(); 74 | gl.bindFramebuffer(gl.FRAMEBUFFER, buf); 75 | gl.bindFramebuffer(gl.FRAMEBUFFER, buf2); 76 | gl.bindFramebuffer(gl.FRAMEBUFFER, buf); 77 | gl.bindFramebuffer(gl.FRAMEBUFFER, buf2); 78 | assertEqual(ext.getAndResetRedundantCallInfo().bindFramebuffer, 0); 79 | 80 | assertEqual(gl.getError(), gl.NO_ERROR, 'no errors'); 81 | }); 82 | 83 | 84 | it('test bindFramebuffer', () => { 85 | const {gl, ext} = createContext(); 86 | 87 | const buf = gl.createFramebuffer(); 88 | gl.bindFramebuffer(gl.FRAMEBUFFER, buf); 89 | assertEqual(ext.getAndResetRedundantCallInfo().bindFramebuffer, 0); 90 | gl.bindFramebuffer(gl.FRAMEBUFFER, buf); 91 | assertEqual(ext.getAndResetRedundantCallInfo().bindFramebuffer, 1); 92 | gl.bindFramebuffer(gl.FRAMEBUFFER, buf); 93 | gl.bindFramebuffer(gl.FRAMEBUFFER, buf); 94 | assertEqual(ext.getAndResetRedundantCallInfo().bindFramebuffer, 2); 95 | gl.bindFramebuffer(gl.FRAMEBUFFER, null); 96 | gl.bindFramebuffer(gl.FRAMEBUFFER, null); 97 | assertEqual(ext.getAndResetRedundantCallInfo().bindFramebuffer, 1); 98 | 99 | const buf2 = gl.createFramebuffer(); 100 | gl.bindFramebuffer(gl.FRAMEBUFFER, buf); 101 | gl.bindFramebuffer(gl.FRAMEBUFFER, buf2); 102 | gl.bindFramebuffer(gl.FRAMEBUFFER, buf); 103 | gl.bindFramebuffer(gl.FRAMEBUFFER, buf2); 104 | assertEqual(ext.getAndResetRedundantCallInfo().bindFramebuffer, 0); 105 | 106 | assertEqual(gl.getError(), gl.NO_ERROR, 'no errors'); 107 | }); 108 | 109 | it('test bindFramebuffer WebGL2', () => { 110 | const {gl, ext} = createContext2(); 111 | if (!gl) { 112 | return; 113 | } 114 | 115 | const buf = gl.createFramebuffer(); 116 | gl.bindFramebuffer(gl.FRAMEBUFFER, buf); 117 | assertEqual(ext.getAndResetRedundantCallInfo().bindFramebuffer, 0); 118 | gl.bindFramebuffer(gl.FRAMEBUFFER, buf); 119 | assertEqual(ext.getAndResetRedundantCallInfo().bindFramebuffer, 1); 120 | gl.bindFramebuffer(gl.FRAMEBUFFER, buf); 121 | gl.bindFramebuffer(gl.FRAMEBUFFER, buf); 122 | assertEqual(ext.getAndResetRedundantCallInfo().bindFramebuffer, 2); 123 | gl.bindFramebuffer(gl.FRAMEBUFFER, null); 124 | gl.bindFramebuffer(gl.FRAMEBUFFER, null); 125 | assertEqual(ext.getAndResetRedundantCallInfo().bindFramebuffer, 1); 126 | 127 | const buf2 = gl.createFramebuffer(); 128 | gl.bindFramebuffer(gl.FRAMEBUFFER, buf); 129 | gl.bindFramebuffer(gl.FRAMEBUFFER, buf2); 130 | gl.bindFramebuffer(gl.FRAMEBUFFER, buf); 131 | gl.bindFramebuffer(gl.FRAMEBUFFER, buf2); 132 | assertEqual(ext.getAndResetRedundantCallInfo().bindFramebuffer, 0); 133 | 134 | gl.bindFramebuffer(gl.READ_FRAMEBUFFER, buf); 135 | gl.bindFramebuffer(gl.READ_FRAMEBUFFER, buf); 136 | assertEqual(ext.getAndResetRedundantCallInfo().bindFramebuffer, 1); 137 | gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, buf); 138 | gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, buf); 139 | assertEqual(ext.getAndResetRedundantCallInfo().bindFramebuffer, 1); 140 | gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, buf2); 141 | gl.bindFramebuffer(gl.READ_FRAMEBUFFER, buf2); 142 | assertEqual(ext.getAndResetRedundantCallInfo().bindFramebuffer, 0); 143 | 144 | assertEqual(gl.getError(), gl.NO_ERROR, 'no errors'); 145 | }); 146 | 147 | it('test useProgram', () => { 148 | const {gl, ext} = createContext(); 149 | 150 | const vs = `void main() { gl_Position = vec4(0); }`; 151 | const fs = `precision mediump float; void main() { gl_FragColor = vec4(0); }`; 152 | 153 | const prg = twgl.createProgram(gl, [vs, fs]); 154 | const prg2 = twgl.createProgram(gl, [vs, fs]); 155 | 156 | gl.useProgram(prg); 157 | assertEqual(ext.getAndResetRedundantCallInfo().useProgram, 0); 158 | gl.useProgram(prg); 159 | assertEqual(ext.getAndResetRedundantCallInfo().useProgram, 1); 160 | gl.useProgram(prg); 161 | gl.useProgram(prg); 162 | assertEqual(ext.getAndResetRedundantCallInfo().useProgram, 2); 163 | gl.useProgram(null); 164 | gl.useProgram(null); 165 | assertEqual(ext.getAndResetRedundantCallInfo().useProgram, 1); 166 | 167 | gl.useProgram(prg); 168 | gl.useProgram(prg2); 169 | gl.useProgram(prg); 170 | gl.useProgram(prg2); 171 | assertEqual(ext.getAndResetRedundantCallInfo().useProgram, 0); 172 | 173 | assertEqual(gl.getError(), gl.NO_ERROR, 'no errors'); 174 | }); 175 | 176 | it('test bindTexture', () => { 177 | const {gl, ext} = createContext(); 178 | 179 | const tex = gl.createTexture(); 180 | gl.bindTexture(gl.TEXTURE_2D, tex); 181 | assertEqual(ext.getAndResetRedundantCallInfo().bindTexture, 0); 182 | gl.bindTexture(gl.TEXTURE_2D, tex); 183 | assertEqual(ext.getAndResetRedundantCallInfo().bindTexture, 1); 184 | gl.bindTexture(gl.TEXTURE_2D, tex); 185 | gl.bindTexture(gl.TEXTURE_2D, tex); 186 | assertEqual(ext.getAndResetRedundantCallInfo().bindTexture, 2); 187 | gl.bindTexture(gl.TEXTURE_2D, null); 188 | gl.bindTexture(gl.TEXTURE_2D, null); 189 | assertEqual(ext.getAndResetRedundantCallInfo().bindTexture, 1); 190 | 191 | const tex2 = gl.createTexture(); 192 | gl.bindTexture(gl.TEXTURE_2D, tex); 193 | gl.bindTexture(gl.TEXTURE_2D, tex2); 194 | gl.bindTexture(gl.TEXTURE_2D, tex); 195 | gl.bindTexture(gl.TEXTURE_2D, tex2); 196 | assertEqual(ext.getAndResetRedundantCallInfo().bindTexture, 0); 197 | 198 | const tex3 = gl.createTexture(); 199 | gl.bindTexture(gl.TEXTURE_2D, tex); 200 | gl.bindTexture(gl.TEXTURE_CUBE_MAP, tex3); 201 | gl.bindTexture(gl.TEXTURE_2D, tex); 202 | gl.bindTexture(gl.TEXTURE_CUBE_MAP, tex3); 203 | assertEqual(ext.getAndResetRedundantCallInfo().bindTexture, 2); 204 | 205 | assertEqual(gl.getError(), gl.NO_ERROR, 'no errors'); 206 | }); 207 | 208 | it('test bindSampler', () => { 209 | const {gl, ext} = createContext2(); 210 | if (!gl) { 211 | return; 212 | } 213 | 214 | const sampler = gl.createSampler(); 215 | gl.bindSampler(0, sampler); 216 | assertEqual(ext.getAndResetRedundantCallInfo().bindSampler, 0); 217 | gl.bindSampler(0, sampler); 218 | assertEqual(ext.getAndResetRedundantCallInfo().bindSampler, 1); 219 | gl.bindSampler(0, sampler); 220 | gl.bindSampler(0, sampler); 221 | assertEqual(ext.getAndResetRedundantCallInfo().bindSampler, 2); 222 | gl.bindSampler(0, null); 223 | gl.bindSampler(0, null); 224 | assertEqual(ext.getAndResetRedundantCallInfo().bindSampler, 1); 225 | 226 | const sampler2 = gl.createSampler(); 227 | gl.bindSampler(0, sampler); 228 | gl.bindSampler(0, sampler2); 229 | gl.bindSampler(0, sampler); 230 | gl.bindSampler(0, sampler2); 231 | assertEqual(ext.getAndResetRedundantCallInfo().bindSampler, 0); 232 | 233 | gl.bindSampler(1, sampler); 234 | gl.bindSampler(1, sampler2); 235 | assertEqual(ext.getAndResetRedundantCallInfo().bindSampler, 0); 236 | gl.bindSampler(1, sampler2); 237 | assertEqual(ext.getAndResetRedundantCallInfo().bindSampler, 1); 238 | 239 | assertEqual(gl.getError(), gl.NO_ERROR, 'no errors'); 240 | }); 241 | 242 | it('test enable/disable', () => { 243 | const {gl, ext} = createContext(); 244 | 245 | gl.disable(gl.BLEND); 246 | assertEqual(ext.getAndResetRedundantCallInfo().enableDisable, 1); 247 | gl.enable(gl.BLEND); 248 | assertEqual(ext.getAndResetRedundantCallInfo().enableDisable, 0); 249 | gl.enable(gl.BLEND); 250 | assertEqual(ext.getAndResetRedundantCallInfo().enableDisable, 1); 251 | gl.enable(gl.CULL_FACE); 252 | gl.enable(gl.CULL_FACE); 253 | gl.enable(gl.DEPTH_TEST); 254 | gl.enable(gl.DEPTH_TEST); 255 | assertEqual(ext.getAndResetRedundantCallInfo().enableDisable, 2); 256 | gl.disable(gl.CULL_FACE); 257 | gl.enable(gl.CULL_FACE); 258 | assertEqual(ext.getAndResetRedundantCallInfo().enableDisable, 0); 259 | 260 | assertEqual(gl.getError(), gl.NO_ERROR, 'no errors'); 261 | }); 262 | 263 | it('test bindVertexArrayOES', () => { 264 | const {gl, ext, vaoExt} = createContext(); 265 | if (!vaoExt) { 266 | return; 267 | } 268 | 269 | const va = vaoExt.createVertexArrayOES(); 270 | const va2 = vaoExt.createVertexArrayOES(); 271 | 272 | vaoExt.bindVertexArrayOES(va); 273 | assertEqual(ext.getAndResetRedundantCallInfo().bindVertexArray, 0); 274 | vaoExt.bindVertexArrayOES(va); 275 | assertEqual(ext.getAndResetRedundantCallInfo().bindVertexArray, 1); 276 | vaoExt.bindVertexArrayOES(va); 277 | vaoExt.bindVertexArrayOES(va); 278 | assertEqual(ext.getAndResetRedundantCallInfo().bindVertexArray, 2); 279 | vaoExt.bindVertexArrayOES(null); 280 | vaoExt.bindVertexArrayOES(null); 281 | assertEqual(ext.getAndResetRedundantCallInfo().bindVertexArray, 1); 282 | 283 | vaoExt.bindVertexArrayOES(va); 284 | vaoExt.bindVertexArrayOES(va2); 285 | vaoExt.bindVertexArrayOES(va); 286 | vaoExt.bindVertexArrayOES(va2); 287 | assertEqual(ext.getAndResetRedundantCallInfo().bindVertexArray, 0); 288 | 289 | assertEqual(gl.getError(), gl.NO_ERROR, 'no errors'); 290 | }); 291 | 292 | it('test bindVertexArray', () => { 293 | const {gl, ext} = createContext2(); 294 | if (!gl) { 295 | return; 296 | } 297 | 298 | const va = gl.createVertexArray(); 299 | const va2 = gl.createVertexArray(); 300 | 301 | gl.bindVertexArray(va); 302 | assertEqual(ext.getAndResetRedundantCallInfo().bindVertexArray, 0); 303 | gl.bindVertexArray(va); 304 | assertEqual(ext.getAndResetRedundantCallInfo().bindVertexArray, 1); 305 | gl.bindVertexArray(va); 306 | gl.bindVertexArray(va); 307 | assertEqual(ext.getAndResetRedundantCallInfo().bindVertexArray, 2); 308 | gl.bindVertexArray(null); 309 | gl.bindVertexArray(null); 310 | assertEqual(ext.getAndResetRedundantCallInfo().bindVertexArray, 1); 311 | 312 | gl.bindVertexArray(va); 313 | gl.bindVertexArray(va2); 314 | gl.bindVertexArray(va); 315 | gl.bindVertexArray(va2); 316 | assertEqual(ext.getAndResetRedundantCallInfo().bindVertexArray, 0); 317 | 318 | assertEqual(gl.getError(), gl.NO_ERROR, 'no errors'); 319 | }); 320 | 321 | it('test vertexAttribPointer', () => { 322 | const {gl, ext} = createContext(); 323 | 324 | const buf = gl.createBuffer(); 325 | const buf2 = gl.createBuffer(); 326 | 327 | gl.bindBuffer(gl.ARRAY_BUFFER, buf); 328 | gl.vertexAttribPointer(0, 4, gl.FLOAT, false, 0, 0); 329 | gl.vertexAttribPointer(0, 4, gl.FLOAT, false, 0, 0); 330 | assertEqual(ext.getAndResetRedundantCallInfo().vertexAttribPointer, 1); 331 | gl.vertexAttribPointer(1, 4, gl.FLOAT, false, 0, 0); 332 | assertEqual(ext.getAndResetRedundantCallInfo().vertexAttribPointer, 0); 333 | gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0); 334 | assertEqual(ext.getAndResetRedundantCallInfo().vertexAttribPointer, 0); 335 | gl.vertexAttribPointer(0, 3, gl.UNSIGNED_BYTE, false, 0, 0); 336 | assertEqual(ext.getAndResetRedundantCallInfo().vertexAttribPointer, 0); 337 | gl.vertexAttribPointer(0, 3, gl.UNSIGNED_BYTE, true, 0, 0); 338 | assertEqual(ext.getAndResetRedundantCallInfo().vertexAttribPointer, 0); 339 | gl.vertexAttribPointer(0, 3, gl.UNSIGNED_BYTE, true, 4, 0); 340 | assertEqual(ext.getAndResetRedundantCallInfo().vertexAttribPointer, 0); 341 | gl.vertexAttribPointer(0, 3, gl.UNSIGNED_BYTE, true, 4, 4); 342 | assertEqual(ext.getAndResetRedundantCallInfo().vertexAttribPointer, 0); 343 | gl.bindBuffer(gl.ARRAY_BUFFER, buf2); 344 | gl.vertexAttribPointer(0, 3, gl.UNSIGNED_BYTE, true, 4, 4); 345 | assertEqual(ext.getAndResetRedundantCallInfo().vertexAttribPointer, 0); 346 | 347 | assertEqual(gl.getError(), gl.NO_ERROR, 'no errors'); 348 | 349 | }); 350 | 351 | it('test vertexAttribIPointer', () => { 352 | const {gl, ext} = createContext2(); 353 | if (!gl) { 354 | return; 355 | } 356 | 357 | const buf = gl.createBuffer(); 358 | const buf2 = gl.createBuffer(); 359 | 360 | gl.bindBuffer(gl.ARRAY_BUFFER, buf); 361 | gl.vertexAttribIPointer(0, 4, gl.INT, 0, 0); 362 | gl.vertexAttribIPointer(0, 4, gl.INT, 0, 0); 363 | assertEqual(ext.getAndResetRedundantCallInfo().vertexAttribPointer, 1); 364 | gl.vertexAttribIPointer(1, 4, gl.INT, 0, 0); 365 | assertEqual(ext.getAndResetRedundantCallInfo().vertexAttribPointer, 0); 366 | gl.vertexAttribIPointer(0, 3, gl.INT, 0, 0); 367 | assertEqual(ext.getAndResetRedundantCallInfo().vertexAttribPointer, 0); 368 | gl.vertexAttribIPointer(0, 3, gl.UNSIGNED_BYTE, 0, 0); 369 | assertEqual(ext.getAndResetRedundantCallInfo().vertexAttribPointer, 0); 370 | gl.vertexAttribIPointer(0, 3, gl.UNSIGNED_BYTE, 4, 0); 371 | assertEqual(ext.getAndResetRedundantCallInfo().vertexAttribPointer, 0); 372 | gl.vertexAttribIPointer(0, 3, gl.UNSIGNED_BYTE, 4, 4); 373 | assertEqual(ext.getAndResetRedundantCallInfo().vertexAttribPointer, 0); 374 | gl.bindBuffer(gl.ARRAY_BUFFER, buf2); 375 | gl.vertexAttribIPointer(0, 3, gl.UNSIGNED_BYTE, 4, 4); 376 | assertEqual(ext.getAndResetRedundantCallInfo().vertexAttribPointer, 0); 377 | // switch to non IPointer 378 | gl.vertexAttribPointer(0, 3, gl.UNSIGNED_BYTE, false, 4, 4); 379 | assertEqual(ext.getAndResetRedundantCallInfo().vertexAttribPointer, 0); 380 | 381 | assertEqual(gl.getError(), gl.NO_ERROR, 'no errors'); 382 | 383 | }); 384 | 385 | it('test multiple vertexArrays OES', () => { 386 | const {gl, ext, vaoExt} = createContext(); 387 | if (!vaoExt) { 388 | return; 389 | } 390 | 391 | const va = vaoExt.createVertexArrayOES(); 392 | const va2 = vaoExt.createVertexArrayOES(); 393 | 394 | vaoExt.bindVertexArrayOES(va); 395 | gl.vertexAttribPointer(0, 4, gl.FLOAT, false, 0, 0); 396 | assertEqual(ext.getAndResetRedundantCallInfo().vertexAttribPointer, 0); 397 | 398 | vaoExt.bindVertexArrayOES(va2); 399 | gl.vertexAttribPointer(0, 4, gl.FLOAT, false, 0, 0); 400 | assertEqual(ext.getAndResetRedundantCallInfo().vertexAttribPointer, 0); 401 | 402 | vaoExt.bindVertexArrayOES(va); 403 | gl.vertexAttribPointer(0, 4, gl.FLOAT, false, 0, 0); 404 | assertEqual(ext.getAndResetRedundantCallInfo().vertexAttribPointer, 1); 405 | 406 | vaoExt.bindVertexArrayOES(va2); 407 | gl.vertexAttribPointer(0, 4, gl.FLOAT, false, 0, 0); 408 | assertEqual(ext.getAndResetRedundantCallInfo().vertexAttribPointer, 1); 409 | 410 | assertEqual(gl.getError(), gl.NO_ERROR, 'no errors'); 411 | }); 412 | 413 | it('test multiple vertexArrays WebGL2', () => { 414 | const {gl, ext} = createContext2(); 415 | 416 | const va = gl.createVertexArray(); 417 | const va2 = gl.createVertexArray(); 418 | 419 | gl.bindVertexArray(va); 420 | gl.vertexAttribPointer(0, 4, gl.FLOAT, false, 0, 0); 421 | assertEqual(ext.getAndResetRedundantCallInfo().vertexAttribPointer, 0); 422 | 423 | gl.bindVertexArray(va2); 424 | gl.vertexAttribPointer(0, 4, gl.FLOAT, false, 0, 0); 425 | assertEqual(ext.getAndResetRedundantCallInfo().vertexAttribPointer, 0); 426 | 427 | gl.bindVertexArray(va); 428 | gl.vertexAttribPointer(0, 4, gl.FLOAT, false, 0, 0); 429 | assertEqual(ext.getAndResetRedundantCallInfo().vertexAttribPointer, 1); 430 | 431 | gl.bindVertexArray(va2); 432 | gl.vertexAttribPointer(0, 4, gl.FLOAT, false, 0, 0); 433 | assertEqual(ext.getAndResetRedundantCallInfo().vertexAttribPointer, 1); 434 | 435 | assertEqual(gl.getError(), gl.NO_ERROR, 'no errors'); 436 | }); 437 | }); -------------------------------------------------------------------------------- /test/tests/unrenderable-texture-tests.js: -------------------------------------------------------------------------------- 1 | import * as twgl from '../js/twgl-full.module.js'; 2 | import {assertThrowsWith} from '../assert.js'; 3 | import {before, afterEach, describe, it} from '../mocha-support.js'; 4 | import { 5 | createContext, 6 | createContext2, 7 | createContexts, 8 | resetContexts, 9 | } from '../webgl.js'; 10 | 11 | describe('unrenderable texture tests', () => { 12 | 13 | function addTests(contexts) { 14 | 15 | it('test no texture, incomplete texture, non-power-of-2-texture', () => { 16 | const {gl, tagObject} = contexts; 17 | const vs = ` 18 | void main() { 19 | gl_Position = vec4(0); 20 | } 21 | `; 22 | 23 | const fs = ` 24 | precision mediump float; 25 | uniform sampler2D u_diffuse; 26 | void main() { 27 | gl_FragColor = texture2D(u_diffuse, vec2(0)); 28 | } 29 | `; 30 | 31 | const prg = twgl.createProgram(gl, [vs, fs]); 32 | tagObject(prg, 'texPrg'); 33 | gl.useProgram(prg); 34 | 35 | assertThrowsWith(() => { 36 | gl.drawArrays(gl.POINTS, 0, 1); 37 | }, [/no texture/]); 38 | 39 | const tex = gl.createTexture(); 40 | tagObject(tex, 'testTex'); 41 | gl.bindTexture(gl.TEXTURE_2D, tex); 42 | gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 2, 2, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); 43 | assertThrowsWith(() => { 44 | gl.drawArrays(gl.POINTS, 0, 1); 45 | }, [/mip level 1 does not exist/]); 46 | 47 | gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); 48 | gl.drawArrays(gl.POINTS, 0, 1); 49 | 50 | gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 3, 2, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); 51 | assertThrowsWith(() => { 52 | gl.drawArrays(gl.POINTS, 0, 1); 53 | }, [/not CLAMP_TO_EDGE/]); 54 | 55 | gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); 56 | gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); 57 | gl.drawArrays(gl.POINTS, 0, 1); 58 | 59 | gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 4, 4, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); 60 | gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR); 61 | assertThrowsWith(() => { 62 | gl.drawArrays(gl.POINTS, 0, 1); 63 | }, [/mip level 1 does not exist/]); 64 | 65 | gl.generateMipmap(gl.TEXTURE_2D); 66 | gl.drawArrays(gl.POINTS, 0, 1); 67 | }); 68 | 69 | it('test int textures', () => { 70 | const {gl2: gl, tagObject2: tagObject} = contexts; 71 | if (!gl) { 72 | return; 73 | } 74 | 75 | const vs = `#version 300 es 76 | void main() { 77 | gl_Position = vec4(0); 78 | } 79 | `; 80 | 81 | const fs = `#version 300 es 82 | precision mediump float; 83 | uniform highp isampler2D u_data; 84 | out vec4 outColor; 85 | void main() { 86 | outColor = vec4(texture(u_data, vec2(0))); 87 | } 88 | `; 89 | 90 | const prg = twgl.createProgram(gl, [vs, fs]); 91 | tagObject(prg, 'intPrg'); 92 | gl.useProgram(prg); 93 | 94 | const tex = gl.createTexture(); 95 | tagObject(tex, 'intTex'); 96 | gl.bindTexture(gl.TEXTURE_2D, tex); 97 | gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); 98 | gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); 99 | gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); 100 | gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA32I, 2, 2, 0, gl.RGBA_INTEGER, gl.INT, null); 101 | assertThrowsWith(() => { 102 | gl.drawArrays(gl.POINTS, 0, 1); 103 | }, [/texture of type \(RGBA32I\) is not filterable/]); 104 | 105 | gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); 106 | gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); 107 | gl.drawArrays(gl.POINTS, 0, 1); 108 | 109 | gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA32UI, 2, 2, 0, gl.RGBA_INTEGER, gl.UNSIGNED_INT, null); 110 | assertThrowsWith(() => { 111 | gl.drawArrays(gl.POINTS, 0, 1); 112 | }, [/uniform isampler2D needs a int texture but WebGLTexture\(.*?\) on texture unit 0 is unsigned int texture/]); 113 | 114 | gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, 2, 2, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); 115 | assertThrowsWith(() => { 116 | gl.drawArrays(gl.POINTS, 0, 1); 117 | }, [/isampler2D needs a int texture but WebGLTexture\("intTex"\) on texture unit 0 is float\/normalized texture/]); 118 | }); 119 | 120 | it('test float texture filtering webgl1', () => { 121 | const {gl, tagObject} = createContext(); 122 | 123 | const tex = gl.createTexture(); 124 | tagObject(tex, 'floatTex'); 125 | gl.bindTexture(gl.TEXTURE_2D, tex); 126 | gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); 127 | assertThrowsWith(() => { 128 | gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 2, 2, 0, gl.RGBA, gl.FLOAT, null); // error, float not support 129 | }, [/INVALID_ENUM/]); 130 | 131 | const oesTextureFloat = gl.getExtension('OES_texture_float'); 132 | if (oesTextureFloat) { 133 | return; 134 | } 135 | 136 | // should be ok 137 | gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 2, 2, 0, gl.RGBA, gl.FLOAT, null); 138 | 139 | const vs = ` 140 | void main() { 141 | gl_Position = vec4(0); 142 | } 143 | `; 144 | 145 | const fs = ` 146 | precision mediump float; 147 | uniform sampler2D u_data; 148 | void main() { 149 | gl_FragColor = texture2D(u_data, vec2(0)); 150 | } 151 | `; 152 | 153 | const prg = twgl.createProgram(gl, [vs, fs]); 154 | tagObject(prg, 'floatPrg'); 155 | gl.useProgram(prg); 156 | 157 | assertThrowsWith(() => { 158 | gl.drawArrays(gl.POINTS, 0, 1); // fails because float is not filterable 159 | }, [/foo/]); 160 | 161 | const extTextureFloatLinear = gl.getExtension('OES_texture_float_linear'); 162 | if (!extTextureFloatLinear) { 163 | return; 164 | } 165 | 166 | gl.drawArrays(gl.POINTS, 0, 1); // should succeed 167 | }); 168 | 169 | it('test float texture filtering webgl2', () => { 170 | const {gl, tagObject} = createContext2(); 171 | if (!gl) { 172 | return; 173 | } 174 | 175 | const tex = gl.createTexture(); 176 | tagObject(tex, 'floatTex'); 177 | gl.bindTexture(gl.TEXTURE_2D, tex); 178 | gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); 179 | gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA32F, 2, 2, 0, gl.RGBA, gl.FLOAT, null); 180 | 181 | const vs = ` 182 | void main() { 183 | gl_Position = vec4(0); 184 | } 185 | `; 186 | 187 | const fs = ` 188 | precision mediump float; 189 | uniform sampler2D u_data; 190 | void main() { 191 | gl_FragColor = texture2D(u_data, vec2(0)); 192 | } 193 | `; 194 | 195 | const prg = twgl.createProgram(gl, [vs, fs]); 196 | tagObject(prg, 'floatPrg'); 197 | gl.useProgram(prg); 198 | 199 | assertThrowsWith(() => { 200 | gl.drawArrays(gl.POINTS, 0, 1); // fails because float is not filterable 201 | }, [/texture of type \(RGBA32F\) is not filterable but TEXTURE_MIN_FILTER is set to LINEAR/]); 202 | 203 | const extTextureFloatLinear = gl.getExtension('OES_texture_float_linear'); 204 | if (!extTextureFloatLinear) { 205 | return; 206 | } 207 | 208 | gl.drawArrays(gl.POINTS, 0, 1); // should succeed 209 | }); 210 | 211 | it('test cubemaps', () => { 212 | const {gl, tagObject} = contexts; 213 | const vs = ` 214 | void main() { 215 | gl_Position = vec4(0); 216 | } 217 | `; 218 | 219 | const fs = ` 220 | precision mediump float; 221 | uniform samplerCube u_diffuse; 222 | void main() { 223 | gl_FragColor = textureCube(u_diffuse, vec3(0)); 224 | } 225 | `; 226 | 227 | const prg = twgl.createProgram(gl, [vs, fs]); 228 | tagObject(prg, 'noTexPrg'); 229 | gl.useProgram(prg); 230 | 231 | assertThrowsWith(() => { 232 | gl.drawArrays(gl.POINTS, 0, 1); 233 | }, [/no texture/]); 234 | 235 | const tex = gl.createTexture(); 236 | tagObject(tex, 'testTex'); 237 | gl.bindTexture(gl.TEXTURE_CUBE_MAP, tex); 238 | gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MIN_FILTER, gl.NEAREST); 239 | 240 | gl.texImage2D(gl.TEXTURE_CUBE_MAP_NEGATIVE_X, 0, gl.RGBA, 2, 2, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); 241 | assertThrowsWith(() => { 242 | gl.drawArrays(gl.POINTS, 0, 1); 243 | }, [/POSITIVE_X face at mip level 0 does not exist /]); 244 | 245 | gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X, 0, gl.RGBA, 2, 2, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); 246 | assertThrowsWith(() => { 247 | gl.drawArrays(gl.POINTS, 0, 1); 248 | }, [/MAP_POSITIVE_Y\) does not exist/]); 249 | 250 | gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_Y, 0, gl.RGBA, 2, 2, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); 251 | gl.texImage2D(gl.TEXTURE_CUBE_MAP_NEGATIVE_Y, 0, gl.RGBA, 2, 2, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); 252 | gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_Z, 0, gl.RGBA, 2, 2, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); 253 | gl.texImage2D(gl.TEXTURE_CUBE_MAP_NEGATIVE_Z, 0, gl.RGBA, 2, 2, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); 254 | 255 | gl.drawArrays(gl.POINTS, 0, 1); 256 | 257 | gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR); 258 | assertThrowsWith(() => { 259 | gl.drawArrays(gl.POINTS, 0, 1); 260 | }, [/mip level 1 does not exist/]); 261 | 262 | gl.generateMipmap(gl.TEXTURE_CUBE_MAP); 263 | gl.drawArrays(gl.POINTS, 0, 1); 264 | 265 | 266 | gl.deleteTexture(tex); 267 | }); 268 | 269 | it('test cubemaps texStorage', () => { 270 | const {gl2: gl, tagObject} = contexts; 271 | if (!gl) { 272 | return; 273 | } 274 | const vs = ` 275 | void main() { 276 | gl_Position = vec4(0); 277 | } 278 | `; 279 | 280 | const fs = ` 281 | precision mediump float; 282 | uniform samplerCube u_diffuse; 283 | void main() { 284 | gl_FragColor = textureCube(u_diffuse, vec3(0)); 285 | } 286 | `; 287 | 288 | const prg = twgl.createProgram(gl, [vs, fs]); 289 | tagObject(prg, 'noTexPrg'); 290 | gl.useProgram(prg); 291 | 292 | const tex = gl.createTexture(); 293 | tagObject(tex, 'testTex'); 294 | gl.bindTexture(gl.TEXTURE_CUBE_MAP, tex); 295 | gl.texStorage2D(gl.TEXTURE_CUBE_MAP, 2, gl.RGBA8, 2, 2); 296 | gl.drawArrays(gl.POINTS, 0, 1); 297 | 298 | gl.deleteTexture(tex); 299 | }); 300 | 301 | it('test texture samplers', () => { 302 | const {gl2: gl, tagObject2: tagObject} = contexts; 303 | if (!gl) { 304 | return; 305 | } 306 | const vs = ` 307 | void main() { 308 | gl_Position = vec4(0); 309 | } 310 | `; 311 | 312 | const fs = ` 313 | precision mediump float; 314 | uniform sampler2D u_diffuse; 315 | void main() { 316 | gl_FragColor = texture2D(u_diffuse, vec2(0)); 317 | } 318 | `; 319 | 320 | const prg = twgl.createProgram(gl, [vs, fs]); 321 | tagObject(prg, 'noTexPrg'); 322 | gl.useProgram(prg); 323 | 324 | const tex = gl.createTexture(); 325 | tagObject(tex, 'testTex'); 326 | gl.bindTexture(gl.TEXTURE_2D, tex); 327 | gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 2, 2, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); 328 | assertThrowsWith(() => { 329 | gl.drawArrays(gl.POINTS, 0, 1); 330 | }, [/mip level 1 does not exist/]); 331 | 332 | const s = gl.createSampler(); 333 | tagObject(s, 'linearSampler'); 334 | gl.samplerParameteri(s, gl.TEXTURE_MIN_FILTER, gl.LINEAR); 335 | gl.bindSampler(0, s); 336 | gl.drawArrays(gl.POINTS, 0, 1); 337 | 338 | gl.deleteSampler(s); 339 | 340 | assertThrowsWith(() => { 341 | gl.drawArrays(gl.POINTS, 0, 1); 342 | }, [/mip level 1 does not exist/]); 343 | }); 344 | 345 | it('test base level, max level', () => { 346 | const {gl2: gl, tagObject2: tagObject} = contexts; 347 | if (!gl) { 348 | return; 349 | } 350 | const vs = `#version 300 es 351 | void main() { 352 | gl_Position = vec4(0, 0, 0, 1); 353 | gl_PointSize = 128.0; 354 | } 355 | `; 356 | const fs = `#version 300 es 357 | precision highp float; 358 | uniform highp sampler2D tex; 359 | out vec4 outColor; 360 | void main() { 361 | outColor = texture(tex, gl_PointCoord.xy); 362 | } 363 | `; 364 | const prg = twgl.createProgram(gl, [vs, fs]); 365 | tagObject(prg, 'simpleTexProgram'); 366 | gl.useProgram(prg); 367 | 368 | const tex = gl.createTexture(); 369 | tagObject(tex, 'mixedFormatTex'); 370 | gl.bindTexture(gl.TEXTURE_2D, tex); 371 | 372 | gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA32UI, 1, 3, 0, gl.RGBA_INTEGER, gl.UNSIGNED_INT, null); 373 | gl.texImage2D(gl.TEXTURE_2D, 1, gl.RGBA, 4, 4, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); 374 | gl.texImage2D(gl.TEXTURE_2D, 2, gl.RGBA, 2, 2, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); 375 | gl.texImage2D(gl.TEXTURE_2D, 3, gl.R8, 73, 11, 0, gl.RED, gl.UNSIGNED_BYTE, null); 376 | assertThrowsWith(() => { 377 | gl.drawArrays(gl.POINTS, 0, 1); 378 | }, [/uniform sampler2D needs a float\/normalized texture but WebGLTexture\("mixedFormatTex"\) on texture unit 0 is unsigned int texture \(RGBA32UI\)/]); 379 | 380 | gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_BASE_LEVEL, 1); 381 | 382 | assertThrowsWith(() => { 383 | gl.drawArrays(gl.POINTS, 0, 1); 384 | }, [/texture WebGLTexture\("mixedFormatTex"\) on texture unit 0 referenced by uniform sampler2D tex is not renderable: mip level 3 needs to be 1x1 but it is 73x11/]); 385 | 386 | gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAX_LEVEL, 2); 387 | gl.drawArrays(gl.POINTS, 0, 1); 388 | }); 389 | 390 | it('test base level, max level (2)', () => { 391 | const {gl2: gl, tagObject2: tagObject} = contexts; 392 | if (!gl) { 393 | return; 394 | } 395 | const vs = `#version 300 es 396 | void main() { 397 | gl_Position = vec4(0, 0, 0, 1); 398 | gl_PointSize = 128.0; 399 | } 400 | `; 401 | const fs = `#version 300 es 402 | precision highp float; 403 | uniform highp sampler2D tex; 404 | out vec4 outColor; 405 | void main() { 406 | outColor = texture(tex, gl_PointCoord.xy); 407 | } 408 | `; 409 | const prg = twgl.createProgram(gl, [vs, fs]); 410 | tagObject(prg, 'simpleTexProgram'); 411 | gl.useProgram(prg); 412 | 413 | const tex = gl.createTexture(); 414 | tagObject(tex, '2x2 texture'); 415 | gl.bindTexture(gl.TEXTURE_2D, tex); 416 | 417 | gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 2, 2, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); 418 | gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_BASE_LEVEL, 0); 419 | gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAX_LEVEL, 0); 420 | gl.drawArrays(gl.POINTS, 0, 1); 421 | }); 422 | 423 | it('test base level, max level, generateMipmap', () => { 424 | const {gl2: gl, tagObject2: tagObject} = contexts; 425 | if (!gl) { 426 | return; 427 | } 428 | const vs = `#version 300 es 429 | void main() { 430 | gl_Position = vec4(0, 0, 0, 1); 431 | gl_PointSize = 128.0; 432 | } 433 | `; 434 | const fs = `#version 300 es 435 | precision highp float; 436 | uniform highp sampler2D tex; 437 | out vec4 outColor; 438 | void main() { 439 | outColor = texture(tex, gl_PointCoord.xy); 440 | } 441 | `; 442 | const prg = twgl.createProgram(gl, [vs, fs]); 443 | tagObject(prg, 'simpleTexProgram'); 444 | gl.useProgram(prg); 445 | 446 | const tex = gl.createTexture(); 447 | tagObject(tex, 'onlyMips2-4'); 448 | gl.bindTexture(gl.TEXTURE_2D, tex); 449 | 450 | gl.texImage2D(gl.TEXTURE_2D, 2, gl.RGBA, 4, 4, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); 451 | assertThrowsWith(() => { 452 | gl.drawArrays(gl.POINTS, 0, 1); 453 | }, [/texture unit 0 referenced by uniform sampler2D tex is not renderable: no mip level 0/]); 454 | 455 | gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_BASE_LEVEL, 2); 456 | assertThrowsWith(() => { 457 | gl.drawArrays(gl.POINTS, 0, 1); 458 | }, [/but mip level 3 does not exist/]); 459 | 460 | gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAX_LEVEL, 4); 461 | gl.generateMipmap(gl.TEXTURE_2D); 462 | 463 | gl.drawArrays(gl.POINTS, 0, 1); 464 | }); 465 | 466 | it('test two texture type in same sampler location', () => { 467 | const {gl, tagObject} = contexts; 468 | const vs = ` 469 | void main() { 470 | gl_Position = vec4(0); 471 | } 472 | `; 473 | 474 | const fs = ` 475 | precision mediump float; 476 | uniform samplerCube u_cubeTex; 477 | uniform sampler2D u_tex; 478 | void main() { 479 | gl_FragColor = textureCube(u_cubeTex, vec3(0)) + texture2D(u_tex, vec2(0)); 480 | } 481 | `; 482 | 483 | const prg = twgl.createProgram(gl, [vs, fs]); 484 | tagObject(prg, 'twoLocationPrg'); 485 | gl.useProgram(prg); 486 | 487 | const cubeLoc = gl.getUniformLocation(prg, 'u_cubeTex'); 488 | const texLoc = gl.getUniformLocation(prg, 'u_tex'); 489 | gl.uniform1i(cubeLoc, 0); 490 | gl.uniform1i(texLoc, 0); 491 | 492 | const cubeTex = gl.createTexture(); 493 | tagObject(cubeTex, 'u_cubeTex'); 494 | gl.bindTexture(gl.TEXTURE_CUBE_MAP, cubeTex); 495 | 496 | gl.texImage2D(gl.TEXTURE_CUBE_MAP_NEGATIVE_X, 0, gl.RGBA, 2, 2, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); 497 | assertThrowsWith(() => { 498 | gl.drawArrays(gl.POINTS, 0, 1); 499 | }, [/POSITIVE_X face at mip level 0 does not exist /]); 500 | 501 | gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X, 0, gl.RGBA, 2, 2, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); 502 | assertThrowsWith(() => { 503 | gl.drawArrays(gl.POINTS, 0, 1); 504 | }, [/MAP_POSITIVE_Y\) does not exist/]); 505 | 506 | gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_Y, 0, gl.RGBA, 2, 2, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); 507 | gl.texImage2D(gl.TEXTURE_CUBE_MAP_NEGATIVE_Y, 0, gl.RGBA, 2, 2, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); 508 | gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_Z, 0, gl.RGBA, 2, 2, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); 509 | gl.texImage2D(gl.TEXTURE_CUBE_MAP_NEGATIVE_Z, 0, gl.RGBA, 2, 2, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); 510 | assertThrowsWith(() => { 511 | gl.drawArrays(gl.POINTS, 0, 1); 512 | }, [/mip level 1 does not exist/]); 513 | 514 | const tex = gl.createTexture(); 515 | tagObject(tex, 'u_tex'); 516 | gl.bindTexture(gl.TEXTURE_2D, tex); 517 | gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 4, 4, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); 518 | 519 | assertThrowsWith(() => { 520 | gl.drawArrays(gl.POINTS, 0, 1); 521 | }, [/mip level 1 does not exist/]); 522 | 523 | gl.generateMipmap(gl.TEXTURE_2D); 524 | gl.generateMipmap(gl.TEXTURE_CUBE_MAP); 525 | 526 | assertThrowsWith(() => { 527 | gl.drawArrays(gl.POINTS, 0, 1); 528 | }, [/Two textures of different types can't use the same sampler location/]); 529 | 530 | gl.deleteTexture(tex); 531 | gl.deleteTexture(cubeTex); 532 | }); 533 | } 534 | 535 | describe('unrenderable tests', () => { 536 | const contexts = {}; 537 | 538 | before(() => { 539 | Object.assign(contexts, createContexts()); 540 | }); 541 | 542 | addTests(contexts); 543 | }); 544 | 545 | describe('unrenderable tests disabled', () => { 546 | const contexts = {}; 547 | 548 | function disableFailOnUnrenderableTexture(gl) { 549 | const ext = gl.getExtension('GMAN_webgl_helper'); 550 | if (ext) { 551 | ext.setConfiguration({failUnrenderableTextures: false}); 552 | } 553 | } 554 | 555 | before(() => { 556 | Object.assign(contexts, createContexts()); 557 | const {gl, gl2} = contexts; 558 | disableFailOnUnrenderableTexture(gl); 559 | if (gl2) { 560 | disableFailOnUnrenderableTexture(gl2); 561 | } 562 | }); 563 | 564 | afterEach(() => { 565 | resetContexts(contexts); 566 | }); 567 | 568 | addTests(contexts); 569 | }); 570 | 571 | }); --------------------------------------------------------------------------------