Question

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

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

所以我开始研究Custom Shaders，我偶然发现了这个链接 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

这些错误不是三个.js相关，而只是普通的GLSL错误。

也许你在调整制服时弄坏了什么？只是为了确保：您已经意识到这个着色器使用光线匹配来渲染其几何体。即使转换没有错误，也无法将任何几何体传递给它。这是使用距离场算法以数学方式定义菱形形状的屏幕空间效果。它不适用于任何实际的几何形状。

作为旁注，这个着色器在硬件方面非常昂贵。我的英特尔HD 4000几乎被它呛到了（全屏运行），所以要准备好让智能手机浏览器以及你老板的花哨MacBook Air崩溃。

如果我要实现钻石效果，我会使用带有预烘焙颜色缩写的立方体贴图和简单的面部法线 - 视图方向反射查找以及应用于地平面＆＃34;的预先设置的焦散纹理。

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

1 个答案: