Rendering large terrains

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 […]

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 […]

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 […]

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 […]

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 […]

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 […]

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 […]

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 […]

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. […]

Intro to (images in) Go – UI

This post is part of a series. For a listing of all the posts, as well as instructions on running the code, see here. A few posts back, we looked at how to set up a simple HTTP server and also how to communicate with a web page using WebSockets. Today we’ll combine this with […]