Immersive presentations with WebGL
While preparing for a talk I gave at Reject.js 2014, I decided that I wanted to embed my WebGL demos directly into the presentation itself, to give a more fluid and interesting talk.
If you take a quick look at the title slide, you’ll be able to see the result, full-screen 3D content running in a presentation, accessible to anyone with a WebGL-enabled browser. You can advance using the arrow keys.…
Rendering large terrains in WebGL
Today we’ll look at how to efficiently render a large terrain in 3D. We’ll be using WebGL to do this, but the techniques can be applied pretty much anywhere.
We’ll concentrate on the vertex shader, that is, how best to use the position the vertices of our terrain mesh, so that it looks good up close as well as far away.
To see how this end result looks, check out the live demo.…
Working better with GLSL source files
This post is a follow-on from a previous post, where I detailed the workflow I had developed for working with GLSL files, as part of developing 3D content for the web. Since then, I have refined my approach so I’m posting an update.
At a high level, my approach is as follows:
Automatically validating GLSL files
In a previous post I detailed how I work with GLSL files, specifically loading them into the app itself in an convenient way.
One notable missing feature was automatically validating the shaders before they are used the browser.
This post will detail how you can do this directly from your editor, to help you spot stupid mistakes while editing, rather than only alerts when testing in the browser.…
Creating a geospatial database on Amazon RDS
Last year, Amazon added Postgres support to their cloud relational database offering, RDS. The good folks at Amazon were kind enough to include support for some popular extensions, in particular PostGIS, which adds geospatial abilities to Postgres, so queries like “find me 100 users nearest to London” are simple and efficient to perform.
In this post I’ll go through setting up an RDS instance with Postgres + PostGIS, and importing some sample data to show that it all works.…
WebGL tombstone - bump mapping
This post is part of a series on how to deform a 3D mesh (in this case, a tombstone) by drawing onto a 2D Canvas. To start from the beginning, click here.
In the previous post we looked at how to calculate the lighting for our tombstone in the fragment shader. While a vast improvement over a model with no lighting, the tombstone looked “faceted”, that is, it was apparent that it was made of a finite set of faces.…
WebGL tombstone - lighting model
In the previous post we looked at how to deform a 3D mesh by using a depth map drawn onto a 2D canvas. In particular, we’d draw a pattern onto a canvas and have that pattern “carved” out of a slab of rock. There’s a live demo here, if you haven’t seen it already.
Last time, our model didn’t quite look right, while it was possible to perceive the depth of the carving, the depth didn’t look natural.…
WebGL tombstone - part 2
In the previous post we looked at how to link up a 2D HTML canvas with an object in a 3D scene, so that when we drew on the canvas, the drawing would appear on the surface of an object in the 3D world.
Specifically, we were painting onto a tombstone. Today, we’ll look at how to write our own WebGL shaders to do something a little more interesting: carving out the rock, based on what is drawn on the canvas.…
WebGL working with GLSL source files
This post is going to cover the workflow I have adopted, to make development faster and more enjoyable. The context here is a THREE.js app that uses Require.js to structure the code. You can see a simple example of such an app here.…
WebGL tombstone - part 1
Recently, I’ve been combining 2D Canvas objects with WebGL Canvas objects, and figured it would be nice to put together a demo with some of the techniques used.
An obvious application for these techniques is an in-browser tombstone designer, that’ll let us take a nice slab of rock and draw and carve all over it. Beats me why this hasn’t been done before.
Today we’re going to look at setting up a 2D Canvas with some basic drawing capabilities, and linking it to a 3D scene.…