Question

我正在尝试制作一个实时的浏览器着色器编写工具，我遇到了自定义属性的问题。你可以看到我们在这里得到的东西：78.46.211.78/index.html

顶点着色器和片段着色器窗口是可自我解释的，最终渲染也是如此。接口通道是在渲染之前每帧执行的一段代码，因此我们可以在其中进行更改。现在，在界面通道中，我们可以通过右键单击并选择适当的选项来定义属性，制服和变量（Javascript全局变量）。制作新属性或制服时，请以[type] [name]的形式输入，其中type为“f”，“v3”等。

这会将属性和制服添加到附加到材质的属性和制服的散列中（每次更改着色器时都会创建一个新材质）。

我想要警告的另一件事是我实现的快捷方式：A是属性的哈希，U是制服，J是变量，O是场景中的对象。

以下是重建问题的方法：右键单击界面通道窗口，选择添加新属性，在提示符下键入“f displacement”。这会在顶点着色器中创建一个新的属性float值，以及在接口通道中创建一段辅助代码，如下所示：

for(var i = 0; i < O.sphere.geometry.vertices.length; i++) {
  A.displacement.value[i] = 1.0;
}
A.displacement.needsUpdate = true;

现在，转到顶点着色器并更改它：

attribute float displacement;
void main() {
  gl_Position = projectionMatrix *
  modelViewMatrix * vec4(position,1.0);
}

到

attribute float displacement;
void main() {
  gl_Position = projectionMatrix *
  modelViewMatrix * vec4(position,displacement);
}

......它不起作用。检查时可以看到所需的所有源代码。我检查了参考文献 - 材料确实引用了所需的数组。我从来没有看到过needsUpdate = true生效了。控制台中的错误将显示，因为代码编译将在您键入时发生，但一旦您完成句子，这些将停止，所以不要受到惊吓。

three.js自定义属性

0 个答案: