Examples
GLTF Examples
GLTF/GLB File ExampleDraco Compression examplegltf example: vertex colors GLTF Example Shape Key Animgltf animation exampleGLTF example: Multiple UV ChannelsGLTFscene animation switchinggltf vertex animationGLTF Bones Animation Zombie Walkgltf example: how to load embedded texture GLTF example: skin with multiple meshes/materialsGLTF example: interpolation typesgltf scene example: animated skin attached to object anim GLTF Loose Edges and Pointsgetshader examplegltfsequence_dem
GLTF/GLB File ExampleDraco Compression examplegltf example: vertex colors GLTF Example Shape Key Animgltf animation exampleGLTF example: Multiple UV ChannelsGLTFscene animation switchinggltf vertex animationGLTF Bones Animation Zombie Walkgltf example: how to load embedded texture GLTF example: skin with multiple meshes/materialsGLTF example: interpolation typesgltf scene example: animated skin attached to object anim GLTF Loose Edges and Pointsgetshader examplegltfsequence_dem
Webgl Animation
Sinus Rotation 2timed sequenceRandom AnimationBool Animation Linkedimage sequence animationClockTriggerBetweenIn Out AnimTimelineValueEasing exampleBool animation simple
Sinus Rotation 2timed sequenceRandom AnimationBool Animation Linkedimage sequence animationClockTriggerBetweenIn Out AnimTimelineValueEasing exampleBool animation simple
Webgl Mesh
Primitive Meshestext mesh3D Mesh From Filepolyhedron meshscale by normaldivided mesh explosionspline deform meshtwist meshGLTF model with textures
Primitive Meshestext mesh3D Mesh From Filepolyhedron meshscale by normaldivided mesh explosionspline deform meshtwist meshGLTF model with textures
Webgl Transformation
TransformRepeatRepeat 2DGrid Transform advancedattach html element in 3d attach 3d html elementGrid transform simple
TransformRepeatRepeat 2DGrid Transform advancedattach html element in 3d attach 3d html elementGrid transform simple
Webgl Material
Material BasicsBill boardwireframesvideo texturesinus / texcoord offsetsHSB color conversion360 pic to spherecolor area shader effectPhongMaterial exampleSpotLight - exampleSimple Vertex Displacement Map
Material BasicsBill boardwireframesvideo texturesinus / texcoord offsetsHSB color conversion360 pic to spherecolor area shader effectPhongMaterial exampleSpotLight - exampleSimple Vertex Displacement Map
Webgl Camera
Orthogonal / Isometricprojection matrix interpolateMultiple camerascamera look at object
Orthogonal / Isometricprojection matrix interpolateMultiple camerascamera look at object
Arrays
Follow path arrayFollow path array flocktext meshinterpolate arraysgaussian distributed random numberstexture array loaderArrays and lines 01Geometry to pointsArrays And Lines 02circlecircle harmonicsspiralrainbouncing cubesArray logic between
Follow path arrayFollow path array flocktext meshinterpolate arraysgaussian distributed random numberstexture array loaderArrays and lines 01Geometry to pointsArrays And Lines 02circlecircle harmonicsspiralrainbouncing cubesArray logic between
Textures
SVG texturevideo textureWebcam texturenoise texturestexture array loadertextarea / input exampleNoise textures 01Blend 2 texturesDisplacement sliceRotate with maskPixelate with maskPixel displace red greenFog texture examplefontfile exampleGLTF model with texturesExample: PixelDifference
SVG texturevideo textureWebcam texturenoise texturestexture array loadertextarea / input exampleNoise textures 01Blend 2 texturesDisplacement sliceRotate with maskPixelate with maskPixel displace red greenFog texture examplefontfile exampleGLTF model with texturesExample: PixelDifference
Interactive
intersect: mesh array pickingOrbit controlsClick Counterdistance2dphone motion sensorMouse Picking with StatescrollScreen position to 3Dvr teleportationmediapipe intersect ops interactivity examplesocketcluster example
intersect: mesh array pickingOrbit controlsClick Counterdistance2dphone motion sensorMouse Picking with StatescrollScreen position to 3Dvr teleportationmediapipe intersect ops interactivity examplesocketcluster example
Html Css
html elementfade in/out html elementdiv elementattach html element in 3d attach 3d html elementcursor exampleCSS OP Examplehtml css property v2 exampleiFrame v2 examplemodal overlay example
html elementfade in/out html elementdiv elementattach html element in 3d attach 3d html elementcursor exampleCSS OP Examplehtml css property v2 exampleiFrame v2 examplemodal overlay example
Draco Compression example
Open In Editor
List
model from https://sketchfab.com/3d-models/habit-cheeseburger-08aa1eecd4b94ca795c2124035f693d2
by jtressel https://sketchfab.com/jtressle
no optimization other than compression
calorie count:
Original OBJ: 16,962kb
GLTF model without Draco compression: 3,885kb
With default Blender Draco compression settings: 616kb