Threejs数组索引错误：索引表达式必须是常量答案

【问题标题】：Threejs array index error: Index expression must be constantThreejs数组索引错误：索引表达式必须是常量
【发布时间】：2023-03-29 13:51:02
【问题描述】：

当我尝试使用具有非恒定索引的数组时，Three.js 出现以下错误：

'[]' : 索引表达式必须是常量

使用以下片段着色器：

precision mediump float;

varying vec2 vUV;

uniform vec2 screenResolution;

vec4 colors[2];

void main(void) {

    vec2 uv = gl_FragCoord.xy / screenResolution.xy;

    colors[0] = vec4(0.0);
    colors[1] = vec4(1.0);

    int index = int(floor(uv.y * 1.9));

    gl_FragColor = colors[index];
}

Babylon.js 不会发生此错误。

我知道在 GLSL ES 的早期版本中无法对数组使用非常量索引，但现在应该可以了，对吧？

我如何知道 Three.js 和 Babylon.js 使用的 GLSL 版本？

【问题讨论】：

标签： three.js glsl webgl shader

【解决方案1】：

简答

为了在 Three.js 中使用 GLSL ES 3.0，您必须创建一个 WebGL 2.0 上下文。

检查设备是否支持 WebGL 2 后，使用给定的 webgl2 上下文创建 WebGLRenderer：

var canvas = document.createElement( 'canvas' );
var context = canvas.getContext( 'webgl2' );
var renderer = new THREE.WebGLRenderer( { canvas: canvas, context: context } );

请参阅 Three.js 文档：How to use WebGL2。

长答案

问题的着色器版本是 GLSL ES 1.0。数组的索引必须是常量表达式。

见OpenGL ES Shading Language 1.00 Specification - 13 Acknowledgements;第 109 页：

5 数组、向量和矩阵的索引

定义：常量索引表达式是常量表达式的超集。常量索引表达式可以包括附录 A 第 4 节中定义的循环索引。
以下是常量索引表达式：

常量表达式

第 4 节中定义的循环索引

由以上两者组成的表达式

当用作索引时，常量索引表达式必须是整数类型。

制服（不包括采样器）

在顶点着色器中，要求支持所有形式的数组索引。在片段着色器中，仅对常量索引表达式强制支持索引。#

这意味着片段着色器中数组的索引在任何情况下都必须是常量或循环索引。

这在 GLSL ES 3.0 中有所改变。见OpenGL ES Shading Language 3.00 - 12.30 Dynamic Indexing；第 142 页：

对于 GLSL ES 1.00，不强制支持数组、向量和矩阵的动态索引，因为某些实现不直接支持它。软件解决方案（通过程序转换）适用于部分案例，但会导致性能不佳。 GLSL ES 3.00 是否应该强制支持动态索引？

解决方案：强制支持数组的动态索引，但采样器数组、片段输出数组和统一块数组除外。

GLSL ES 3.0 着色器必须通过着色代码第一行中的版本限定符来限定：

#version 300 es

此外，还有一些语法差异，例如着色器输入和输出的限定符，分别是 in 和 out，而不是 attribute 或 varying。

要使用 GLSL ES 3.0，您必须创建一个 WebGL 2.0 上下文。
请参阅 Three.js 文档：How to use WebGL2。

【讨论】：