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:…
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.…