SvelteThemes
SvelteThemes
Themes
Resources
Jobs/Gigs
Paid
Updates
Submit
Shader Playground
ivanwang123
A playground for testing out shaders in Three.js
#three-js
#typescript
#svelte
#glsl
Need a Svelte website built?
Hire a professional Svelte developer today.
Download
Features
Water
Transparency
Distortion
Edge foam
Reflection
Waves
Dynamic lighting
Grass
Color and shadow
Dynamic lighting
Wind movement
Spawn on grass terrain only
[-] Lights
Directional light
Point light
Spot light
Area light
Godray
Bloom
Weather and elements
Fire
Rain
Particles
Day/night cycle
Structures
Tree
Toon material
Customizable lighting (specular, rim)
Bugs
Multiple lights and colors do not mix correctly
Pixel pass uses hard coded light direction
Reflection shader normal edge detection is not correct
Water does not react to lighting
Prevent grass from spawning in water
Resources
[Grass-Demo]
https://jsfiddle.net/felixmariotto/hvrg721n/
[Water-Slides]
https://29a.ch/slides/2012/webglwater/#title
[Foam-Demo]
https://codesandbox.io/p/sandbox/eager-ganguly-x4fl4?file=%2Findex.html
[Waterfall-Tutorial]
https://www.youtube.com/watch?v=PLCGL3RW548&ab_channel=Miziziziz
[Reflectance-Sourcecode]
https://github.com/mrdoob/three.js/blob/dev/examples/jsm/objects/Reflector.js
[Pixel-Shader-Sourcecode]
https://github.com/KodyJKing/hello-threejs
[Orthographic-Tutorial]
https://halisavakis.com/shader-bits-world-space-reconstruction-orthographic-camera-texture-projection-fake-perspective-uvs/
[Outline-Tutorial]
https://www.youtube.com/watch?v=WBoApONC7bM&ab_channel=CrigzVsGameDev
Top categories
tailwind
daisyui
admin template
popup
mdsvex
portfolio
blog
form
ecommerce
ui
carousel
auth
dark
seo
image
routing
Need a Svelte website built?
Hire a professional Svelte developer today.