WebGL/Three.js Pens


Ever since my co-op at Epson studying Augmented Reality, I have been very interested in computer graphics. Here, I show some of my webgl designs or practice designs.

Note: If I used a source for the algorithm, I cited it in the Javascript portion of the code.

My responsibilites includes:


Here is the pattern that I made for my front page.
I used a cellular noise pattern for the background, and then simply created a 5x5 grid for each of the letters. I also added a spotlight effect for extra animation.

See the Pen My Website Front page by Anthony Tu (@antu3199) on CodePen.

Here's a cool mountain range I created just to test procedural terrain generation using perlin noise. Look around using the mouse, left click to go forward, right click to go backwards. Enjoy the beautiful scenery!

See the Pen Mountain Range by Anthony Tu (@antu3199) on CodePen.

Here are a few noise functions that can be useful for pseudo-random generation. Most algorithms can be found here.

See the Pen BoS - Noise by Anthony Tu (@antu3199) on CodePen.

Here's my normal mapping shader:

See the Pen Normal Mapping Shader by Anthony Tu (@antu3199) on CodePen.

Here is a cool environment mapping shader with reflection/refaction using the Frensel Effect. It also has a chomatic dispersion effect (sort of). Source

Back to Main Page