WebGL Terrain Sandbox
Функционал
- GPU-симуляция эрозии с ping-pong-буферами.
- Raymarch-рендеринг 3D-рельефа.
- Рисование и стирание высотной карты кистью.
- Orbit-камера, автоповорот и pinch-to-zoom.
- Локальные ассеты и совместимость с Mobile Safari.
Технологии
- WebGL 2 и GLSL: рендеринг и симуляция выполняются на GPU.
- Three.js: управление canvas, render targets, текстурами и шейдерными материалами.
- Многошаговый shader pipeline: отдельные проходы для высотной карты, эрозии, terrain picking и финального изображения.
- Ping-pong render targets: текстуры состояния попеременно читаются и перезаписываются без CPU-копирования.
- Raymarching: процедурная отрисовка рельефа, воды, освещения и деталей сцены.
Оптимизация для мобильных устройств
- Рабочая высотная карта ограничена 512 × 512 px, чтобы контролировать нагрузку на GPU.
- Адаптивные уровни качества меняют pixel ratio и качество raymarch в зависимости от FPS.
- Координаты touch пересчитываются по реальному canvas и WebGL drawing buffer — кисть не смещается при высоком devicePixelRatio.
- Два касания блокируют рисование и включают pinch-to-zoom; один палец управляет кистью или orbit-камерой.
- Непрерывные мазки соединяются на heightmap, а touch/click обрабатываются с debounce для iOS.
- Three.js 0.152.2 и шейдеры хранятся локально: без CDN, с учётом совместимости Mobile Safari.