Writing a minimal GLTF loader from scratch GLTF file format is a open source specification for 3d files includes basic geometry skinning and animation const url https notebook xbdev net var resources monster gltf z Monster gltf Note number of open source test models available for validating a more complex gltf loader https github com KhronosGroup glTF Sample Models Part 1 Just get the data Define some helper functions first function getBaseUri uri var basePath var i uri lastIndexOf if i 1 basePath uri substring 0 i 1 return basePath let gltfpromise await fetch url let gltfraw await gltfpromise text console log gltf file loaded length gltfraw length Parse the file and get the data let gltf JSON parse gltfraw let basePath getBaseUri url Launch loading resources task buffers etc console log num resources gltf buffers length for let i 0 i gltf buffers length i let rpath gltf buffers i uri console log resource path basePath rpath Load in all textures console log num textures gltf images length for let i 0 i gltf images length i let rpath gltf images i uri console log texture path basePath rpath Getting the data const url https notebook xbdev net var resources duck gltf Duck gltf id ref https github com KhronosGroup glTF Tutorials blob master gltfTutorial gltfTutorial 005 BuffersBufferViewsAccessors md Define some helper functions first function getBaseUri uri var basePath var i uri lastIndexOf if i 1 basePath uri substring 0 i 1 return basePath let gltfpromise await fetch url let gltfraw await gltfpromise text console log gltf file loaded length gltfraw length Parse the file and get the data let gltf JSON parse gltfraw console log gltf nodes length gltf nodes length console log gltf meshes length gltf meshes length console log gltf meshes gltf meshes meshes primitives attributes NORMAL 1 POSITION 2 TEXCOORD 0 3 indices 0 mode 4 material 0 name LOD3spShape bufferViews buffer 0 byteOffset 76768 byteLength 25272 target 34963 buffer 0 byteOffset 0 byteLength 57576 byteStride 12 target 34962 buffer 0 byteOffset 57576 byteLength 19192 byteStride 8 target 34962 let meshes loaded meshes let basePath getBaseUri url Launch loading resources task buffers etc console log num resources gltf buffers length for let i 0 i gltf buffers length i let rpath gltf buffers i uri console log resource path basePath rpath let mpromise await fetch basePath rpath let mbuf await mpromise arrayBuffer binary let floatArray new Float32Array mbuf console log size arraybuffer floatArray byteLength const url https notebook xbdev net var resources duck gltf Duck gltf id document body style minHeight 400px function getBaseUri uri var basePath var i uri lastIndexOf if i 1 basePath uri substring 0 i 1 return basePath let gltfpromise await fetch url let gltfraw await gltfpromise text console log gltf file loaded length gltfraw length Parse the file and get the data let gltf JSON parse gltfraw console log gltf nodes length gltf nodes length console log gltf meshes length gltf meshes length let basePath getBaseUri url Grab 0th buffer let rpath gltf buffers 0 uri console log resource path basePath rpath let mpromise await fetch basePath rpath let mbuf await mpromise arrayBuffer binary let u32Array new Uint16Array mbuf slice 76768 0 25272 2 console log size uint arraybuffer u32Array byteLength let buf1 new Float32Array mbuf 28788 57576 4 console log size buf1 arraybuffer buf1 byteLength let buf2 new Float32Array mbuf slice 57576 0 19192 4 console log size buf2 arraybuffer buf2 byteLength let buf0 floatArray slice 76768 4 76768 4 25272 4 let buf1 floatArray slice 0 57576 4 let buf2 floatArray slice 57576 4 57576 4 19192 4 console log num buf1 byteLength 4 3 bufferViews buffer 0 byteOffset 76768 byteLength 25272 target 34963 buffer 0 byteOffset 0 byteLength 57576 byteStride 12 target 34962 buffer 0 byteOffset 57576 byteLength 19192 byteStride 8 target 34962 Creating a canvas var canvas document createElement canvas canvas width canvas height 300 document body appendChild canvas gl canvas getContext webgl2 Create and store data into vertex buffer var vertex buffer gl createBuffer gl bindBuffer gl ARRAY BUFFER vertex buffer gl bufferData gl ARRAY BUFFER buf1 gl STATIC DRAW offset Create and store data into index buffer var index buffer gl createBuffer gl bindBuffer gl ELEMENT ARRAY BUFFER index buffer gl bufferData gl ELEMENT ARRAY BUFFER u32Array gl STATIC DRAW Shaders var vssrc attribute vec3 position uniform mat4 Pmatrix uniform mat4 Vmatrix uniform mat4 Mmatrix void main void gl Position Pmatrix Vmatrix Mmatrix vec4 position 1 0 var fssrc precision mediump float void main void gl FragColor vec4 1 0 0 0 1 0 1 0 var vertShader gl createShader gl VERTEX SHADER gl shaderSource vertShader vssrc gl compileShader vertShader var fragShader gl createShader gl FRAGMENT SHADER gl shaderSource fragShader fssrc gl compileShader fragShader var shaderProgram gl createProgram gl attachShader shaderProgram vertShader gl attachShader shaderProgram fragShader gl linkProgram shaderProgram Associating attributes to vertex shader var Pmatrix gl getUniformLocation shaderProgram Pmatrix var Vmatrix gl getUniformLocation shaderProgram Vmatrix var Mmatrix gl getUniformLocation shaderProgram Mmatrix gl bindBuffer gl ARRAY BUFFER vertex buffer var position gl getAttribLocation shaderProgram position gl vertexAttribPointer position 3 gl FLOAT false 0 0 gl enableVertexAttribArray position gl useProgram shaderProgram MATRIX mathematics function getProjection angle a zMin zMax var ang Math tan angle 5 Math PI 180 return 0 5 ang 0 0 0 0 0 5 a ang 0 0 0 0 zMax zMin zMax zMin 1 0 0 2 zMax zMin zMax zMin 0 Rotation function axisAngle ax angle let m 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 let c Math cos angle let s Math sin angle let t 1 c let x ax 0 let y ax 1 let z ax 2 m 0 t x x c m 1 t x y z s m 2 t x z y s m 3 0 m 4 t x y z s m 5 t y y c m 6 t y z x s m 7 0 m 8 t x z y s m 9 t y z x s m 10 t z z c m 11 0 return m Angle var angle 0 Animation loop called repeatedly var update function time angle 0 05 let worldMatrix axisAngle 0 1 0 angle let projMatrix getProjection 40 canvas width canvas height 1 1000 translating z let zoom 360 let viewMatrix 1 0 0 0 0 1 0 0 0 0 1 0 0 0 zoom 1 gl enable gl DEPTH TEST gl depthFunc gl LEQUAL gl clearColor 0 5 0 5 0 5 0 9 gl clearDepth 1 0 gl viewport 0 0 0 0 canvas width canvas height gl clear gl COLOR BUFFER BIT gl DEPTH BUFFER BIT gl uniformMatrix4fv Pmatrix false projMatrix gl uniformMatrix4fv Vmatrix false viewMatrix gl uniformMatrix4fv Mmatrix false worldMatrix gl bindBuffer gl ELEMENT ARRAY BUFFER index buffer gl drawElements gl TRIANGLES u32Array length gl UNSIGNED SHORT 0 gl drawElements gl TRIANGLES 12636 gl UNSIGNED SHORT 0 gl drawArrays gl TRIANGLES 0 12636 animation loop setInterval update 50 console log ready accessors 0 bufferView 0 type SCALAR byteOffset 0 componentType 5123 5126 FLOAT or 5123 UNSIGNED SHORT count 12636 important both normal and positions are in bufferView1 offset is used to access data 1 bufferView 1 byteOffset 0 componentType 5126 count 2399 type VEC3 2 bufferView 1 byteOffset 28788 important componentType 5126 count 2399 type VEC3 index into accessors attributes NORMAL 1 POSITION 2 vertices are in bufferView index 2 with offset TEXCOORD 0 3 indices 0 indices are in bufferView index 0 mode 4 topology type of primitives to render i e 0 POINTS 1 LINES 2 LINE LOOP 3 LINE STRIP 4 TRIANGLES 5 TRIANGLE STRIP 6 TRIANGLE FAN See https www khronos org registry glTF specs 2 0 glTF 2 0 html further details
fset 76768 byteLength 25272 target 34963 buffer 0 byteOffset 0 byteLength 57576 byteStride 12 target 34962 buffer 0 byteOffset 57576 byteLength 19192 byteStride 8 target 34962 Creating a canvas var canvas document createElement canvas canvas width canvas height 300 document body appendChild canvas gl canvas getContext webgl2 Create and store data into vertex buffer var vertex buffer gl createBuffer gl bindBuffer gl ARRAY BUFFER vertex buffer gl bufferData gl ARRAY BUFFER buf1 gl STATIC DRAW offset Create and store data into index buffer var index buffer gl createBuffer gl bindBuffer gl ELEMENT ARRAY BUFFER index buffer gl bufferData gl ELEMENT ARRAY BUFFER u32Array gl STATIC DRAW Shaders var vssrc attribute vec3 position uniform mat4 Pmatrix uniform mat4 Vmatrix uniform mat4 Mmatrix void main void gl Position Pmatrix Vmatrix Mmatrix vec4 position 1 0 var fssrc precision mediump float void main void gl FragColor vec4 1 0 0 0 1 0 1 0 var vertShader gl createShader gl VERTEX SHADER gl shaderSource vertShader vssrc gl compileShader vertShader var fragShader gl createShader gl FRAGMENT SHADER gl shaderSource fragShader fssrc gl compileShader fragShader var shaderProgram gl createProgram gl attachShader shaderProgram vertShader gl attachShader shaderProgram fragShader gl linkProgram shaderProgram Associating attributes to vertex shader var Pmatrix gl getUniformLocation shaderProgram Pmatrix var Vmatrix gl getUniformLocation shaderProgram Vmatrix var Mmatrix gl getUniformLocation shaderProgram Mmatrix gl bindBuffer gl ARRAY BUFFER vertex buffer var position gl getAttribLocation shaderProgram position gl vertexAttribPointer position 3 gl FLOAT false 0 0 gl enableVertexAttribArray position gl useProgram shaderProgram MATRIX mathematics function getProjection angle a zMin zMax var ang Math tan angle 5 Math PI 180 return 0 5 ang 0 0 0 0 0 5 a ang 0 0 0 0 zMax zMin zMax zMin 1 0 0 2 zMax zMin zMax zMin 0 Rotation function axisAngle ax angle let m 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 let c Math cos angle let s Math sin angle let t 1 c let x ax 0 let y ax 1 let z ax 2 m 0 t x x c m 1 t x y z s m 2 t x z y s m 3 0 m 4 t x y z s m 5 t y y c m 6 t y z x s m 7 0 m 8 t x z y s m 9 t y z x s m 10 t z z c m 11 0 return m Angle var angle 0 Animation loop called repeatedly var update function time angle 0 05 let worldMatrix axisAngle 0 1 0 angle let projMatrix getProjection 40 canvas width canvas height 1 1000 translating z let zoom 360 let viewMatrix 1 0 0 0 0 1 0 0 0 0 1 0 0 0 zoom 1 gl enable gl DEPTH TEST gl depthFunc gl LEQUAL gl clearColor 0 5 0 5 0 5 0 9 gl clearDepth 1 0 gl viewport 0 0 0 0 canvas width canvas height gl clear gl COLOR BUFFER BIT gl DEPTH BUFFER BIT gl uniformMatrix4fv Pmatrix false projMatrix gl uniformMatrix4fv Vmatrix false viewMatrix gl uniformMatrix4fv Mmatrix false worldMatrix gl bindBuffer gl ELEMENT ARRAY BUFFER index buffer gl drawElements gl TRIANGLES u32Array length gl UNSIGNED SHORT 0 gl drawElements gl TRIANGLES 12636 gl UNSIGNED SHORT 0 gl drawArrays gl TRIANGLES 0 12636 animation loop setInterval update 50 console log ready accessors 0 bufferView 0 type SCALAR byteOffset 0 componentType 5123 5126 FLOAT or 5123 UNSIGNED SHORT count 12636 important both normal and positions are in bufferView1 offset is used to access data 1 bufferView 1 byteOffset 0 componentType 5126 count 2399 type VEC3 2 bufferView 1 byteOffset 28788 important componentType 5126 count 2399 type VEC3 index into accessors attributes NORMAL 1 POSITION 2 vertices are in bufferView index 2 with offset TEXCOORD 0 3 indices 0 indices are in bufferView index 0 mode 4 topology type of primitives to render i e 0 POINTS 1 LINES 2 LINE LOOP 3 LINE STRIP 4 TRIANGLES 5 TRIANGLE STRIP 6 TRIANGLE FAN See https www khronos org registry glTF specs 2 0 glTF 2 0 html further details