Title: Отладка Three.js - GLSL
Description: Отладка шейдеров GLSL
TOC: Отладка GLSL

Этот сайт пока не учит GLSL так же, как не учит JavaScript. Это действительно большие темы. Если вы хотите изучать GLSL, рассмотрите
[эти статьи](https://webglfundamentals.org) в качестве отправной точки.

Если вы уже знаете GLSL, вот несколько советов по отладке.

Когда я делаю новый шейдер GLSL, и вообще ничего не появляется, первое, что я делаю,
это изменяю фрагментный шейдер, чтобы он возвращал сплошной цвет. Например, в самом низу шейдера я мог бы поставить 

```glsl
void main() {

  ...

  gl_FragColor = vec4(1, 0, 0, 1);  // red
}
```

Если я вижу объект, который пытался нарисовать, то я знаю, что проблема связана с моим фрагментным шейдером. 
Это может быть что-то вроде плохих текстур, неинициализированной униформы,
униформы с неправильными значениями, но, по крайней мере, у меня есть направление, чтобы посмотреть. 

Чтобы проверить некоторые из них, я мог бы начать пытаться сделать некоторые из входных данных. 
Например, если я использую нормали в фрагментном шейдере, я мог бы добавить 

```glsl
gl_FragColor = vec4(vNormal * 0.5 + 0.5, 1);
```

Нормали переходят от -1 к +1, поэтому, умножив на 0,5 и добавив 0,5, 
мы получим значения, которые идут от 0,0 до 1,0, что делает их полезными для цветов. 

Попробуйте это с некоторыми вещами, которые, как вы знаете, работают, и вы начнете понимать, как обычно выглядят нормали.
Если ваши нормали не выглядят нормально, то у вас есть ключ к пониманию, где искать.
Если вы манипулируете нормалями в шейдере фрагментов, вы можете использовать ту же технику, чтобы нарисовать результат этой манипуляции. 

<div class="threejs_center"><img src="resources/images/standard-primitive-normals.jpg" style="width: 650px;"></div>

Точно так же, если мы используем текстуры, будут координаты текстуры, и мы можем нарисовать их чем-то вроде 

```glsl
gl_FragColor = vec4(fract(vUv), 0, 1);
```

`fract` есть в случае, если мы используем текстурные координаты, которые выходят за пределы диапазона от 0 до 1.
Это часто встречается, если для `texture.repeat` установлено значение больше 1. 

<div class="threejs_center"><img src="resources/images/standard-primitive-uvs.jpg" style="width: 650px;"></div>

Вы можете делать подобные вещи для всех значений в вашем фрагментном шейдере.
Выясните, каким может быть их диапазон, добавьте код для установки `gl_FragColor` с диапазоном от 0,0 до 1,0. 


Чтобы проверить текстуры, попробуйте `CanvasTexture` или `DataTexture`, которые, как вы знаете, работают. 

И наоборот, если после установки `gl_FragColor` на красный я все еще ничего не вижу, 
у меня есть подсказка, моя проблема может быть в направлении вещей, связанных с вершинным шейдером. 
Некоторые матрицы могут быть неправильными, или мои атрибуты могут содержать неверные данные или неправильно настроены. 

Я бы сначала посмотрел на матрицы. Я мог бы поставить точку останова сразу после моего вызова `renderer.render(scene, camera)`,
а затем начать расширять объекты в инспекторе. Матрица мира и проекционная матрица камеры, по крайней мере, не полны `NaN`? 
Расширяя сцену и глядя на ее `children`, я бы проверил, что мировые матрицы выглядят разумно (без `NaN`) и последние 4 значения каждой матрицы выглядят разумно для моей сцены. 
Если я ожидаю, что моя сцена будет иметь размеры 50x50x50 единиц, а некоторые матрицы показывают 552352623.123, то явно что-то не так. 

<div class="threejs_center"><img src="resources/images/inspect-matrices.gif"></div>

Как и в случае с фрагментным шейдером, мы также можем рисовать значения из вершинного шейдера, передавая их фрагментному шейдеру. 
Объявите переменные в обоих и передайте значение, которое вы не уверены, правильно. Фактически, если мой шейдер использует нормали, 
я изменю фрагментный шейдер так, чтобы он отображался так, как указано выше, а затем просто установите для `vNormal` значение, которое я хочу отобразить,
но масштабировать, чтобы значения изменялись от 0,0 до 1,0. Затем я смотрю на результаты и проверяю, соответствуют ли они моим ожиданиям. 

Еще одна полезная вещь - использовать более простой шейдер. 
Можете ли вы нарисовать свои данные с помощью `MeshBasicMaterial`? 
Если вы можете тогда попробуйте и убедитесь, что он показывает, как ожидалось. 

Если нет, то какой самый простой вершинный шейдер, который позволит вам визуализировать вашу геометрию? Обычно это так же просто, как 

```glsl
gl_Position = projection * modelView * vec4(position.xyz, 1);
```

Если это работает, начните добавлять изменения постепенно.

Еще одна вещь, которую вы можете сделать, это использовать расширение
[Shader Editor для Chrome](https://chrome.google.com/webstore/detail/shader-editor/ggeaidddejpbakgafapihjbgdlbbbpob?hl=en)
или аналогичное для других браузеров. Это отличный способ посмотреть, как работают другие шейдеры. Это также хорошо,
поскольку вы можете внести некоторые из предложенных выше изменений во время работы кода.