事例／サンプル [WebGL/Three.js]

Audiograph

リポジトリ：

mattdesl/audiograph.xyz: A Visual Exploration of Pilotpriest’s 2016 album, TRANS – GitHub

デモ：

Audiograph

Rain & Water Effect

リポジトリ：

codrops/RainEffect: Some experimental rain and water drop effects in different scenarios using WebGL, by Lucas Bebber – GitHub

デモ：

Demo 1 – Rain Effect Experiments | Codrops

Demo 2 – Rain Effect Experiments | Codrops

Demo 3 – Rain Effect Experiments | Codrops

参考：

Rain & Water Effect Experiments | Codrops

Tantalum Renderer

リポジトリ：

tunabrain/tantalum: WebGL 2D Light Transport – GitHub

デモ：

Tantalum – 2D Light Transport | Benedikt Bitterli’s Portfolio

参考：

The Secret Life of Photons | Benedikt Bitterli’s Portfolio

ThreeJS Caustics

リポジトリ：

martinRenou/threejs-caustics: Caustics computation using ThreeJS – GitHub

デモ：

Demo | ThreeJS Caustics

参考：

Real-time Rendering of Water Caustics | Martin Renou

WebGL Ocean FFT

 

リポジトリ：

wuhao1117/WebGL-Ocean-FFT: FFT based ocean simulation and rendering on WebGL – GitHub

デモ：

Demo | WebGL Water Shader

参考：

WebGL Water Shader – WebGL で再現された美しい海を眺めれる Web サービス | PC あれこれ探索

WebGL Water

動画：

WebGL Water Simulation

リポジトリ：

evanw/webgl-water: WebGL Water Demo – GitHub

デモ：

WebGL Water Demo | Evan Wallace

参考：

Rendering Realtime Caustics in WebGL | Evan Wallace

WebGL Water のコースティクス解説 – Qiita

WebGL Water Simulation by Evan Wallace | Experiments with Google

WebGL Path Tracing

デモ：

WebGL Path Tracing Demo | Evan Wallace

WebGL Raytracer

リポジトリ：

oseiskar/webgl-raytracer: Physically-based rendering in the browser with WebGL – GitHub

デモ：

Demo | WebGL Raytracer (oseiskar.github.io)

開発者

Evan Wallace (@evanwallace) / HP / Medium / GitHub