在 webGL 中渲染 NURBS 曲面 [英] Rendering NURBS surface in webGL

问题描述

我需要一些帮助来在 webGL 中渲染 NURBS 曲面.几天前，我们的教授指派我们用 NURBS 绘制一面旗帜并为其制作动画.我们必须使用 webGL(不能使用 trhee.js...).我不知道如何进行(即使我或多或少知道有关 NURBS 和曲面细分的理论).有什么提示吗?

免责声明:我不是在寻求解决方案.这是违反规则的，我想自己拿到.我只需要指出正确的方向.

提前致谢

解决方案

仅仅因为你不能使用three.js并不意味着你不能看它来弄清楚它是如何产生的作品！此示例渲染 NURBS，您可以查看源代码.(提示:它使用 THREE.NURBSSNURBS, THREE.NURBSSNURBS, THREE.... 然后插入 ParametricBufferGeometry)

至于 WebGL 部分，如果您熟悉 OpenGL，那么很多相同的东西只是减少了一些功能.您需要使用上下文 WebGL 制作画布，在 CPU 上生成所有数据(表面定义、细分等)，然后将所有顶点和索引数据传递给 GPU，使用着色器将其全部渲染.

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

解决方案

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.

这篇关于在 webGL 中渲染 NURBS 曲面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！