Three.js将客户着色器材质转换为Lambert材质

我目前正在使用一个单元着色脚本对我正在使用的模型上的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>

好吧，我想我明白你在追求什么了，我想你可能有点困惑。

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

看看剧本是怎么做的，不长：http://www.neocomputer.org/projects/donut/three_lambertoon_c.js

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

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

不过，在这种情况下，您可能可以将卡通着色器中的这些线直接粘贴到您自己的片段着色器的底部，而且它可能只是起作用。

相关内容

最新更新

热门标签：