Краткий ответ
Для использования GLSL ES 3.0 в Three.js необходимо создать контекст WebGL 2.0.
После того, как вы проверили, что WebGL 2 поддерживается устройством, создайте WebGLRenderer
с заданным контекстом webgl2
:
var canvas = document.createElement( 'canvas' );
var context = canvas.getContext( 'webgl2' );
var renderer = new THREE.WebGLRenderer( { canvas: canvas, context: context } );
См. Документацию Three.js: Как использовать WebGL2 .
Длинный ответ
Версия шейдера вопроса - GLSL ES 1.0. Индекс массива должен быть константой-выражением.
См. OpenGL ES Shading Language 1.00 Спецификация - 13 Благодарностей ; страница 109:
5 Индексация массивов, векторов и матриц
Определение:
Выражения с постоянными индексами являются надмножеством выражений с постоянными. Выражения с постоянными индексами могут включать индексы цикла, как определено в разделе 4 Приложения А.
Ниже приведены выражения с постоянными индексами:
- Постоянные выражения
- Индексы петли, определенные в разделе 4
- Выражения, состоящие из обоих вышеперечисленных
При использовании в качестве индекса выражение-константа должно иметь целочисленный тип.
Униформа (исключая пробоотборники)
В вершинном шейдере обязательна поддержка всех форм индексации массивов. В шейдере фрагментов поддержка индексации обязательна только для выражений с постоянными индексами. #
Это означает, что индекс массива в фрагментном шейдере должен быть константой или индексом цикла в любом случае.
Это изменение в GLSL ES 3.0. См. OpenGL ES Shading Language 3.00 - 12.30 Динамическое индексирование ; страница 142:
Для GLSL ES 1.00 поддержка динамического индексирования массивов, векторов и матриц не была обязательной, поскольку она не поддерживалась напрямую некоторыми реализациями. Программные решения (посредством программных преобразований) существуют для подмножества случаев, но приводят к низкой производительности. Должна ли быть обязательной поддержка динамического индексирования для GLSL ES 3.00?
РАЗРЕШЕНИЕ: Поддержка мандатов для динамической индексации массивов, за исключением массивов сэмплеров, выходных массивов фрагментов и унифицированных блочных массивов.
Шейдер GLSL ES 3.0 должен быть квалифицирован по quailfier версии в первой строке кода шейдера:
#version 300 es
Кроме того, есть некоторые синтаксические различия, такие как квалификатор для входов и выходов шейдера, которые составляют in
соответственно out
вместо attribute
или varying
.
Для использования GLSL ES 3.0 необходимо создать контекст WebGL 2.0.
См. Документацию Three.js: Как использовать WebGL2 .