Three.js GLB/GLTF viewer

GLB/GLTF viewer

Examples from KhronosGroup/glTF-Sample-Models

Install and build

npm run install:webpack
npm i  
npm run build
npm run dev

Resources

Three.js examples

• https://threejs.org/examples/

Postprocessing and Realism Effects

• GitHub - Post Processing
• GitHub - three.js Realism Effects
• Realism Effects AO example

Three.js color management

• Color management
• Updates to Color Management in three.js r152

Three.js Shadow

• https://sbcode.net/threejs/directional-light-shadow/
• https://sbcode.net/threejs/soft-shadows/
• https://cs.wellesley.edu/~cs307/lectures/20new.html
• https://discourse.threejs.org/t/performant-soft-shadows-three-js/27777
• https://codesandbox.io/s/soft-shadows-dh2jc?file=/src/index.js:143-154

Three.js basic shadow map

• https://threejs.org/examples/?q=shadow#webgl_shadowmap_pointlight
• https://threejs.org/examples/?q=shadow#webgl_shadowmap_viewer
• https://threejs.org/examples/webgl_shadowmesh.html

Three.js PCF (soft) shadow map

• https://threejs.org/examples/webgl_shadowmap.html
• https://threejs.org/examples/webgl_shadowmap_performance.html

Three.js Cascaded shadow mapping (CSM)

• https://threejs.org/examples/webgl_shadowmap_csm.html

Three.js VSM shadow map

• https://threejs.org/examples/webgl_shadowmap_vsm.html

Three.js PCSS shadow

• https://threejs.org/examples/?q=shado#webgl_shadowmap_pcss

Three-js postprocessing

How to use post-processing

Progressive Light map

• https://threejs.org/examples/webgl_shadowmap_progressive.html
• https://codesandbox.io/s/adaptive-lightmaps-wsg13?file=/src/Lightmap.js:251-270

Three.js contact shadow

• https://threejs.org/examples/webgl_shadow_contact.html
• https://codesandbox.io/s/shoe-configurator-qxjoj?file=/src/App.js

Static light map

• https://threejs.org/examples/webgl_materials_lightmap.html

Ambient Occlusion

• https://gkjohnson.github.io/threejs-sandbox/gtaoPass/

Three.js SSAOPass

• https://threejs.org/examples/webgl_postprocessing_ssao.html
• https://alteredqualia.com/three/examples/webgl_postprocessing_ssao.html

Three.js SAOPass

• https://threejs.org/examples/webgl_postprocessing_sao.html

Environment

• https://threejs.org/docs/#api/en/extras/PMREMGenerator

Global illumination

• Adopting a Progressive Photorealistic Global Illumination in Three.JS
• https://threejs.org/examples/webgl_simple_gi.html

Screen space reflection

• https://threejs.org/examples/webgl_postprocessing_ssr.html
• https://github.com/0beqz/screen-space-reflections
• npm - three.js Screen Space Reflections
• https://screen-space-reflections.vercel.app/
• Three.js Screen Space Reflections

Outline

• https://threejs.org/examples/webgl_postprocessing_outline.html

Bloom

• https://threejs.org/examples/webgl_postprocessing_unreal_bloom.html
• https://threejs.org/examples/webgl_postprocessing_unreal_bloom_selective.html
• https://github.com/mattatz/THREE.BloomBlendPass

Specifications

• WebGL Specification
• OpenGL ES 2.0 Common Profile Specification
• OpenGL ES Shading Language 1.00 Specification
• WebGL 2.0 Specification
• OpenGL ES 3.0.6 Specification
• OpenGL ES Shading Language 3.00 Specification

Shader

• Line texture
• GRAPROG
• Vorocracks marble
• Kraft
• Grid Paper
• Cube Circle Sketch