Rendering NURBS surface in webGL

Question

I need some help with rendering a NURBS surface in webGL. Some days ago our professor assigned us to draw with NURBS a flag and to animate it. We have to use webGL (and cann

Answer 1

I would suggest you to start with following two lectures:

Drawing Bézier Curves

Drawing Lines is Hard

and finally, use this WebGL example as starting point for your assignement:

Resolution independent rendering of Bezier curves in WebGL

Good luck and happy coding! If you achieve something good, please let us know!

Answer 2

Just because you can't use three.js doesn't mean you can't look at it to figure out how it works! This example renders NURBS and you can view the source code. (Hint: It uses THREE.NURBSSurface, THREE.NURBSUtils, etc... which is then plugged into a ParametricBufferGeometry)

As for the WebGL part, if you're familiar with OpenGL, it's a lot of the same stuff just cut back a bit on features. You need to make a canvas with a context WebGL, generate all your data on the CPU (definitions of the surface, tessellation, etc), and then pass all the vertex and index data to the GPU rendering it all with a shader.