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