Minimum example uses normal to add some simple lighting uses the base older webgl context so shaders version 100 varying keyword 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 happy 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 webgl 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 100 attribute vec3 coordinates attribute vec3 normals varying vec4 vColor send color to next stage fragment void main vec3 v coordinates 8 0 vec3 0 0 1 2 0 0 scale and move shape float d dot normals vec3 0 5 0 2 0 8 20 0 vColor vec4 vec3 0 2 0 3 0 0 d 1 0 gl_Position vec4 v 1 0 let ps version 100 precision mediump float varying vec4 vColor void main gl_FragColor vColor var vertexShader gl createShader gl VERTEX_SHADER gl shaderSource vertexShader vs gl compileShader vertexShader var fragmentShader gl createShader gl FRAGMENT_SHADER gl shaderSource fragmentShader ps gl compileShader fragmentShader 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 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 loaded Extend the prevous version but move over to ES GLSL shaders 3 Instead of varying you use in out Also be sure to change the getContext to use webgl2 otherwise your shaders won t compile 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 void main float d dot normals vec3 0 5 0 1 0 5 vec3 tmp vec3 1 0 0 0 0 0 d 4 0 vColor vec4 tmp 1 0 gl_Position vec4 coordinates 1 0 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 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 loaded
pile 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 void main float d dot normals vec3 0 5 0 1 0 5 vec3 tmp vec3 1 0 0 0 0 0 d 4 0 vColor vec4 tmp 1 0 gl_Position vec4 coordinates 1 0 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 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 loaded