相关疑难解决方法(0)

我只是想创建一个非常简单的片段着色器,它为网格绘制指定的纹理.我查看了一些自定义片段着色器,它们完成了相同的操作并构建了自己的着色器并支持它周围的JS代码.但是,它只是不起作用.这是我正在尝试运行的代码的工作抽象:

顶点着色器

<script id="vertexShader" type="x-shader/x-vertex">
    varying vec2 vUv;

    void main() {
        vUv = uv;

        gl_Position =   projectionMatrix * 
                        modelViewMatrix * 
                        vec4(position,1.0);
    }
</script>

片段着色器

<script id="fragmentShader" type="x-shader/x-fragment">
    uniform sampler2D texture1;

    varying vec2 vUv;

    void main() {
        gl_FragColor = texture2D(texture1, vUv); // Displays Nothing
        //gl_FragColor = vec4(0.5, 0.2, 1.0, 1.0); // Works; Displays Flat Color
    }
</script>

场景代码

<script>
    // Initialize WebGL Renderer
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    var canvas = document.getElementById('canvas').appendChild(renderer.domElement);

    // Initialize Scenes
    var scene = new …

在Three.js中,是否可以创建一个包含多个纹理的材质(着色器？),每个纹理都有自己的细节,将它们混合在一起并分配给几何体？我想用纸张压花或点UV涂漆等多种涂饰技术来模拟纸张表面.

我想要实现的是具有以下特征的材料:

1. '基层:
   • 纸张颜色(例如白色,灰白色,米色等)
   • 镜面
   • 反射率
   • 凹凸(光滑或纹理纸)
2. '图像'图层(可选):
   • 图像纹理(印在纸上的艺术作品,与'基础'颜色多重混合)
3. '贴膜'层(可选):
   • b/w图像纹理控制图层透明度
   • 颜色(重叠'基础'层)
   • 镜面
   • 反射率
4. '浮雕/ Deboss'图层(可选):
   • 凹凸纹理(提升或降低'基础'凹凸)
5. '清漆'层(可选):
   • b/w图像纹理控制图层透明度
   • 镜面
   • 反射率
   • 凹凸(略微抬起'底座'凹凸)

所有单独图层的原因是我想单独控制它们(替换不同的纹理并在运行时更改值).除了"图像"图层,我不确定应该将其他图层使用哪些混合值来实现逼真的模拟效果.

为了说明适用于纸张的修整技术,请查看以下照片(由PrintHouse Corporation提供):

盲压花(图案)和金箔凹陷(标识,标题)

银箔凹陷(标识)和现货UV清漆(照片)

现货UV清漆(线条)

它可能吗？我找不到任何会使用这种复杂材料的Three.js例子.如果您能指出我或者解释如何以编程方式处理此问题,我将不胜感激.

我试图在一个平面上有多个材料来制作一个简单的地形编辑器.所以我创建了几个材质,并尝试为我的平面中的每个顶点指定一个材质索引:

var materials = [];
materials.push(new THREE.MeshFaceMaterial( { color: 0xff0000 }));
materials.push(new THREE.MeshFaceMaterial( { color: 0x00ff00 }));
materials.push(new THREE.MeshFaceMaterial( { color: 0x0000ff }));
// Plane
var planegeo = new THREE.PlaneGeometry( 500, 500, 10, 10 );
planegeo.materials = materials;
for(var i = 0; i <  planegeo.faces.length; i++)
{
    planegeo.faces[i].materialIndex = (i%3);
}

planegeo.dynamic = true;
this.plane = THREE.SceneUtils.createMultiMaterialObject(planegeo, materials);

但是如果我使用MeshBasicMaterial而不是FaceMaterial,我总是在着色器中得到一大堆错误,或者只得到一个全红色的平面.任何帮助都是伟大的thx!

所以我正在尝试建立一个由瓷砖组成的基于3D的世界.

我已经成功地使用平面几何和高度值等设法做到了这一点.但是现在我已经到了可能需要改变一切的地步.

问题是我想要一个瓷砖有多个纹理(使用着色器因为我想要混合它们).我能够全局地做到这一点(因此每个图块将具有相同的纹理+使用一些uv映射).

但是我无法理解我将如何指定哪个图块具有哪些纹理(并且我有大约100个纹理),因为平面几何图形只有1个着色器材质.而且我也不确定通过着色器发送100个纹理是否是一个好主意？

所以我的问题基本归结为:

有没有一种体面/高效的方式将平铺/顶点链接到纹理,所以我可以保持平面几何.

- 如果是的话:怎么样？

- 如果不是:我应该单独创建每个图块(因此是1x1的平面)并将它们合并在一起(性能/顶点混合？)因此它充当单个平面(在这种情况下,合并平面由许多1x1平面组成)和每块瓷砖使用着色器(1x1平面)？

这些事情一般如何完成？

编辑:

一些额外的信息,因为似乎我的问题不是很清楚:

我想要的是一个瓷砖(2个面)有多个"materialIndexes"来表示.目前我需要有1个图块才能有3个纹理,所以我可以使用特定算法将它们混合在着色器中.

例如,我想要一个心形(红色的心/黑色背景)作为纹理,而不是基于我想要混合/更改其他2个纹理的颜色,所以我可以得到例如木心和蓝色背景.或者例如,我应该能够在正方形上均匀地混合4个纹理,每个纹理占正方形的1/4.但这里的重点不是纹理必须做什么,而是我如何为我的面孔/瓷砖指定这样的3,4或更多纹理.

我希望在Aframe中有类似于这个问题的效果,在单个模型上具有分层可交换纹理:

我想知道是否有一个我在Threejs中遗漏的标准流程,以便我可以继续使用标准着色器 ; 或者我是否必须将它分叉并在自定义着色器中添加多纹理功能？

谢谢!