My First WebGL 3D Demos Hello, World (of OpenGL)
Simple Gradiated Triangles
Nothing too special here. I think the simple triangle is the Hello, World of 3D graphics.
A Storm of Triangles
This demo was designed to be a quick and dirty way to see how much my browser could handle. The demo just renders a bunch of triangles every frame at random locations. You can rotate the triangles, zoom in and out, add or remove more triangles from the scene. Very little optimizations here, if any at all. Each triangle is drawn from its own call to gl_Draw()
Snow Fall with Fog
This demo is built on the previous demo. The main difference between the two is the vertex shader, which calculates each vertex’s z position relative to the camera, and render it with more of the color representing the fog. Simple stuff.
Similar to the triangle demo, but with more vertices. One other difference is that this example uses a index buffer (GL_ELEMENT_ARRAY_BUFFER).
This is the other Hello, World of 3D graphics. Built on the previous demo also (it even uses the same shaders), the only difference between the two examples is the amount of vertices and how the vertices are animated each frame.
Now the examples are getting better. This code is the exact same as the previous demo (with the animation being very slightly different), but a new shader is used, which loads the Super Mario Brothers texture. One thing that took me a while to figure out is this: in WebGL, texture images must be sized as a power of 2! This is very important to remember. If the image is a single pixel too wide or high, everything will load up fine, but the fragment shader will output black for every fragment. So keep that in mind when loading up your textures!
Super Mario Galaxy
This demo uses the same code as the previous example, but it prints more than one cube. The main difference is the introduction of a camera matrix, which allows you to navigate the scene without having to move any of the objects in it. In one of the previous demos, a similar effect is achieved by changing the actual vertices of every object’s model-view matrix. Not the best way to do things. Who needs that 99 lives trick in Super Mario 64 when you can get ten thousand mystery blocks in outer space!
Loading Mesh File asynchronously (JSON encoded)
Low Resolution Skybox Effect
This demo is my first attempt at the awesome looking skybox effect. Since I was more concerned with getting the effect to work (as opposed to looking beautiful and realistic right away), the texture being used isn’t the best. The size of each face is not quite optimized, plus the edges don’t come together very nicely. Overall, I think the effect looks decent, although it clearly needs work.
Simulated Skeletal Animation (soft body deformation)
While this demo doesn’t actually use a bone system, the concept of transforming some vertices more than others is the goal. I actually have this model nicely animated with a real and complete skeletal structure set up in Blender 2.6. The main issue I’m having with this is being able to understand the way that the exported Collada file (.dae) represents the animation. As I get some more research in on this particular topic, I’ll be updating this demo.
The following are topics I’ll be learning and posting a demo for soon:
- Multiple VBOs (Vertex Buffer Objects)
- Skeletal Animation (bones, joints, skinning)
- Lighting (diffused and specular)
- 3D Soft Deformation
- Cell Shading (Toon Shading)
- Collision Detection
- HTML5 Audio
I will be posting a detailed tutorial for each of the examples above as soon as I get the time. Also, if there is a certain example you’d like to see, feel free to post your request in the comments area.