我需要将基于 WebGL 的 Diamond 着色器转换为 Three.JS

Question

我正在创建一家销售钻石首饰的在线商店，我们的主要目标是让这些钻石看起来非常吸引眼球。不幸的是，我不知道如何在 WebGL 中实现反射和折射。

我的第一次尝试是制作一个圆形钻石，然后通过在 3dsmax 和 vray 中将相机放置在钻石内来渲染天空盒。这给了我一个漂亮的天空盒（充满了多面扭曲，就像钻石一样），但一旦应用于 Three.js 中的折射/反射朗伯材料，它看起来并不有趣。

所以我开始研究自定义着色器，我偶然发现了这个链接 https://www.shadertoy.com/view/4sSGDc

现在我的问题是我找不到让three.js 编译着色器的方法。跟随这里的其他线程，我发现了如何设置一些制服：（例如，Texture2D）但这样的错误不断出现：

THREE.WebGLShader: gl.getShaderInfoLog() ERROR: 0:163: 'textureCube' : no matching overloaded function found 
ERROR: 0:163: 'assign' :  cannot convert from 'const float' to 'highp 4-component vector of float'
ERROR: 0:168: 'textureCube' : no matching overloaded function found 
ERROR: 0:168: 'r' :  field selection requires structure, vector, or matrix on left hand side 
ERROR: 0:169: 'textureCube' : no matching overloaded function found 
ERROR: 0:169: 'g' :  field selection requires structure, vector, or matrix on left hand side 
ERROR: 0:170: 'textureCube' : no matching overloaded function found 
ERROR: 0:170: 'b' :  field selection requires structure, vector, or matrix on left hand side 
ERROR: 0:185: 'textureCube' : no matching overloaded function found 
ERROR: 0:185: 'assign' :  cannot convert from 'const float' to 'highp 4-component vector of float'
ERROR: 0:196: 'fragCoord' : undeclared identifier 
ERROR: 0:196: 'x' :  field selection requires structure, vector, or matrix on left hand side 
ERROR: 0:196: 'y' :  field selection requires structure, vector, or matrix on left hand side 
ERROR: 0:210: 'fragColor' : undeclared identifier 
ERROR: 0:210: 'assign' :  cannot convert from 'highp 4-component vector of float' to 'float'

我不希望有人为我解决这个问题，但我要求一些线索来了解首先查看的位置，或者是否有一些转换此着色器的捷径。这是该项目非常重要的一部分，因此我将非常感谢任何帮助！ 谢谢！

Answer 1

这些错误与 three.js 无关，而只是简单的 GLSL 错误。

也许你在调整制服时弄坏了一些东西？只是为了确保：您知道这个着色器使用光线跟踪来渲染它的几何图形。即使转换没有错误，您也无法将任何几何图形传递给它。这是一种使用距离场算法以数学方式定义菱形形状的屏幕空间效果。它不适用于任何实际的几何图形。

附带说明，这个着色器在硬件方面非常昂贵。我的 Intel HD 4000 几乎被它卡住了（全屏运行），所以要准备好让智能手机浏览器以及你老板的花哨的 MacBook Air 崩溃。

如果我要实现菱形效果，我会使用带有预烘焙颜色缩写的立方体贴图和简单的面法线 - 视图方向反射查找，并结合应用到“地平面”的预置焦散纹理。