Design Atlas◈3D · WebGL
Particles, shaders, bloom, displacement and more — 3D techniques built with three.js. — 40 entries
Flow-field particles플로우 필드 파티클
Thousands of particles drifting along a noise-driven flow field to trace organic, swirling paths.
GPGPU particle simulationGPGPU 파티클 시뮬레이션
Storing particle positions in a texture and updating them entirely on the GPU, so tens of thousands can move smoothly.
Portal (window into another world)포털(다른 세계로 창)
Rendering one scene to a texture first, then pasting it live onto a door, mirror, or window surface in another scene.
Reflector (mirror) floor리플렉터(거울) 바닥
Turning a flat plane into a live mirror that reflects whatever sits above it in real time.
Water shader물 셰이더
A custom shader that ripples surface height with sine waves and adds fresnel and specular to fake a rolling water surface.
Fluid (ink) simulation유체(잉크) 시뮬레이션
Faking the look of ink diffusing in water by layering warped noise, instead of solving real fluid equations.
Skybox (procedural sky)스카이박스(절차적 하늘)
Painting a full sky — that shifts with time of day — from one shader that mimics atmospheric scattering, no image required.
Heat distortion (haze)아지랑이(열기 굴절)
Capturing the screen to a texture, then redrawing it with noise-warped UVs to fake the shimmer of light bending through hot air.
Dissolve shader디졸브(소멸) 셰이더
Discarding every pixel whose noise value falls below a threshold, so a surface appears to burn away and re-form.
Hologram shader홀로그램 셰이더
A shader combining fresnel rim light, scanlines, and flicker to fake the blue sci-fi hologram look.
Audio-reactive visual오디오 반응형 비주얼
Driving bar heights or object scale in real time from a music track’s per-frequency-band energy.
Text particles텍스트 파티클
Drawing text to a 2D canvas, sampling its pixels, and having particles repeatedly gather into that shape and scatter.
Infinite tunnel무한 터널
Flying the camera through a chain of rings while wrapping its position with a modulo, so the flythrough never seems to end.
Noise sphere노이즈 구체
Pushing and pulling a sphere’s surface along its normals with 3D noise to sculpt it into a lumpy planet or organic blob.
Marching cubes (metaballs)마칭 큐브(메타볼)
Extracting the boundary where an invisible density field crosses a threshold, producing metaballs that fuse and split.
Line art shader라인 아트 셰이더
Drawing layered Lissajous curves with true-width 3D lines to build generative, hand-drawn-looking line art.
Particle field파티클 필드
Thousands of points drawn in one call to create a starfield or floating dust.
Wireframe와이어프레임
Rendering only the edges of a mesh’s polygons, without filling the faces, to reveal its underlying structure.
Matcap매트캡
Faking a material’s shading and reflections with a single pre-baked sphere texture, without any lighting calculation.
PBR materialPBR 머티리얼
Describing a material with just two values — metalness and roughness — that map closely to how light physically reflects.
Environment map환경 맵
Lighting and reflecting an object using a texture of its surroundings — realistic reflections and lighting in one step.
Bloom블룸
A post-processing effect where bright areas bleed outward — mimicking a camera lens saturating under strong light.
Custom shader material커스텀 셰이더 머티리얼
Writing GLSL by hand instead of using a built-in material, to control color and shape at the vertex and pixel level.
Vertex displacement버텍스 디스플레이스먼트
Pushing vertex positions around inside the vertex shader using a noise function — used for terrain, waves, organic deformation.
Instanced mesh인스턴스드 메시
Drawing thousands of objects that share one geometry in a single draw call.
Fog포그
Blending objects into the background color as they get farther from the camera — adds depth and hides distant pop-in.
Raycasting레이캐스팅
Firing a ray from a screen point (like the pointer) into 3D space to find which object it hits.
Orbit controls오빗 컨트롤
The most basic 3D-viewer camera rig: drag to orbit around a target, scroll to zoom.
Post-processing포스트 프로세싱
Reprocessing the already-rendered frame through a chain of passes to add color grading, texture, or distortion.
Toon shading툰 셰이딩
Shading in a few sharp color bands instead of a smooth gradient, for a cartoon/anime look.
Fresnel rim light프레넬 림 라이트
A shader effect that glows brighter at grazing angles — the silhouette edge — and stays dim head-on.
Glass transmission유리 트랜스미션
A physically based glass material that actually refracts what’s behind it, instead of faking transparency with alpha.
Synthwave grid신스웨이브 그리드
The signature 80s retrofuturist scene: a neon grid floor and a striped sun receding into the horizon.
Raymarching레이마칭
Drawing shapes defined purely as math, by marching a ray forward from every pixel, with no triangle mesh at all.
Procedural terrain절차적 지형
Layering noise functions to automatically generate natural-looking hills and mountains.
Depth of field피사계 심도
Blurring objects in front of and behind the camera’s focus distance to draw the eye to what’s in focus.
Outline pass아웃라인 패스
Post-processing that detects a selected object’s silhouette in screen space and highlights it with a glowing outline.
Morph targets모프 타겟
Smoothly interpolating between two shapes with the same vertex count, so one mesh morphs into another.
Shadow mapping섀도 매핑
Rendering once more from the light’s point of view to record what it can’t see, then using that to draw shadows.
GPU particlesGPU 파티클
Letting the GPU compute every particle’s position inside the vertex shader, instead of the CPU recalculating them each frame.