Collections

Some demo's packed together as a collection.

1. Ray Intersection How to handle Ray intersections on various 2d/3d shapes.
2. Inverse Kinematric Solvers Various 3D IK solvers that I put together.
3. Texture Noise Use UI to play with various noise functions.

Drawing App Prototypes

One of my life goals is to create a really fun sketching app. These are just me dipping my toes into that sort of development.

1. 3D Model Painter This is a bare bones prototype of how to paint on a 3D model while also being able to draw on a 2D Texture. Probably a starting point for someone to make a web based substance painter app.
2. WebGL Painter An example of how to use WebGL to create a drawing canvas from scratch.
3. Svg Paper Prototyping a white board app using svg as the renderer while using curve fitting to smooth out the lines drawn.

3D Fungi Prototypes

Fungi is a 3D / Game engine built from sratch using Javascript(ES6) and WebGL 2. I tend to do most of my 3D prototypes using fungi since its built around the purpose of rapid prototyping.

1. Trilinear Interpolation 8 Point transformation lattice for manipulating meshes.
2. Marching Cubes : Animated Process Demonstrating the algorithm scanning grid and generating a mesh based on perlin 3d.
3. Spring Physics Applying springs to specific bones to procedurally animation parts of a character.
4. IK Rigs Recompute animation data to work with various models using inverse kinematics.
5. ProtoForms v1.0 Procedurally generate 3D Characters that can be animated and used for prototyping.
6. ProtoForms v2.0 Procedurally generate 3D Characters that can be animated and used for prototyping.
7. Spring Terrain Using spring physics to move points to generate textures as you use keyboard to move around perlin noise.
8. Gerstner Waves Algorithm that simulates ocean waves.
9. Various IK Solvers Created a few single pass solvers to replicate the IK motion from a ubisoft GDC talk.
10. Pivot Transform How to use a pivot point and a quaternion to transform a mesh in a shader.
11. Globe Points (A) Spacing points on a sphere and using a Texture map to highlight points.
12. Globe Points (B) Another example but using fibonacci to define points on sphere.
13. Animation Cubic Interpolation Inspired by Overgrowth's GDC talk on using 2 poses and cubic interpolation to generate animation cycles.
14. Space Ship Controller Just woke up one day and just wanted to try to make a space ship fly around.
15. Hand Controller Quick example of how to control fingers on a rigged hand.
16. Capsule Morphing Demonstrating how to great vertex groups, then using various ways with positioning, scaling and bezier curves to change the shape of a capsule into something else with the use of a GLSL Shader.
17. Cube with Rounded Edges Example of how to make rounded cubes, with the right setting it becomes a sphereified cube.
18. Phong Lighting with Textures Example of how to handle maps for Albedo, Normal, Metal/Roughness, Emission, Ambient Occlusion and Equirectangular Enviroment Reflection
19. Axis Aligned Lattice Deformer CPU Based on the Lattice created for unity3d by Barnaby Smith. Only difference is the math was redone in world space for my prototype.
20. Axis Aligned Lattice Deformer GPU This is port of the previous example which ran on the cpu, but this one runs on the gpu through GLSL.
21. Atmospheric Scattering Skybox Port of Felix Westin (@FewesW)'s Unity Example of Atmospheric Scattering.
22. Octasphere A special type of sphere.
23. Marching Cubes Editor During the progress of a project, I needed to be able to handle users selecting areas of a dual grid then procedurally generate meshes based on what the user selected. This was made as a proof of concept.
24. SDF Font Atlas Example of how to parse Font data and render text using instancing in World and Screen Space.
25. QuadTree example using quadree to render LOD based on Position or Range. Also manages resources in Object Pools.
26. Frustum Culling QuadTree extra example wtih rendering a frustum while culling quadtree tiles that are within view.

SDF / Ray Marching Prototypes

A collection of SDF related examples using fungi to handle the rendering.

1. Animated Gear Sphere Following a tutorial by Inigo Quilez but using a volume for rendering.
2. SDF Shapes Different SDF Shapes transitions in Quad rendering with custom made SDF Camera.
3. Imposter Shphere Uisng a Billboard Quad and Ray-Sphere Intersection, you can fake a lit textured sphere.
4. Monster Character My take on Inigo Quilez's monster in Happy Jumping Tutorial.
5. Happy Jumping World Using a sdf camera to walk around a world created following Inigo Quilez's tutorial.
6. Bone Chain created a mini example of how to create bone transforms and used sdf to render the bone's transform
7. 2D SDF Faces using SDF to design multiple eyes or mouths to display on a robot face.

