Tag Search: three.js

GPU Particles
, , , , , , ,

A particle engine written in WebGL that uses shaders to process all particle motion. 200,000 particles are simulated in the browser. 8 shaders provide different animation modes that can be accessed via the number keys.

View Project

GPUParticles01 GPUParticles03 GPUParticles02 GPUParticles04 GPUParticles05 GPUParticles06 GPUParticles07

Procedural Planets
, , ,

Written in WebGL using three.js. Planet, nebulae, and stars are all generated procedurally using shaders. Textures are generated for a height map, moisture map, texture map, normal map, and roughness map. A biome lookup image is generated to control the distribution of colors. Unique names are generated and used as the random seed, which is then added to the URL string. If you find a cool planet, you can just share the link, and the planet you made will be shared.

View Project

Planet24 Planet22 Planet21 Planet20 Planet19 Planet18 Planet16 Planet15 Planet14 Planet13 Planet12 Planet11 Planet10 Planet09 Planet08 Planet07 Planet05 Planet04 Planet03 Planet02 Planet01

Procedural City
, , , ,

Fly through a cityscape built entirely from algorithms. Each building is randomly generated by manipulating cube geometry. The position, size, and color of the buildings are generated from simplex noise maps. This was built for WebGL using the Three.js library.

View Experiment

Cityscape-1 Cityscape-3 Cityscape-4 Cityscape-5 Cityscape-8 Cityscape-7 Cityscape-6

Perlin Shader
, , , ,

Perlin noise can be used to create a wide variety of imagery. Here we use a fragment shader and Perlin noise to divide a canvas into regions and render different noise patterns in each. The resulting visuals are totally random and constantly evolving. You can also save high-res screenshots from the controls. This shader was written in GLSL and presented with Three.js. Javascript was used to track and evolve the individual regions.

View Experiment

PerlinShader-13 PerlinShader-12 PerlinShader-11 PerlinShader-10 PerlinShader-9 PerlinShader-8 PerlinShader-7 PerlinShader-5 PerlinShader-4 PerlinShader-3 PerlinShader-2 PerlinShader-1

Reaction Diffusion Shader
, , ,

A simulation of two chemicals reacting in a fluid written in GLSL and presented using Three.js. ┬áThis experiment was adapted from Daniel Shiffman’s reaction diffusion in Processing tutorial, which was in turn adapted from Karl Sim’s excellent description of the process.

View Experiment

reactiondiffusion-39 reactiondiffusion-36 reactiondiffusion-35 reactiondiffusion-32 reactiondiffusion-30 reactiondiffusion-27 reactiondiffusion-24 reactiondiffusion-22 reactiondiffusion-20 reactiondiffusion-16 reactiondiffusion-13 reactiondiffusion-11 reactiondiffusion-8 reactiondiffusion-5 reactiondiffusion-3

WebGL Polygon Chain
, ,

We’re back in WebGL and Three.js again. We’ve got 300 polygons moving in an oscillating chain. Basic horizontal and vertical symmetry add the special sauce.

View Experiment

polychain-15 polychain-11 polychain-7 polychain-3 polychain-1

WebGL Kaleidoscope
, ,

WebGL is a super-powerful tool for creative expression on the web, and three.js makes an otherwise obtuse system a pleasure to work with. Here is a kaleidoscope created with WebGL via three.js. It has a number of configurable features including the number of axis and the type of grid used. It also uses environment mapping for a nice reflective effect.

View Kaleidoscope

kaleidoscope2 kaleidoscope3


Vertex Oscillation Shader
, , ,

Layering a few oscillations can produce dramatic effects. This project uses vertex and fragment shaders written in GLSL with a custom Three.js shader. We begin with a sphere and then send multiple compound waves through each axis via a vertex shader. The fragment shader then uses the offset values to map a color to each vertex. This demo give you control over each modulation wave an the colors used to represent the offsets.

View Experiment

VertexOsc4 VertexOsc6 VertexOsc1 VertexOsc2 VertexOsc3