Question

我目前正在使用单元格着色脚本来遮蔽我正在使用的模型上的Lambert材质。我也有一个自定义着色器材料，我也想使用相同的脚本，但事实证明这说起来容易做起来难。我想知道是否有办法将自定义材料更改为Lambert材质。我做了一些寻找，似乎找不到任何东西。任何帮助将非常感激。这是我的代码到目前为止，three_lamberton脚本是我正在使用的脚本，它适用于我正在应用图像的对象。顶部的脚本是我用于分层图像和设置自定义着色器材质的脚本。忽略这样一个事实，即一些图像不止一次被加载到材料中，我现在只是作为占位符。我希望能够将three_lamberton脚本应用于名为material_shh的着色器材质

<!DOCTYPE html>
<html>
<head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Web GL test 2</title>
</head>

<body style="overflow: hidden; background: black;">
    <div id="container">


</div>
    <script src="three.min.js"></script>
    <script src="OBJLoader.js"></script>
    <script src="three_lambertoon_c.js"></script>


    <script id="fragment_shh" type="x-shader/x-fragment">
        #ifdef GL_ES
        precision highp float;
        #endif

        uniform sampler2D tOne;
        uniform sampler2D tSec;
        uniform sampler2D tThree;
        uniform sampler2D tFour;
        uniform sampler2D tFive;
        uniform sampler2D tSix;

    varying vec2 vUv;

    void main(void)
    {
        vec3 c;
        vec4 Ca = texture2D(tOne, vUv);
        vec4 Cb = texture2D(tSec, vUv);
        vec4 Cc = texture2D(tThree, vUv);
        vec4 Cd = texture2D(tFour, vUv);
        vec4 Ce = texture2D(tFive, vUv);
        vec4 Cf = texture2D(tSix, vUv);
        c = Ca.rgb * Ca.a + Cb.rgb * Cb.a + Cc.rgb * Cc.a + Cd.rgb * Cd.a 
            + Ce.rgb * Ce.a + Cf.rgb * Cf.a * (1.0 - Ca.a - Cb.a - Cc.a - Cd.a - Ce.a);
    gl_FragColor= vec4(c, 1.0);

    }

</script>

<script id="vertex_shh" type="x-shader/x-vertex">

    varying vec2 vUv;

    void main()
    {
        vUv = uv;
        vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
        gl_Position = projectionMatrix * mvPosition;
    }

</script>

Answer 1

好的，我想我知道你在追求什么，我觉得你可能有点困惑。

材质一次只能有一个顶点着色器和一个片段着色器。 Three.js提供了一些默认着色器，如Lambert，它们以lambert着色渲染。 labertoon.js脚本似乎入侵了Three.js提供的Lambert着色器并永久改变它，这意味着任何Lambert材料都会使用这个被黑客攻击的版本。这是一种难看的方式。

查看脚本自己做了什么，时间不长：http://www.neocomputer.org/projects/donut/three_lambertoon_c.js

事实上合并着色器很棘手。着色器具有单个入口点main()，然后是非常特定的操作序列。这些操作的顺序非常重要，就像数学问题中的操作顺序一样。所以解决方案是编写一个可以完成这两件事的新着色器。

从该JS文件中拉出着色器代码行，然后将它们添加到您自己的自定义着色器中。然后完全停止使用lambertoon js文件。

但是，在这种情况下，您可以将这些来自香椿着色器的线条直接粘贴到您自己的片段着色器的底部，它可能正常工作。

Three.js将客户ShaderMaterial转换为Lambert材料

1 个答案: