三、WebGL程序错误X6077答案

【问题标题】：THREE.WebGLProgram Error X6077三、WebGL程序错误X6077
【发布时间】：2024-05-02 09:00:02
【问题描述】：

使用来自THREE.ShaderLib 的预定义normalmap 着色器时出现错误。我的材质出现了，但没有应用置换贴图。如果我设置uDisplacementScale 或uDisplacementBias 制服，它会应用于整个对象，而不仅仅是在我的置换纹理中标记的部分。

这是我的代码：

var geometry = // some geometry ...
geometry.computeVertexNormals();
geometry.computeTangents();

var shader = THREE.ShaderLib["normalmap"];
var uniforms = THREE.UniformsUtils.clone( shader.uniforms );

uniforms[ "enableAO" ].value = true;
uniforms[ "enableDiffuse" ].value = true;
uniforms[ "enableSpecular" ].value = true;
uniforms[ "enableReflection" ].value = false;
uniforms[ "enableDisplacement" ].value = true;

uniforms[ "tDisplacement" ].value = THREE.ImageUtils.loadTexture( "textures/tex_DISP.png" );
uniforms[ "tDiffuse" ].value = THREE.ImageUtils.loadTexture( "textures/tex_COLOR.png" );
uniforms[ "tNormal" ].value = THREE.ImageUtils.loadTexture( "textures/tex_NRM.png" );
uniforms[ "tSpecular" ].value = THREE.ImageUtils.loadTexture( "textures/tex_SPEC.png" );
uniforms[ "tAO" ].value = THREE.ImageUtils.loadTexture( "textures/tex_OCC.png" );

var shaderParams = { fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShader, uniforms: uniforms, lights: true, fog: false };
var material  = new THREE.ShaderMaterial( shaderParams );

var mesh = new THREE.Mesh(geometry, material);

这是错误：

(63,12): error X6077: texld/texldb/texldp/dsx/dsy instructions with r# as source cannot
be used inside dynamic conditional 'if' blocks, dynamic conditional subroutine calls, 
or loop/rep with break*.

Warning: D3D shader compilation failed with 
 default
  flags.
  Retrying with 
avoid flow control
.

错误消息中描述的语句类型适用于着色器代码，还是适用于我初始化 THREE.ShaderMaterial 的代码点？还是它们是由另一个与所描述的错误无关的错误引起的？

【问题讨论】：

three.js shadermaterial not working at all 的可能重复项
看看*.com/questions/25889688。完全相同的问题。
我已经看过了，我认为我的代码的行为与答案中提供的代码非常相似 - 但我仍然收到错误消息。我错过了什么吗？
@gaitat - 另一篇文章中的重要内容是使用 computeTangents() 并在 ShaderMaterial 参数中指定 lights : true。这些更改已经在我的代码中完成。尽管如此，错误还是发生了。任何进一步的想法，可能是什么问题？
您可以创建一个小提琴或将您的代码发布到某处吗？

标签： compiler-errors three.js webgl shader

【解决方案1】：

使用法线贴图着色器不会添加额外的顶点来应用置换贴图 - 它只会将高度应用于现有顶点。

所以，失败是我没有在我的网格中提供足够的顶点。解决方案是使用更详细的几何图形。例如，three.js 中的预定义几何具有段参数，允许用户将几何的部分细分为多个段，从而在生成的网格中创建的不仅仅是轮廓顶点。

这不适用于置换贴图：

var geometry = new THREE.PlaneGeometry(100,100);

这会为置换贴图生成足够的顶点：

var geometry = new THREE.PlaneGeometry(100,100,100,100);

因此，最终，错误 X6077 仍然发生，并且不是导致失败的置换贴图的原因。事实上，它似乎根本不会出现在某些浏览器中，例如 Chrome。

【讨论】：