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