Я sh во главе с шумом

Question

Просто посмотрите на http://lab.samsy.ninja/ вводный эксперимент и задаетесь вопросом, как это делается.

Должна быть инстанцированная геометрия во главе с шумом, рассчитанным с использованием gpgpu.

Но после Немного повозившись, у меня разболелась головная боль, и мне стало интересно, как получить положение из моделируемой текстуры с шумом для каждой вершины в me sh? Было бы легко только для частиц, представляющих один пиксель на текстуре, но как этого добиться для более сложной геометрии?

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

Любые подсказки более чем приветствуются

Answer 1

Это делается через GPGPU за 2 шага рендеринга на кадр.

1. Сначала они создали плоскость с пользовательскими шейдерами, у которой есть генератор RGB-шума, но вместо рендеринга на холст она отображается в THREE.WebGLRenderTarget. Результат сохраняется в текстуре, к которой можно получить доступ через WebGLRenderTarget.texture.

2. Затем они сгенерировали инстанцированную геометрию с цветными полосами, которые вы видите во второй сцене где вы можете передать сохраненную текстуру из шага 1 в материал с чем-то вроде material.noiseMap = target.texture;. В вершинном шейдере вы можете прочитать канал RGB каждого пикселя и назначить его на позицию XYZ каждой вершины.

Вот аналогичный пример, доступный в Трех. js сайт для сканирования через код: https://threejs.org/examples/?q=gpgpu#webgl_gpgpu_water

А вот ссылка на стандартные функции генерации шума GLSL: https://github.com/ashima/webgl-noise/tree/master/src Я думаю они использовали psrdnoise2D.glsl для этого типа движения.