├── static ├── .gitkeep ├── assets │ ├── image1.jpg │ └── lenna.png ├── draco │ ├── draco_decoder.wasm │ ├── gltf │ │ ├── draco_decoder.wasm │ │ └── draco_wasm_wrapper.js │ ├── README.md │ └── draco_wasm_wrapper.js └── basis │ ├── basis_transcoder.wasm │ └── README.md ├── src ├── Experience │ ├── shaders │ │ ├── flowField │ │ │ ├── vertex.glsl │ │ │ └── fragment.glsl │ │ ├── particles │ │ │ ├── fragment.glsl │ │ │ └── vertex.glsl │ │ └── partials │ │ │ ├── perlin3d.glsl │ │ │ └── perlin4d.glsl │ ├── assets.js │ ├── World.js │ ├── Utils │ │ ├── Time.js │ │ ├── Sizes.js │ │ ├── Stats.js │ │ ├── Loader.js │ │ └── EventEmitter.js │ ├── Camera.js │ ├── Resources.js │ ├── Experience.js │ ├── Picture │ │ ├── Picture.js │ │ └── FlowField.js │ └── Renderer.js ├── script.js ├── style.css └── index.html ├── bundler ├── webpack.prod.js ├── webpack.dev.js └── webpack.common.js ├── readme.md ├── package.json └── .gitignore /static/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /static/assets/image1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/brunosimon/flow-field-gallery/HEAD/static/assets/image1.jpg -------------------------------------------------------------------------------- /static/assets/lenna.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/brunosimon/flow-field-gallery/HEAD/static/assets/lenna.png -------------------------------------------------------------------------------- /static/draco/draco_decoder.wasm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/brunosimon/flow-field-gallery/HEAD/static/draco/draco_decoder.wasm -------------------------------------------------------------------------------- /static/basis/basis_transcoder.wasm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/brunosimon/flow-field-gallery/HEAD/static/basis/basis_transcoder.wasm -------------------------------------------------------------------------------- /static/draco/gltf/draco_decoder.wasm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/brunosimon/flow-field-gallery/HEAD/static/draco/gltf/draco_decoder.wasm -------------------------------------------------------------------------------- /src/Experience/shaders/flowField/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() 4 | { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | 7 | vUv = uv; 8 | } -------------------------------------------------------------------------------- /src/script.js: -------------------------------------------------------------------------------- 1 | import './style.css' 2 | import Experience from './Experience/Experience.js' 3 | 4 | const experience = new Experience({ 5 | targetElement: document.querySelector('.experience') 6 | }) 7 | 8 | -------------------------------------------------------------------------------- /src/Experience/shaders/particles/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform sampler2D uTexture; 2 | 3 | varying vec2 vUv; 4 | 5 | void main() 6 | { 7 | vec3 color = texture2D(uTexture, vUv).rgb; 8 | gl_FragColor = vec4(color, 1.0); 9 | } -------------------------------------------------------------------------------- /src/Experience/assets.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | { 3 | name: 'base', 4 | data: {}, 5 | items: 6 | [ 7 | { name: 'imageTexture', source: '/assets/image1.jpg', type: 'texture' }, 8 | ] 9 | } 10 | ] -------------------------------------------------------------------------------- /src/style.css: -------------------------------------------------------------------------------- 1 | * 2 | { 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | } 7 | 8 | html, 9 | body 10 | { 11 | overflow: hidden; 12 | } 13 | 14 | .experience 15 | { 16 | position: fixed; 17 | width: 100vw; 18 | height: 100vh; 19 | } -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 |