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 window onload function console log script loaded console log OBJ OBJ onload 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 models to load let mod1 https raw githubusercontent com alecjacobson common 3d test models master data spot obj let mod2 https raw githubusercontent com alecjacobson common 3d test models master data cow obj window onload function console log script loaded console log OBJ OBJ OBJ downloadMeshes mod1 mod1 mod2 mod2 loaded onload function loaded meshes console log mod1 loaded num vertices meshes mod1 vertices length console log mod2 loaded num vertices meshes mod2 vertices length loaded console log ready Single triangle 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 let vs version 100 attribute vec3 coordinates void main gl Position vec4 coordinates 1 0 let ps version 100 void main gl FragColor vec4 1 0 1 0 0 0 1 0 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 0 0 0 5 0 0 0 5 0 5 0 0 0 5 0 5 0 0 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 indices 0 1 2 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 connect with buffers gl bindBuffer gl ARRAY BUFFER vertex buffer gl bindBuffer gl ELEMENT ARRAY BUFFER Index Buffer Get the attribute location and connect with buffer var coord gl getAttribLocation program coordinates gl vertexAttribPointer coord 3 gl FLOAT false 0 0 gl enableVertexAttribArray coord Let s go 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 onload 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 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 void main gl Position vec4 coordinates 1 0 let ps version 100 void main gl FragColor vec4 1 0 0 2 0 2 1 0 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 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 gl bindBuffer gl ARRAY BUFFER vertex buffer gl bindBuffer gl ELEMENT ARRAY BUFFER Index Buffer get shader and connect it with the data var coord gl getAttribLocation program coordinates gl vertexAttribPointer coord 3 gl FLOAT false 0 0 gl enableVertexAttribArray coord 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
gl enableVertexAttribArray coord Let s go 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 onload 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 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 void main gl Position vec4 coordinates 1 0 let ps version 100 void main gl FragColor vec4 1 0 0 2 0 2 1 0 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 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 gl bindBuffer gl ARRAY BUFFER vertex buffer gl bindBuffer gl ELEMENT ARRAY BUFFER Index Buffer get shader and connect it with the data var coord gl getAttribLocation program coordinates gl vertexAttribPointer coord 3 gl FLOAT false 0 0 gl enableVertexAttribArray coord 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