Click to start
26 |31 | Build a media player class that can be easily integrated, supporting 32 | media playback, SoundCloud streaming and getUserMedia streams, using Web 33 | Audio API. 34 |
35 |36 | It also uses AnalyserNode to perform an FFT, and can upload the spectrum 37 | to a GPU texture. 38 |
39 |Can work together with kick detection.
40 |41 | Play | 42 | Use microphone 43 |
44 |More details...
45 |47 | SoundCloud stream is done via their API, connecting the stream source 48 | to an HTMLAudioElement and creating a MediaElementSource from that. 49 |
50 |The microphone can be used via navigator.getUserMedia<().
51 |52 | I didn't have time to implement media playback, it would be done with 53 | MediaElementSource, too. 54 |
55 |56 | All nodes are connected to an AnalyserNode and to the AudioContext 57 | destination. 58 |
59 |60 | The visualisation is done in a single draw call of particle-triangles, 61 | with the color from a gradient texture. Positions are updated in CPU, 62 | from the FFT data. 63 |
64 |Credits
65 |66 | Song is 67 | People Without Mouths 70 | by Datassette 71 |
72 |73 | Coded using WebGL with three.js, the 74 | SoundCloud API and Odeo.js 75 |
76 |More details...
19 |Using ShaderTexture to create a diffuse texture (using TruchetFlip's implementation of Wang Tiles) and a roughness texture (using the diffuse texture to modulate some noise), then again using the diffuse texture as a height map to turn it into a normal map (using a shader based on NormalMap Online).
21 |The maps are then used as diffuse, roughness, metalness, bump and normal maps of a THREE.MeshStandardMaterial.
22 |Credits
23 |Tiles shader from TruchetFlip by jt from ShaderToy.
Heightmap to normal shader adapted from NormalMap Online
A flag showing the time
19 |More details...
20 |The flag geometry is animted in CPU using constrained particles and Verlet integration, from the Cloth example.
22 |The texture is drawn in 2D canvas and uploaded to the shader.
23 |There are different changes of wind force every second, every minute and every hour.
24 |Credits
25 |Base on this picture
26 |Coded using WebGL with three.js
27 |An example of building a sphere with dots, making sure there's a uniform density of dots across all the surface. In naive distributions, there's way more points towards the poles than necessary.
19 |The algorithm accepts different point sizes and differents spacing between points.
20 |Toggle camera or press Space
21 |More details...
22 |All points are GL_POINTS, using distance to the center and discard to make the look like dots.
> 24 |There are two buffers, one for vertices and another for colors. Whether there's a dot or not is decided by looking up a mask image loaded in a canvas. The color of the dot is also read from a color texture (earth and clouds), also loaded in their respective canvases. The position of the dot is displaced in the normal direction based on a lookup of a heightmap texture.
25 |All images are equirectngular panoramas so can be mapped into a sphere. UV spherical coordinates from the sphere surface need to be adapted to be lookup 2D coordinates for the equirectangular panoramas.
26 |All geometry is drawn in a single draw call.
27 |Credits
28 |Inspired by this image.
29 |Textures are from NASA's Visible Earth
30 |Coded using WebGL with three.js and isMobile.js
31 |Like those ASCII renderers, but with less characters: just 10.
19 |More details...
20 |A simple scene rendered with lights, shadows and MeshStandardMaterial is rendered to a framebuffer.
22 |That framebuffer is then processed to add some glow, and then a scaled down version is used to feed a shader that will replace every block of 32x32 pixels with a part of a texture that has the numbers 0 to 9, according to the brightness of the block. The number is aditionally shaded by that intensity, so there's more gradients. The texture with numbers has a slight glow preapplied on it.
23 |Credits
24 |Inspired by this animation.
25 |Coded using WebGL with three.js, isMobile.js and Maf.js
26 |Simulating the effect of linocut, or wood engraving.
19 |Drop an image in the page!
20 |More details...
21 |The image is uploaded to a texture, and a fragment shader generates a few curvy lines based on a sinus, and modulates the contrast of those lines with the intensity of the uploaded image, effectively changing the width of the line.
23 |Credits
24 |Inspired by this image.
25 | 26 |Recreatign an animated gif.
19 |More details...
20 |The bands are created as plane geometries, and they're moved in CPU. The rendering is done with MeshStandardMaterial and a few lights.
22 |I added a light from the botom to simulate a secondary bounce.
23 |Credits
24 |Inspired by this animation.
25 |Coded using WebGL with three.js, ImprovedNoise.js and Maf.js
26 |Jaume Sanchez Elias · @thespite
53 | 54 |This are the projects created for Codevember 2016 -a challenge for developers creating a creative sketch by day during the whole month of November.
57 | 58 |Initially I wanted to mix very different browsers technologies: CSS, SVG, WebGL, and not limited to just visual effects. In the end i went with WebGL + three.js, creating a basic boilerplate and starting from scratch every project. Of course as I went, the toolbox grew considerably, with things like ShaderTexture, Odeo and a lot of shaders and helper methods.
59 | 60 |I've tried to make all sites work in as many platforms as possible, but the time constrains don't allow for a lot of beta testing and bug hunting. Wobbly Earth, for instance, doesn't work on my Nexus 5, but works everywhere else I've tried. I have reports that Lines in a Sphere doesn't go well with MacBook Airs. If you find any issue and want to help debug, tweet me.
61 | 62 |So this is all I've been able to churn out, between work, two kids, broken eyeglasses...
Just don't judge the code too strictly :)
Inside info: in all the effects with music (10, 16 and 30) you can open the console and run odeo.playSoundCloud( "whatever_soundcloud_url" ) and you can change the track.
65 |Even more inside info: in all the effects with FBOS, shadows, etc. you can probably open the console and run helper.show(true) to see the FBOHelper.
66 | 67 |Source code for all experiments -and discarded ones- is here: codevember-2016
68 | 69 |A.k.a. "The decadent golden-plated knot torus"
76 |All is full of dots
82 |Strangely attractive strange attractors
88 |A surface shader to make a plane look like glazed porcelain
94 |Oldschool plasma moving particles with motion blur
100 |The day the Earth didn't stand still
106 |Computing Global Illumination (GI) by rendering the scene from every vertex... four times!
112 |Shiny striped metaballs
118 |Hacking image-based lighting (IBL) into a material
124 |Music visualisation to demo an audio manager
130 |Oldschool water with lots of AO
136 |Take a walk on the occluded side
142 |Don't use many triangles when you can use just one!
148 |See time fly
154 |Generative rocks, or minerals, Marie
160 |Music visualisation simulating a phosphor oscilloscope
166 |GPGPU Game of Life with AO and shadows
172 |It's a very small universe
178 |Long tunnel with lots of postprocessing
184 |Lines and streaks moving in the surface of a sphere
190 |Rendering with numbers (very digital!)
196 |Creating an engraving effect with shaders
202 |Weird thing that started as a particle emitter and ended up like Matrix sentinels
208 |Boids and soft shadows and analytical ambient occlusion
214 |More lines and feedback effect
220 |March your ray through a cloud
226 |Random jellyfish-like objects
232 |Rotating greeble, with SSAO
238 |Twisty pieces of sliced floor
244 |A WebGL remake of GMUNK's PYRADICAL
250 |