Техническое задание на облака в Гуге

Старт проекта:

npm i
npm run dev

Необходимо адаптировать и оптимизировать шейдер с Shadertoy для three.js. Ссылка на шейдер.

Я собрал небольшой проект с моими наработками по шейдеру. Это простой проект на three.js с контролами камеры. Клик по экрану, чтобы крутить камерой, WASD для полета. Внутри лежат два класса:

1. CloudsShadertoy — портированный на three.js шейдер. Я перенес его как есть с минимальными доработками. Можно использовать как стартовую точку. Ссылка на демо, ссылка на класс.
2. CloudsUpisfree — моя попытка адаптации. Я портировал шейдер с Shadertoy в three.js, адаптировал его к движению и повороту камеры. С движением возникли проблемы: неправильный скейл облаков. Также я, попытался оптимизировать шейдер. Я попробовал переписать шум с glsl на js, т.к. шум статичный и нет смысла высчитывать его каждый раз во фрагментном шейдере. Я переписал код шума (не уверен, что верно) и попробовал писать его в DataTexture, которую передал в шейдер, но у меня возникли проблемы с координатами текстуры и в итоге шум в js не завелся. Также, не работает z-buffer. Также, облака выглядят гораздо хуже, чем выглядят в оригинале. Ссылка на демо, ссылка на класс.

Что нужно сделать

• нужно портировать шейдер с Shadertoy на three.js, шейдер должен быть как Mesh с ShaderMaterial
• облака должны корректно реагировать на камеру как обычный 3д объект: при движении камеры — двигаться, при повороте — поворачиваться
• облака должны поддерживать z-buffer, то есть если часть объекта за облаком, то она должна перекрываться им
• облака должны поддерживать fog
• облака должны быть видны до горизонта
• реализовать настройки шума: плотность облаков (кол-во дырок в облаках) и т.д.
• сейчас небо в шейдере зеленое, оно должно быть прозрачным (имеется в виду фон)
• реализовать регулируемую дальность тумана / прорисовки облаков
• шейдер должен быть производительным и выдавать 180 фпс на десктопе и хотя бы 60 на телефоне. При этом не должна пострадать визуальная часть. Если ради оптимизации нужно будет отказаться от какой-то части красоты, это ок
• нужно реализовать настройки визуала шейдера, которые можно отключать, чтобы увеличить производительность
• нужно добавить комментарии в шейдер, где описывается то как он работает
• нужно удостовериться что шейдер корректно работает на десктопе в chrome, safari, firefox и на телефонах (chrome android, safari ios)

Идеи по оптимизации

• реализовать что-то типа LOD: рендерить облака вблизи камеры в хорошем качестве, а вдали — хуже
• перенести генерацию шума из glsl в js?
• убрать чтение из текстуры?
• научиться регулировать разрешение или плотность пикселей?
• научиться регулировать качество raymarching?
• нашел форк оригинального шейдера, где автор утверждает, что повысил фпс шейдера с 20 до 35, но сами облака стали выглядеть хуже: ссылка на форк

Было бы круто, если получится

• перенести генерацию шума из glsl в javascript. Таким образом, можно будет сгенерировать облака и коллизии для физического движка, чтобы можно было ходить по облакам и проваливаться в сгенеренные дырки между облаками
• подключить tweakpane и привязать к нему настройки шума и визуала для быстрой настройки