Dec 10, 2020
Build New Zealand in an afternoon —
This post is a walk-through of how to create an interactive 3D map of anywhere in the world. We will focus on New Zealand, but the same approach could be applied to anywhere.
When we’re done we’ll have simple app that lets us explore the beautiful national parks of New Zealand. You don’t need any knowledge of 3D rendering, just a basic understanding of how to build a website.
The plan We will be needing several components to build this:…
Sep 22, 2014
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.…
Mar 13, 2014
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.…
Feb 22, 2014
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:
Store shaders as separate files, with common code imported using #include statements. Use a custom Require.js plugin to inject these shaders into my JavaScript when I need them.…
Jan 22, 2014
Automatically validating GLSL files —
If you are doing anything THREE.js/WebGL related, sooner or later you are going to start spending a significant amount of your time working in GLSL, rather than in JavaScript.
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.…
Jan 9, 2014
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.…
Jan 6, 2014
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.…
Dec 30, 2013
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.…
Dec 27, 2013
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.…
Dec 16, 2013
WebGL working with GLSL source files —
If you are doing anything THREE.js/WebGL related, sooner or later you are going to start spending a significant amount of your time working in GLSL, rather than in JavaScript.
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.…