Posts Tagged: Webgl

WebGL Stats Version 2

Feb. 04, 2014

I have gotten around to update WebGL Stats, which is a rewrite from scratch with a whole lot of new features, so give it a spin.

How to write portable WebGL

Feb. 22, 2013

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

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.

High Performance JS heatmaps

Feb. 04, 2013

You might have encountered heatmaps for data visualization before. There is a fabulous library, heatmap.js, which brings that capability to draw them to javascript. There is only one problem, it is not exactly fast. Sometimes that doesn't matter. But if you have hundreds of thousands of data points to plot, or need realtime performance, it gets tricky. To solve that I've written a little engine using WebGL for drawing heatmaps.

Why you should use WebGL

Feb. 02, 2013

There is (among graphics enthusiasts) a lot of debate what API/version of something to use with a bunch of hotly contested alternatives. I would like to convince you to give WebGL a try, and this blog post explains why. It will also quickly summarize a few things people usually ask about WebGL. There are many gotchas (like with anything) as well, and I am aware of a lot more of them than you can imagine. I will perhaps talk about them in another blog post.

WebGL Deferred Irradiance Volumes

Aug. 25, 2012

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

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

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

WebGL Extensioneer - Easier WebGL Extensions

Jul. 31, 2012

Handling WebGL extensions is a big of a headache becuse of vendor prefixes, which the Khronos WebGL working group choose to conflate with the meaning of experimental (draft) extensions. In order to solve this problem I've written a small library to get rid of the need to use vendor extension names, yet be able to specify if you want draft extensions as well.

WebGL Statistics and the state of WebGL/HTML5

Apr. 25, 2012

In two previous posts I examined capabilities of WebGL and the challenges for WebGL/HTML5 as a game app platform. It has been 8 months since the last writeup, and a lot has happend. Browsers have introduced new capabilities and I have written a site to collect WebGL statistics. The following post will look at what's changed, and what conclusions we can draw from the statistics.

RequireJS for WebGL and Coffeescript

Feb. 19, 2012

I have been writing a bunch of WebGL code over the last year, and I got a bit into Coffeescript. What has always bothered me is how messy it is to create structured applications. A major part of that is that JS has no module system. The following post presents a way to deal with the issue.

WebGL GPU Landscaping and Erosion

Nov. 10, 2011

A while ago I finished playing From Dust which I enjoyed a lot. What impressed me about that game was the application of landscape changes by erosion. One drawback of the tool Lithosphere I wrote earlier is that it can't do any form of hydraulic erosion. I decided to write a test in WebGL to see if a few simple algorithms could be used to shape a landscape according to hydraulic erosion.

WebGL Screenspace Ambient Occlusion

Oct. 25, 2011

The grass demo I did earlier used some Screenspace Ambient Occlusion. I thought it was a cool effect, and decided to research the topic futher. Scren-Space Ambient Occlusion is an incorrect aproximation to true ambient occlusion, and it has a couple problems, but it can be a useful technique.

WebGL and HTML5 Challenges For The Future

Sep. 11, 2011

In the book Game Engine Gems 2: Chapter 13 author Rémi Arnaud examines different browser based 3d rendering techniques. According to Rémi, many 3D web rendering technologies failed because they could not get game developers on board. An example is VRML, which was pronounced dead on arrival by John Carmack.

Advanced WebGL - Part 3: Irradiance Environment Map

Apr. 18, 2011

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.

WebGL Capabilities Analyzed

Apr. 16, 2011

I was interested in how many people have support for WebGL and what features they do support. My Demos reported issues to me as well as hardware capabilities. This gives me a good way to analyze what I'm doing right or wrong.

Advanced WebGL - Part 2: Sky Rendering

Apr. 13, 2011

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

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.