0

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

<!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>
4

1 回答 1

1

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

一个材质一次只能有一个顶点着色器和一个片段着色器。Three.js 提供了一些默认着色器，例如Lambert在 Lambert 着色中渲染事物。该labertoon.js脚本似乎侵入了 Three.js 提供的 Lambert 着色器并永久更改它，这意味着任何 Lambert 材质都将使用这个被破解的版本。这是一个丑陋的方式来做到这一点。

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

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

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

不过，在这种情况下，您也许可以将卡通着色器中的这些线条直接粘贴到您自己的片段着色器的底部，这样就可以正常工作了。

于 2013-08-01T00:22:41.173 回答