Three.js Prototypes

When doing professional work, I opt to use three.js instead of fungi.

1. Wave Function Collapse Using 3D model tiles, the algorthm will connect them together to procedurally generate a road system.
2. Hexagon Map Procedurally generate a Hexagon Map while using Cubic Noise to compute the height of each column.
3. Hexagon Map CPU CPU Bound version which also places assets randomly on the hex board.
4. Voxel Geodesic Autoskinning (CPU) Recreating autoskinning process described from a white paper.

3D Shader Prototypes

Using fungi, i sometimes try to spend some time learning GLSL to create shaders, plus how to render 3D Objects.

1. Phong Lighting Basic lighting : Ambient, Diffuse and Specular.
2. Toon Lighting Render things to be more cartoon like.
3. Toon Metal ported a unity toon shader to that webgl/glsl, originally by minionsart.
4. Parallax Glitter porting a unity shader to webgl/glsl rendering textures with parallax.
5. EyeBall porting a unity shader to webgl/glsl, originally by minionsart.
6. Halftones exeriment on learning how to generate halftones on a mesh.
7. Dithering a different way to do shading with pixel pattern that change by depth.
8. SDF Texture Halftones a sample of how to use SDF textures to do halftone shading.
9. Voronoi Edge Texture Node ported blender's shader node into something usable in webgl.
10. Voronoi F1 & Noise Texture Nodes porting blender's shader nodes into something usable in webgl.
11. Toon Halftones A custom toon shader that uses a code based color ramp, specular light and direction rim shadows while using halftones has a way to transition between colors.
12. Kenny Direction Tint Fun shader that applies lighting based on axis direction.
13. Pixel Font Rendering pixel based font in a shader, no textures.
14. Multiple Lights Example of rendering multiple lights. The main draw is using JS ArrayBuffers to store and send data to UBO.
15. Komikaze Aqua Porting over a blender material into GLSL / WebGL.
16. Sky Dome fixed up an old example from an article. Lots of customization, easy to make day and night cycles with Sun/Moon.

3D Terrains

One of the things I'd like to learn is to procedurally generate terrains, water and planets.

1. Terrain Cube using fbm noise with user defined settings.

2D Prototypes

Various experiments using just Javascript, CSS and HTML Canvas. Some are preludes to making more complicated 3D prototypes.

1. Spring Movement Using spring physics as a movement driver.
2. Irregular Hex Grid Recreation of Oskar's Irregular Grid.
3. Marching Squares : Animated Process An animated sample of how the algorithm works.
4. Marching Squares : Traverse Noise Using the keyboard to move around 2D noise as it gets rendered my MS algorithm.
5. Keyframe Curve Movement Trying to animate movement on a hermite curve with key frames.
6. Moving Timeline Experimenting with how to draw a numbered grid as it scrolls.
7. Keyframe Events Want to have events trigger during a key frame animation.
8. Alchemy Symbol Generator Recreating procedurally generate symbols originally in php.
9. Wave Function Collapse Basic sample of the algorithm using text as tiles.
10. Quad Tree Generate random points and place them it in a quad tree, then visualize grid.
11. Bezier Splines Curve tool with real time animation while editing the spline.
12. 1$ Recognizer Playing with the $1 2D shape / gesture recognizer.
13. Trig Functions Visualize trig functions like: sin, cos, tan
14. Lemniscate Bernoulli Animation on this specific curve
15. Watts Curve Animation on this specific curve

UI Web Components

I enjoy putting together UI components from scratch using Javascript, CSS and HTML. I sometimes need a way to control prototypes.

1. Property Panel A slide out panel with editable rows of other ui components.
2. Timeline Animation Timeline rendered with HTML canvas for controlling and viewing animation time.
3. GChat Modal Many years ago I made a webbased chat tool for work, i recreated gchat web interface for it.
4. Range Input Created two version of a custom web ui component, one renders with canvas and the other with svg.

Misc

Just Random extra stuff.

1. Animation Curve Editor Tool I thought about making so I can generate animation curves.
2. Node Editor Web Based example of nodes that can be tied together.
3. Noise Generator Visual tool to see what noise looks like when merged together.
4. Shader Blocks My attempt at a webbased shader forge like tool.
5. Puggle A webbased recreation of a mini game called Puggle.