Posts Tagged: Howto

How to write portable WebGL

Feb. 22, 2013
comments

When programming WebGL you need to be careful to make it portable. The following post will explain how to make WebGL portable across many devices, what to look out for and techniques to work around the limitations you face.

Soft Shadow Mapping

Feb. 15, 2013
comments

Shadow mapping is one of those things that a lot of people struggle with. It is also a very old shadowing technique that has been improved in a variety of ways. I'd like to make a brief trip trough the history of shadow mapping hopefully shedding some light on the topic and introduce you to some very nice techniques.

WebGL Deferred Irradiance Volumes

Aug. 25, 2012
comments

The problem of lighting 3D scenes in hardware accelerated rasterized rendering is really hard to solve. There are no 100% solutions, and what seems perfectly obvious to the uninitiated (light just bounces around) is extremely hard to do in practise. The following blog post is about one such method that I wanted to try out for a long time.

WebGL rendering of solid trails

Aug. 05, 2012
comments

If you need to render trails you can use particles. These give nice puffy effect. At other times you'd like to have a more well defined line (like say for missile trails). The following post shows one technique render trails with a single triangle strip optimized not to use too many triangles and does not lead to the puffy look of particles.

Easy wireframe display with barycentric coordinates

Aug. 02, 2012
comments

Sometimes it's required to display a wireframe of your model. The following post looks into how to do that in a flexible way.

Advanced WebGL - Part 3: Irradiance Environment Map

Apr. 18, 2011
comments

In part 2 of this series I explained about how to get the sky. This entry is about how to compute an irradiance environment map from this cubemap.

Advanced WebGL - Part 2: Sky Rendering

Apr. 13, 2011
comments

In Part 1 of this howto, I introduced my demo. In this part I'm going to talk about how to make the sky. The demo also computes an irradiance map and applies it to the cube. I'm going to talk about this in Part 3.

Advanced WebGL - Part 1

Apr. 11, 2011
comments

WebGL is now enabled by default in both Firefox 4.0 and Chrome 10.0, so I thought I give it a try and see what I can get out of it. The goal was to render some simple terrain, nice looking sky and waving grass. In this part of the description I will give the overview of how that works.

Minecraft Like Rendering Experiments in OpenGL 4

Dec. 09, 2010
comments

Since all the excitement about Minecraft I wondered what nice rendering effects could be done in such a restricted environment. I have decided to pursue that avenue of research and a variety of techniques will be presented in the following article.

Verlet collision with impulse preservation

Nov. 29, 2010
comments

This article presents a system to integrate verlet physics collision with preservation of impulse. Normally verlet physics annihilates a lot of energy from a system, which makes it very stable but also quite unrealistic. Additionally simple methods of preserving impulse yield very unstable systems, a limitation which can be overcome by two steps of integration, one for at-rest acceleration canceling, and one with impulse preservation.

OpenGL 4 Tessellation

Nov. 07, 2010
comments

I bought a new graphics card which is OpenGL 4.1 compatible. And since tessellation is hot, this article explains how to use tessellation to LOD large terrains easily.

Hard Constraints, Easy Solutions

Sep. 01, 2010
comments

In the previous post about integration methods, I took a look at gravity integration. Gravity is a good example of a soft constraint. It does not impose hard limits to movement of bodies. But what if we need hard constraints, for instance like steel beams? The following post explains how to implement hard constraints.

Integration by Example - Euler vs Verlet vs Runge-Kutta

Aug. 28, 2010
comments

In this post I'm testing different integration methods for a gravity simulation. The results can be inspected interactively in the canvas tags that accompany each test. Hover with the mouse over the illustration to start its simulation or click the illustration to reset the simulation.

Geo programming with python and javascript

Aug. 27, 2010
comments

As mentioned in a previous post, I built a widget using Google maps that tracks a friends journey using GPS logs. This post is about how to build such a widget.

html5 canvas and the flying dots

Aug. 22, 2010
comments

The header of this page features a couple flying dots in the Grey strip. They are drawn using a html5 feature called "canvas". Canvas is pretty cool, it makes a lot of things possible for which you had to use flash previously. This post is about how this works including lots of code and math.