WebGL Demo Capsule var script2 document createElement script script2 type text javascript script2 src https notebook xbdev net var scripts vector0 8 js id 33333233 document head appendChild script2 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 function createCapsule radius height numSubdivisionsHeight numSegments if radius undefined radius 0 5 if height undefined height radius 2 if numSubdivisionsHeight undefined numSubdivisionsHeight 12 if numSegments undefined numSegments 12 var vertices var normals var uvs var indices function calculateRing segments r y dy var segIncr 1 0 segments 1 for var s 0 s segments s var x Math cos Math PI 2 s segIncr r var z Math sin Math PI 2 s segIncr r vertices push radius x radius y height dy radius z normals push x y z var u s segIncr var v 0 5 radius y height dy 2 0 radius height uvs push u 1 0 v var ringsBody numSubdivisionsHeight 1 var ringsTotal numSubdivisionsHeight ringsBody var bodyIncr 1 0 ringsBody 1 var ringIncr 1 0 numSubdivisionsHeight 1 for var r 0 r numSubdivisionsHeight 2 r calculateRing numSegments Math sin Math PI r ringIncr Math sin Math PI r ringIncr 0 5 0 5 for var r 0 r ringsBody r calculateRing numSegments 1 0 0 0 r bodyIncr 0 5 for var r numSubdivisionsHeight 2 r numSubdivisionsHeight r calculateRing numSegments Math sin Math PI r ringIncr Math sin Math PI r ringIncr 0 5 0 5 for var r 0 r ringsTotal 1 r for var s 0 s numSegments 1 s indices push r numSegments s 1 r numSegments s 0 r 1 numSegments s 1 indices push r 1 numSegments s 0 r 1 numSegments s 1 r numSegments s return vertices vertices normals normals uvs uvs indices indices end createCapsule onload function var mesh createCapsule 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 1 0 0 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 flat 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 console log vertices var normals mesh normals flat 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 flat 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 console log indices length indices length let angle 0 0 function animation models not located in the origin so we move it let mt mat4 translate new vec3 0 0 0 let mr mat4 fromAxisAngle new vec3 1 0 0 angle let ms mat4 scale new vec3 0 8 0 8 0 8 angle 0 01 slowly rotate let mat mat4 mul mat4 mul mt ms mr pass any parameters to the shader var mat4UniformLoc gl getUniformLocation program mWorld gl uniformMatrix4fv mat4UniformLoc gl FALSE mat float32 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 or try the wireframe gl drawElements gl LINES indices length gl UNSIGNED SHORT 0 end animation setInterval animation 20 console log onload complete end onload console log ready WebGL Demo var script2 document createElement script script2 type text javascript script2 src https notebook xbdev net var scripts vector0 8 js id 33333233 document head appendChild script2 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 function createCapsule radius height numSubdivisionsHeight numSegments if radius undefined radius 0 5 if height undefined height radius 2 if numSubdivisionsHeight undefined numSubdivisionsHeight 12 if numSegments undefined numSegments 12 var vertices var normals var uvs var indices function calculateRing segments r y dy var segIncr 1 0 segments 1 for var s 0 s segments s var x Math cos Math PI 2 s segIncr r var z Math sin Math PI 2 s segIncr r vertices push radius x radius y height dy radius z normals push x y z var u s segIncr var v 0 5 radius y height dy 2 0 radius height uvs push u 1 0 v var ringsBody numSubdivisionsHeight 1 var ringsTotal numSubdivisionsHeight ringsBody var bodyIncr 1 0 ringsBody 1 var ringIncr 1 0 numSubdivisionsHeight 1 for var r 0 r numSubdivisionsHeight 2 r calculateRing numSegments Math sin Math PI r ringIncr Math sin Math PI r ringIncr 0 5 0 5 for var r 0 r ringsBody r calculateRing numSegments 1 0 0 0 r bodyIncr 0 5 for var r numSubdivisionsHeight 2 r numSubdivisionsHeight r calculateRing numSegments Math sin Math PI r ringIncr Math sin Math PI r ringIncr 0 5 0 5 for var r 0 r ringsTotal 1 r for var s 0 s numSegments 1 s indices push r numSegments s 1 r numSegments s 0 r 1 numSegments s 1 indices push r 1 numSegments s 0 r 1 numSegments s 1 r numSegments s return vertices vertices normals normals uvs uvs indices indices end createCapsule onload function var mesh createCapsule 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 1 0 0 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 flat 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 normals flat 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 flat 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 console log indices length indices length let angle 0 0 function animation gl clearColor 0 5 0 5 0 5 0 9 gl enable gl DEPTH TEST gl clear gl COLOR BUFFER BIT for let a 0 a 6 a let xx 0 5 a 0 2 let yy 0 5 a 3 0 2 models not located in the origin so we move it let mt mat4 translate new vec3 xx yy 0 let mr mat4 fromAxisAngle new vec3 1 0 0 angle a let ms mat4 scale new vec3 0 2 0 2 0 2 angle 0 01 slowly rotate let mat mat4 mul mat4 mul ms mt mr pass any parameters to the shader var mat4UniformLoc gl getUniformLocation program mWorld gl uniformMatrix4fv mat4UniformLoc gl FALSE mat float32 gl viewport 0 0 canvas width canvas height gl drawElements gl TRIANGLES indices length gl UNSIGNED SHORT 0 or try the wireframe gl drawElements gl LINES indices length gl UNSIGNED SHORT 0 end animation setInterval animation 20 console log onload complete end onload console log ready
cript2 document createElement script script2 type text javascript script2 src https notebook xbdev net var scripts vector0 8 js id 33333233 document head appendChild script2 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 function createCapsule radius height numSubdivisionsHeight numSegments if radius undefined radius 0 5 if height undefined height radius 2 if numSubdivisionsHeight undefined numSubdivisionsHeight 12 if numSegments undefined numSegments 12 var vertices var normals var uvs var indices function calculateRing segments r y dy var segIncr 1 0 segments 1 for var s 0 s segments s var x Math cos Math PI 2 s segIncr r var z Math sin Math PI 2 s segIncr r vertices push radius x radius y height dy radius z normals push x y z var u s segIncr var v 0 5 radius y height dy 2 0 radius height uvs push u 1 0 v var ringsBody numSubdivisionsHeight 1 var ringsTotal numSubdivisionsHeight ringsBody var bodyIncr 1 0 ringsBody 1 var ringIncr 1 0 numSubdivisionsHeight 1 for var r 0 r numSubdivisionsHeight 2 r calculateRing numSegments Math sin Math PI r ringIncr Math sin Math PI r ringIncr 0 5 0 5 for var r 0 r ringsBody r calculateRing numSegments 1 0 0 0 r bodyIncr 0 5 for var r numSubdivisionsHeight 2 r numSubdivisionsHeight r calculateRing numSegments Math sin Math PI r ringIncr Math sin Math PI r ringIncr 0 5 0 5 for var r 0 r ringsTotal 1 r for var s 0 s numSegments 1 s indices push r numSegments s 1 r numSegments s 0 r 1 numSegments s 1 indices push r 1 numSegments s 0 r 1 numSegments s 1 r numSegments s return vertices vertices normals normals uvs uvs indices indices end createCapsule onload function var mesh createCapsule 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 1 0 0 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 flat 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 normals flat 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 flat 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 console log indices length indices length let angle 0 0 function animation gl clearColor 0 5 0 5 0 5 0 9 gl enable gl DEPTH TEST gl clear gl COLOR BUFFER BIT for let a 0 a 6 a let xx 0 5 a 0 2 let yy 0 5 a 3 0 2 models not located in the origin so we move it let mt mat4 translate new vec3 xx yy 0 let mr mat4 fromAxisAngle new vec3 1 0 0 angle a let ms mat4 scale new vec3 0 2 0 2 0 2 angle 0 01 slowly rotate let mat mat4 mul mat4 mul ms mt mr pass any parameters to the shader var mat4UniformLoc gl getUniformLocation program mWorld gl uniformMatrix4fv mat4UniformLoc gl FALSE mat float32 gl viewport 0 0 canvas width canvas height gl drawElements gl TRIANGLES indices length gl UNSIGNED SHORT 0 or try the wireframe gl drawElements gl LINES indices length gl UNSIGNED SHORT 0 end animation setInterval animation 20 console log onload complete end onload console log ready