3

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 cannot trhee.js...). I have no idea on how to proceed (even though I know the theory about NURBS and tessellation more or less). Any hint?

Disclaimer: I'm not asking for a solution. It's against the rules and I want to get it myself. I just need to be pointed on the right direction.

Thanks in advance

magicleon94
  • 4,887
  • 2
  • 24
  • 53
  • Saying you need to draw a NURBS surface with a polygon based rendering API is pretty much saying go to the moon with a car. You can only draw something, that represents NURBS surfaces – Bálint Dec 15 '16 at 18:39

2 Answers2

3

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.

Cobertos
  • 1,953
  • 24
  • 43
2

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!

deblocker
  • 7,629
  • 2
  • 24
  • 59