Juicy Models Matrices and Graphics var script2 document createElement script script2 type text javascript script2 src https cdnjs cloudflare com ajax libs gl matrix 2 0 0 gl matrix min js document head appendChild script2 var script document createElement script script type text javascript script src https cdn jsdelivr net npm webgl obj loader 2 0 8 dist webgl obj loader min js document head appendChild script let objtest https raw githubusercontent com alecjacobson common 3d test models master data spot obj document body style height 350px let canvas document createElement canvas canvas width 500 canvas height 500 document body appendChild canvas console log canvas canvas const gl canvas getContext webgl2 If you want to use GLSL ES 3 00 shaders then you have to create a WebGL 2 0 context console log gl gl window onload function OBJ downloadMeshes objtest objtest sphere models sphere obj loaded onload function loaded meshes console log loaded console log meshes objtest var mesh meshes objtest console log Num vertices mesh vertices length let vs version 300 es in vec3 coordinates in vec3 normals out vec4 vColor send color to next stage fragment uniform mat4 mWorld void main float d abs dot normals vec3 0 5 0 1 0 5 0 3 0 1 ambient vec3 tmp vec3 0 0 0 0 1 0 d 1 0 vColor vec4 tmp 1 0 vec4 v mWorld vec4 coordinates 1 0 gl Position v let ps version 300 es precision mediump float in vec4 vColor out vec4 fragColor note you can pick any name except gl reserved built in name void main fragColor vColor var vertexShader gl createShader gl VERTEX SHADER gl shaderSource vertexShader vs gl compileShader vertexShader var message gl getShaderInfoLog vertexShader if message length 0 console log VS Error message var fragmentShader gl createShader gl FRAGMENT SHADER gl shaderSource fragmentShader ps gl compileShader fragmentShader var message gl getShaderInfoLog fragmentShader if message length 0 console log PS Error message program gl createProgram gl attachShader program vertexShader gl attachShader program fragmentShader gl linkProgram program gl detachShader program vertexShader gl detachShader program fragmentShader gl deleteShader vertexShader gl deleteShader fragmentShader if gl getProgramParameter program gl LINK STATUS var linkErrLog gl getProgramInfoLog program console log Shader program did not link successfully Error log linkErrLog return gl useProgram program Defining the geometry var vertices mesh vertices 0 2 4 3 4 5 var vertex buffer gl createBuffer gl bindBuffer gl ARRAY BUFFER vertex buffer gl bufferData gl ARRAY BUFFER new Float32Array vertices gl STATIC DRAW gl bindBuffer gl ARRAY BUFFER null var normals mesh vertices var normals buffer gl createBuffer gl bindBuffer gl ARRAY BUFFER normals buffer gl bufferData gl ARRAY BUFFER new Float32Array normals gl STATIC DRAW gl bindBuffer gl ARRAY BUFFER null var indices mesh indices 2 4 2 3 var Index Buffer gl createBuffer gl bindBuffer gl ELEMENT ARRAY BUFFER Index Buffer gl bufferData gl ELEMENT ARRAY BUFFER new Uint16Array indices gl STATIC DRAW gl bindBuffer gl ELEMENT ARRAY BUFFER null select which buffers to use and connect them with the shader get shader and connect it with the data gl bindBuffer gl ARRAY BUFFER vertex buffer var coord gl getAttribLocation program coordinates gl vertexAttribPointer coord 3 gl FLOAT false 4 3 0 gl enableVertexAttribArray coord gl bindBuffer gl ARRAY BUFFER null gl bindBuffer gl ARRAY BUFFER normals buffer var norms gl getAttribLocation program normals gl vertexAttribPointer norms 3 gl FLOAT false 4 3 0 gl enableVertexAttribArray norms gl bindBuffer gl ARRAY BUFFER null console log GL Errors gl getError Draw the geometry gl bindBuffer gl ELEMENT ARRAY BUFFER Index Buffer let angle 2 0 function animation pass any parameters to the shader var worldMatrix mat4 create angle 0 1 slowly rotate mat4 rotate worldMatrix mat4 create angle 0 1 0 var mat4UniformLoc gl getUniformLocation program mWorld gl uniformMatrix4fv mat4UniformLoc gl FALSE worldMatrix gl clearColor 0 5 0 5 0 5 0 9 gl enable gl DEPTH TEST gl clear gl COLOR BUFFER BIT gl viewport 0 0 canvas width canvas height gl drawElements gl TRIANGLES indices length gl UNSIGNED SHORT 0 end animation setInterval animation 200 loaded
program vertexShader gl detachShader program fragmentShader gl deleteShader vertexShader gl deleteShader fragmentShader if gl getProgramParameter program gl LINK STATUS var linkErrLog gl getProgramInfoLog program console log Shader program did not link successfully Error log linkErrLog return gl useProgram program Defining the geometry var vertices mesh vertices 0 2 4 3 4 5 var vertex buffer gl createBuffer gl bindBuffer gl ARRAY BUFFER vertex buffer gl bufferData gl ARRAY BUFFER new Float32Array vertices gl STATIC DRAW gl bindBuffer gl ARRAY BUFFER null var normals mesh vertices var normals buffer gl createBuffer gl bindBuffer gl ARRAY BUFFER normals buffer gl bufferData gl ARRAY BUFFER new Float32Array normals gl STATIC DRAW gl bindBuffer gl ARRAY BUFFER null var indices mesh indices 2 4 2 3 var Index Buffer gl createBuffer gl bindBuffer gl ELEMENT ARRAY BUFFER Index Buffer gl bufferData gl ELEMENT ARRAY BUFFER new Uint16Array indices gl STATIC DRAW gl bindBuffer gl ELEMENT ARRAY BUFFER null select which buffers to use and connect them with the shader get shader and connect it with the data gl bindBuffer gl ARRAY BUFFER vertex buffer var coord gl getAttribLocation program coordinates gl vertexAttribPointer coord 3 gl FLOAT false 4 3 0 gl enableVertexAttribArray coord gl bindBuffer gl ARRAY BUFFER null gl bindBuffer gl ARRAY BUFFER normals buffer var norms gl getAttribLocation program normals gl vertexAttribPointer norms 3 gl FLOAT false 4 3 0 gl enableVertexAttribArray norms gl bindBuffer gl ARRAY BUFFER null console log GL Errors gl getError Draw the geometry gl bindBuffer gl ELEMENT ARRAY BUFFER Index Buffer let angle 2 0 function animation pass any parameters to the shader var worldMatrix mat4 create angle 0 1 slowly rotate mat4 rotate worldMatrix mat4 create angle 0 1 0 var mat4UniformLoc gl getUniformLocation program mWorld gl uniformMatrix4fv mat4UniformLoc gl FALSE worldMatrix gl clearColor 0 5 0 5 0 5 0 9 gl enable gl DEPTH TEST gl clear gl COLOR BUFFER BIT gl viewport 0 0 canvas width canvas height gl drawElements gl TRIANGLES indices length gl UNSIGNED SHORT 0 end animation setInterval animation 200 loaded