Gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR) Gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST) Gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, hftIconImg) WebGL // Let's assume I already loaded all the images a 1x8 pixel texture from a typed array. A 2x2 pixel texture from a JavaScript array A cubemap from 1 image (can be 1圆, 2x3, 3x2, 6x1) TWGL const textures = twgl.createTextures(gl, , Gl.uniformMatrix4fv(u_worldViewProjectionLoc, false, m4.multiply(viewProjection, world)) Loading / Setting up textures Gl.uniformMatrix4fv(u_worldInverseTransposeLoc, false, m4.transpose(m4.inverse(world))) Gl.uniformMatrix4fv(u_worldLoc, false, world) Gl.uniformMatrix4fv(u_viewInverseLoc, false, camera) Gl.uniform1f(u_specularFactorLoc, u_specularFactor) Gl.uniform1f(u_shininessLoc, u_shininess) Gl.uniform4fv(u_specularLoc, u_specular) Gl.uniform4fv(u_lightColorLoc, u_lightColor) Gl.uniform3fv(u_lightWorldPosLoc, u_lightWorldPos) Uniforms.u_worldViewProjection = m4.multiply(viewProjection, world) Uniforms.u_worldInverseTranspose = m4.transpose(m4.inverse(world)) Gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indicesBuffer) Setting Uniforms for a Lit Cube Gl.vertexAttribPointer(texcoordLoc, 2, gl.FLOAT, false, 0, 0) Gl.vertexAttribPointer(normalLoc, 3, gl.FLOAT, false, 0, 0) Gl.vertexAttribPointer(positionLoc, 3, gl.FLOAT, false, 0, 0) WebGL gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer) TWGL tBuffersAndAttributes(gl, programInfo, bufferInfo) Gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW) Setting Attributes and Indices for a Cube Gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indicesBuffer) Gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(texcoords), gl.STATIC_DRAW) Gl.bindBuffer(gl.ARRAY_BUFFER, texcoordBuffer) Gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(normals), gl.STATIC_DRAW) Ĭonst texcoordBuffer = gl.createBuffer() Gl.bindBuffer(gl.ARRAY_BUFFER, normalBuffer) Gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW) Gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer) WebGL const positions = Ĭonst normals = Ĭonst texcoords = Ĭonst indices = Ĭonst positionBuffer = gl.createBuffer() WebGL // Note: I'm conceding that you'll likely already have the 30 lines ofĬonst program = twgl.createProgramFromScripts(gl, ) Ĭonst u_lightWorldPosLoc = gl.getUniformLocation(program, "u_lightWorldPos") Ĭonst u_lightColorLoc = gl.getUniformLocation(program, "u_lightColor") Ĭonst u_ambientLoc = gl.getUniformLocation(program, "u_ambient") Ĭonst u_specularLoc = gl.getUniformLocation(program, "u_specular") Ĭonst u_shininessLoc = gl.getUniformLocation(program, "u_shininess") Ĭonst u_specularFactorLoc = gl.getUniformLocation(program, "u_specularFactor") Ĭonst u_diffuseLoc = gl.getUniformLocation(program, "u_diffuse") Ĭonst u_worldLoc = gl.getUniformLocation(program, "u_world") Ĭonst u_worldInverseTransposeLoc = gl.getUniformLocation(program, "u_worldInverseTranspose") Ĭonst u_worldViewProjectionLoc = gl.getUniformLocation(program, "u_worldViewProjection") Ĭonst u_viewInverseLoc = gl.getUniformLocation(program, "u_viewInverse") Ĭonst positionLoc = gl.getAttribLocation(program, "a_position") Ĭonst normalLoc = gl.getAttribLocation(program, "a_normal") Ĭonst texcoordLoc = gl.getAttribLocation(program, "a_texcoord") Creating Buffers for a Cube TWGL const programInfo = twgl.createProgramInfo(gl, ) Compiling a Shader and looking up locations
Cube world 0.1.2 code#
There's a few extra helpers and lower-level functions if you need them but those 6 functions are the core of TWGL.Ĭompare the TWGL vs WebGL code for a point lit cube. twgl.createFramebufferInfo creates a framebuffer and attachments.
twgl.createTextures creates textures of various sorts.tBuffersAndAttributes binds buffers and sets attributes.twgl.createBufferInfoFromArrays creates buffers and attribute settings.twgl.createProgramInfo compiles a shader and creates setters for attribs and uniforms.A simple lit cube in WebGL might easily take over 60 calls into WebGL.Īt its core there's really only a few main functions Setting up shaders, buffers, attributes and uniforms tBuffersAndAttributes(gl, programInfo, bufferInfo) Gl.viewport(0, 0, gl.canvas.width, gl.canvas.height) Twgl.resizeCanvasToDisplaySize(gl.canvas) Position: ,Ĭonst bufferInfo = twgl.createBufferInfoFromArrays(gl, arrays) Not including the shaders (which is a simple quad shader) here's the entire code Ĭonst gl = document.getElementById("c").getContext("webgl") Ĭonst programInfo = twgl.createProgramInfo(gl, ) To do stuff low-level with WebGL consider using TWGL.
If you want to get stuff done use three.js. This library's sole purpose is to make using the WebGL API less verbose.