【问题标题】:Three.js Convert Customer ShaderMaterial to Lambert MaterialThree.js 将客户 ShaderMaterial 转换为 Lambert 材质
【发布时间】:2013-08-01 08:22:41
【问题描述】:

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

【问题讨论】:

  • 您现在如何设置对象的材质?究竟想如何将你所拥有的东西转换成别的东西?到目前为止你尝试了什么,你在哪里卡住了?在回答这个问题之前,您需要用一些小代码示例更清楚地解释。
  • 已更新,感谢您对我的问题感兴趣,如果还有什么我可以澄清的,请告诉我
  • 我尝试推荐 small 代码示例!浏览所有这些是相当令人生畏的......
  • 缩小了它,这就是我创建客户着色器材质的方式,这是我尝试应用到它的链接。这就是我正在使用的兰伯特材料neocomputer.org/projects/donut

标签: javascript three.js


【解决方案1】:

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

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

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

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

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

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

【讨论】:

  • 这是我最初尝试过的,但一直想出模型无法加载。尝试了几种不同的设置并一直空着,所以我正在寻找一种快速的作弊方法。听起来这将是艰难的道路。感谢您调查并提供信息。
  • 你的着色器不应该让你的模型“不加载”。这就像说您的油漆使您的汽车无法启动。 :) 也就是说,如果您的着色器有逻辑错误或无法编译,则模型的可视化不正确或不存在。密切关注 JS 控制台是否有错误。如果它不能编译着色器,它会告诉你原因。
  • 哈哈,这意味着我肯定做错了什么。谢谢你的提示。稍后会玩它。我会让你知道的。再次感谢您的帮助。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2018-01-15
  • 1970-01-01
  • 1970-01-01
  • 2013-06-11
  • 1970-01-01
  • 2020-08-28
  • 2020-11-14
相关资源
最近更新 更多