in webgl-threejs

NeHe Lesson 11 – A Parametric Surface

A Waving Texture as Parametric Surface

A Parametric Surface with Texture


This post is  little more interesting than some of the earlier posts as it took me a couple of  tries to get it right. Initially, I patterned the code after the original NeHe implementation. I knew that would suffer from poor performance, which it did. I then realized the solution was to build a single vertex buffer object (VBO) in JavaScript and pass that to the GPU.  The VBO was created by three.js using a parametric surface mesh.

Initial Go

The first try simply replicated the original NeHe C++ code directly by building a grid in JavaScript and then updating all of those vertices  in JS and passing that mesh to the GPU.  This was of course thrashing the memory and choking the memory pathway to the GPU.

Using the Vertex Buffer and a Parametric Surface

Instead the solution was create a parametric surface by allocating a THREE.ParametricMesh.  The constructor takes a small callback (in JS) which returns a 3-element vector, which three.js uses to create the surface.  Those vectors are not used as-is, but are used to fill out a  VBO which is then passed to the GPU.  However, the JavaScript Mesh object has member variable (a uniform) that points to the VBO via a shader interface.  One can then update the vertices via that member variable. This updates the vertices in the VBO, which is all done on the GPU so it is very efficient.

Shader Implementation?

I looked at a shader-side implementation but, at least in WebGL this doesn’t seem possible.  It may be possible to in GL-4 to access adjacent vertex coordinates, but not in WebGL.  But the solution as-is works well.

You can find the lesson at Geo-F/X here. As always, the sources are on github here. Feel free to contact me at or comment on this article directly.

Write a Comment