如何告诉frag-shader在外部生成的3D文件的每个顶点使用哪个纹理(在许多先前加载的纹理中)? [英] How do I tell frag-shader which texture (of many previously loaded textures) to use per vertex of an external generated 3D file?

问题描述

我正在尝试找到将纹理3D模型加载到我的webGL应用程序中的最佳方法，但是我遇到了一些麻烦.我的3D模型具有多个纹理，我不知道如何告诉着色器每个顶点要使用哪个纹理，因为到目前为止我似乎没有将此信息包含在3D文件中. 我举一个例子:我在Blender中建模了一个带有皮革座椅/靠垫的木椅.我应该导出哪种格式的椅子以使其更容易，更高效地提取出来: -顶点位置； -定义哪个顶点属于每个面的面/索引信息. -紫外线坐标； -法线 -纹理文件的名称/位置. -每个顶点使用哪种纹理.

I'm trying to figure out the best way to load a textured 3D model into my webGL application but I'm having some trouble with it. My 3D models have more than 1 texture and I don't know how to tell the shader which texture to use per vertex as this info doesn't seem to be included into the 3D files I looked into so far. I'll give an example: I have modeled a wooden chair with a leather seat/cushion in Blender. Which format should I export the chair to make it easy and efficient to extract: - the vertice positions; - the faces/index info defining which vertex belongs to each face. - the UV coords; - the normals - the texture files name/location. - which texture to use per vertex.

我假设一旦我的JS中有vertex-textureID对，就可以将其作为属性(基于每个顶点)传递给着色器，让它知道用于该特定顶点的纹理(使用drawElements绘制它)一次)，但我不知道该如何开始使用该信息.

I assume that once I have the vertex-textureID pair in my JS, I could pass it to the shader as attribute (per-vertex based) letting it know which texture to use for that specific vertex (using drawElements to draw it all at once) but I don't know how to get my hands on that info to begin with.

到目前为止，我在网上找到的所有文章，howtos和教程都仅加载具有1个纹理的模型.我还注意到three.js似乎已经解决了这个问题，但是我有点想让它直接在webGL上运行，然后再移入其中一个库(例如three.js，glge，scenic.sj，spiderGL等).

All the articles, howtos and tutorials I found on the web so far load models with 1 texture only. I also noticed that three.js seems to have solved this problem already but I kind of wanted to get it working directly on webGL before moving into one of these libraries (such as three.js, glge, scene.sj, spiderGL, etc).

任何帮助，链接或建议，将不胜感激.

Any help, links or suggestions will be most appreciated.

推荐答案

听起来像这里有两个问题，其中一个我们可以提供帮助，另一个需要更多信息.

Sounds like you've got two problems here, one of which we can help with and one which requires more information.

有一次，大多数情况下，您不会按顶点列出纹理信息，因为按面列出它是更自然的.您仍然必须将其传递给每个顶点的着色器，因此您可能需要进行一些预处理，但这并不算太糟.如何从文件中获取信息完全取决于您使用的格式，但是尚未指定.

For one, most of the time you won't have texture information listed per-vertex, as it's more natural to list it per-face. You'll still have to pass it to a shader per-vertex, so there's likely to be a little bit of pre-processing on your part, but it shouldn't be too bad. How you get that information out of your file entirely depends on the format you are using for it, however, which you haven't specified.

关于用文件渲染多个纹理，有两种处理方法.您可以将所需的所有纹理绑定到着色器中的采样器数组，然后使用先前暗示的vertex属性对其进行索引.这是减少绘制调用次数的好方法，但是这是一个极端的优化，我怀疑您会从中受益匪浅.

As for rendering multiple textures with a file, there's a couple of ways of going about it. You can bind all the textures you need to a sampler array in the shader and then index it with a vertex attribute, which you were hinting at earlier. That's a good way to cut down on the number of draw calls, but it's a bit of an extreme optimization and I doubt that you'll benefit much from it.

一种更常见的做法是对每种材质(在您的情况下为材质==纹理)进行一次绘制调用.因此，如果您有如前所述的带有木制框架和皮革座垫的椅子，则可以绑定木质纹理，渲染整个框架，然后绑定座垫纹理并分别渲染垫子.这使您有机会进一步针对每种材料类型使用不同的着色器，因此您可以提高皮革零件的镜面反射率，同时使木材保持柔和哑光.每个对象执行多个绘制调用听起来很昂贵，但是在大多数情况下，除非您要处理一些非常复杂的场景，否则这并不是一个大问题.

A more common practice is to do a single draw call for each material (material == texture in your case). So if you have a chair with a wooden frame and a leather seat cushion as you described you would bind the wood texture, render the entire frame, then bind the seat cushion texture and render the cushion separately. This give you the opportunity further down the line to use different shaders for each material type as well, so you could crank up the specularity on the leather parts while leaving the wood nice and matte. It may sound expensive to do several draw calls per-object, but in most cases it's not a big problem unless you are dealing with some really complex scenes.

这篇关于如何告诉frag-shader在外部生成的3D文件的每个顶点使用哪个纹理(在许多先前加载的纹理中)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！