├── .babelrc ├── .gitignore ├── .npmignore ├── LICENSE.md ├── PerformanceTips.md ├── README.md ├── assets ├── brash.png ├── brushes │ ├── brush.png │ └── brush1.png ├── eye.jpg ├── hello-world.png ├── instgram │ ├── icon-normal.png │ ├── icon-outline.png │ ├── icon-pause.png │ ├── icon-play.png │ └── instagram.png ├── models │ └── json │ │ └── coin.json ├── noise │ ├── noise.jpg │ ├── noise.png │ ├── pnoise.png │ ├── pnoise2.png │ └── pnoise3.jpg ├── normal │ └── coin_normal.png ├── particles │ ├── bg.png │ ├── bg1.png │ ├── bg2.jpg │ ├── bg4.png │ ├── particle0.png │ ├── particle1.png │ ├── particle2.png │ ├── particle3.png │ └── particle4.png ├── portraits │ ├── portrait00.jpg │ ├── portrait01.jpg │ └── portrait02.jpg ├── sam.jpg ├── sample.jpg ├── sample2.jpeg ├── sample3-sq.jpg ├── sample3.jpg ├── sample4-sq.jpg ├── sample5-sq.jpg ├── sample6-sq.jpg ├── sample8-sq.jpg ├── sample_square.png ├── screen.png ├── site.jpg ├── snow │ ├── noise.jpg │ ├── particle.png │ ├── snow-n.jpg │ └── snow.jpg ├── sq0.jpg ├── sq1.jpg ├── sq2.jpg ├── sq3.jpg ├── sq4.jpg ├── sq5.jpg ├── sq6.jpg ├── sq7.jpg ├── test.jpg ├── texture00.jpg ├── texture01.jpg ├── texture02.jpg ├── texture03.jpg ├── texture04.jpg ├── trump.jpg ├── video │ ├── video.mp4 │ └── video.ogv └── white.jpg ├── index.html ├── main.js ├── node ├── app.js └── build.js ├── package.json ├── sketches ├── basic │ ├── buffer-geometry │ │ ├── app.js │ │ ├── shader.frag │ │ └── shader.vert │ ├── postprocessing │ │ └── app.js │ ├── swap-rendering-with-customSwapRenderer │ │ ├── app.js │ │ ├── blur │ │ │ └── shader.frag │ │ └── display │ │ │ ├── shader.frag │ │ │ └── shader.vert │ ├── swap-rendering0 │ │ ├── app.js │ │ └── blur │ │ │ ├── main.js │ │ │ ├── shader.frag │ │ │ └── shader.vert │ ├── swap-rendering1 │ │ ├── app.js │ │ ├── blur │ │ │ ├── main.js │ │ │ ├── shader.frag │ │ │ └── shader.vert │ │ └── display │ │ │ ├── shader.frag │ │ │ └── shader.vert │ ├── texture-buffergeometry-canvas │ │ ├── app.js │ │ ├── shader.frag │ │ └── shader.vert │ ├── texture-buffergeometry-image │ │ ├── app.js │ │ ├── shader.frag │ │ └── shader.vert │ ├── texture │ │ └── app.js │ ├── video-texture │ │ └── index.js │ └── webglrenderer-target │ │ ├── app.js │ │ ├── shader.frag │ │ └── shader.vert ├── boilerplate │ ├── box │ │ └── app.js │ ├── interactive │ │ └── app.js │ └── shader │ │ ├── app.js │ │ ├── shader.frag │ │ └── shader.vert ├── dom │ └── caption.js ├── lib │ └── stats.js ├── rawGL │ └── noise │ │ ├── app.js │ │ ├── igloo.js │ │ ├── shader.frag │ │ └── shader.vert ├── theme │ ├── bloom │ │ └── app0 │ │ │ └── main.js │ ├── brush │ │ ├── absorb.glsl │ │ ├── app.js │ │ ├── ink.glsl │ │ ├── shader.frag │ │ └── shader.vert │ ├── buffer-geometry │ │ ├── app00 │ │ │ ├── index.js │ │ │ └── modelBufferGeometry.js │ │ └── sub-divide │ │ │ └── index.js │ ├── camera │ │ ├── app00 │ │ │ ├── index.js │ │ │ ├── optical-flow-mat.js │ │ │ └── shaders │ │ │ │ ├── shader.frag │ │ │ │ └── shader.vert │ │ └── app01 │ │ │ ├── blur │ │ │ └── shader.frag │ │ │ ├── display │ │ │ ├── shader.frag │ │ │ ├── shader.vert │ │ │ └── shader2.frag │ │ │ ├── fluid │ │ │ ├── force │ │ │ │ ├── mat.js │ │ │ │ ├── pass.vert │ │ │ │ └── shader.frag │ │ │ ├── slabop │ │ │ │ ├── advect.js │ │ │ │ ├── base.js │ │ │ │ ├── divergence.js │ │ │ │ ├── gradient.js │ │ │ │ ├── index.js │ │ │ │ ├── jacobi.js │ │ │ │ ├── shaders │ │ │ │ │ ├── advect.frag │ │ │ │ │ ├── divergence.frag │ │ │ │ │ ├── gradient.frag │ │ │ │ │ ├── jacobiscalar.frag │ │ │ │ │ ├── splat.frag │ │ │ │ │ └── splat2.frag │ │ │ │ ├── splat.js │ │ │ │ └── splat2.js │ │ │ └── solver1.js │ │ │ ├── index.js │ │ │ ├── optical-flow-mat.js │ │ │ └── shaders │ │ │ ├── advect.frag │ │ │ ├── gray.frag │ │ │ ├── shader.frag │ │ │ └── shader.vert │ ├── controller │ │ └── steam │ │ │ └── app.js │ ├── fluid │ │ ├── advect │ │ │ ├── index.js │ │ │ └── materials │ │ │ │ ├── advect │ │ │ │ ├── mat.js │ │ │ │ └── shader.frag │ │ │ │ ├── pass.vert │ │ │ │ ├── perlin │ │ │ │ ├── mat.js │ │ │ │ └── shader.frag │ │ │ │ └── show │ │ │ │ ├── mat.js │ │ │ │ └── shader.frag │ │ ├── app-2dFluid │ │ │ ├── app.js │ │ │ ├── index.js │ │ │ └── materials │ │ │ │ ├── advect │ │ │ │ ├── mat.js │ │ │ │ └── shader.frag │ │ │ │ ├── boiler │ │ │ │ ├── mat.js │ │ │ │ └── shader.frag │ │ │ │ ├── div │ │ │ │ ├── mat.js │ │ │ │ └── shader.frag │ │ │ │ ├── force │ │ │ │ ├── mat.js │ │ │ │ └── shader.frag │ │ │ │ ├── pass.vert │ │ │ │ ├── pressure │ │ │ │ ├── mat.js │ │ │ │ └── shader.frag │ │ │ │ ├── show │ │ │ │ ├── mat.js │ │ │ │ └── shader.frag │ │ │ │ └── source │ │ │ │ ├── mat.js │ │ │ │ └── shader.frag │ │ ├── app │ │ │ ├── app.js │ │ │ ├── display │ │ │ │ ├── shader.frag │ │ │ │ └── shader.vert │ │ │ ├── fluid │ │ │ │ ├── slabop │ │ │ │ │ ├── advect.js │ │ │ │ │ ├── base.js │ │ │ │ │ ├── divergence.js │ │ │ │ │ ├── gradient.js │ │ │ │ │ ├── index.js │ │ │ │ │ ├── jacobi.js │ │ │ │ │ └── shaders │ │ │ │ │ │ ├── advect.frag │ │ │ │ │ │ ├── divergence.frag │ │ │ │ │ │ ├── gradient.frag │ │ │ │ │ │ └── jacobiscalar.frag │ │ │ │ └── solver.js │ │ │ ├── index.js │ │ │ └── shaders │ │ │ │ └── advect.frag │ │ ├── app00 │ │ │ ├── app.js │ │ │ ├── blur │ │ │ │ └── shader.frag │ │ │ ├── display │ │ │ │ ├── shader.frag │ │ │ │ └── shader.vert │ │ │ ├── fluid │ │ │ │ ├── slabop │ │ │ │ │ ├── advect.js │ │ │ │ │ ├── base.js │ │ │ │ │ ├── divergence.js │ │ │ │ │ ├── gradient.js │ │ │ │ │ ├── index.js │ │ │ │ │ ├── jacobi.js │ │ │ │ │ └── shaders │ │ │ │ │ │ ├── advect.frag │ │ │ │ │ │ ├── divergence.frag │ │ │ │ │ │ ├── gradient.frag │ │ │ │ │ │ └── jacobiscalar.frag │ │ │ │ └── solver.js │ │ │ ├── index.js │ │ │ └── shaders │ │ │ │ └── advect.frag │ │ ├── app00temp00 │ │ │ ├── app.js │ │ │ ├── blur │ │ │ │ └── shader.frag │ │ │ ├── display │ │ │ │ ├── shader.frag │ │ │ │ └── shader.vert │ │ │ ├── fluid │ │ │ │ ├── slabop │ │ │ │ │ ├── advect.js │ │ │ │ │ ├── base.js │ │ │ │ │ ├── index.js │ │ │ │ │ └── shaders │ │ │ │ │ │ └── advect.frag │ │ │ │ └── solver.js │ │ │ ├── index.js │ │ │ └── shaders │ │ │ │ └── advect.frag │ │ ├── app00temp01 │ │ │ ├── app.js │ │ │ ├── blur │ │ │ │ └── shader.frag │ │ │ ├── display │ │ │ │ ├── shader.frag │ │ │ │ └── shader.vert │ │ │ ├── fluid │ │ │ │ ├── slabop │ │ │ │ │ ├── advect.js │ │ │ │ │ ├── base.js │ │ │ │ │ ├── divergence.js │ │ │ │ │ ├── gradient.js │ │ │ │ │ ├── index.js │ │ │ │ │ ├── jacobi.js │ │ │ │ │ └── shaders │ │ │ │ │ │ ├── advect.frag │ │ │ │ │ │ ├── divergence.frag │ │ │ │ │ │ ├── gradient.frag │ │ │ │ │ │ └── jacobiscalar.frag │ │ │ │ └── solver.js │ │ │ ├── index.js │ │ │ └── shaders │ │ │ │ └── advect.frag │ │ └── app01 │ │ │ ├── app.js │ │ │ ├── blur │ │ │ └── shader.frag │ │ │ ├── display │ │ │ ├── shader.frag │ │ │ └── shader.vert │ │ │ ├── fluid │ │ │ ├── force │ │ │ │ ├── mat.js │ │ │ │ ├── pass.vert │ │ │ │ └── shader.frag │ │ │ ├── slabop │ │ │ │ ├── advect.js │ │ │ │ ├── base.js │ │ │ │ ├── divergence.js │ │ │ │ ├── gradient.js │ │ │ │ ├── index.js │ │ │ │ ├── jacobi.js │ │ │ │ ├── shaders │ │ │ │ │ ├── advect.frag │ │ │ │ │ ├── divergence.frag │ │ │ │ │ ├── gradient.frag │ │ │ │ │ ├── jacobiscalar.frag │ │ │ │ │ └── splat.frag │ │ │ │ └── splat.js │ │ │ └── solver1.js │ │ │ ├── index.js │ │ │ └── shaders │ │ │ └── advect.frag │ ├── gallery │ │ ├── gallery00 │ │ │ ├── app.js │ │ │ └── imageShader │ │ │ │ ├── app.js │ │ │ │ ├── shader.frag │ │ │ │ └── shader.vert │ │ ├── gallery01 │ │ │ ├── app.js │ │ │ └── imagePlanes │ │ │ │ ├── base.js │ │ │ │ ├── image0.js │ │ │ │ ├── image0Shader │ │ │ │ ├── app.js │ │ │ │ ├── shader.frag │ │ │ │ └── shader.vert │ │ │ │ ├── image1.js │ │ │ │ ├── image1Shader │ │ │ │ ├── app.js │ │ │ │ ├── shader.frag │ │ │ │ └── shader.vert │ │ │ │ ├── image2.js │ │ │ │ └── image2Shader │ │ │ │ ├── app.js │ │ │ │ ├── shader.frag │ │ │ │ └── shader.vert │ │ └── gallery02 │ │ │ ├── app.js │ │ │ ├── shader.frag │ │ │ ├── shader.vert │ │ │ └── utils.js │ ├── geometry │ │ └── animation-geometry │ │ │ ├── app.js │ │ │ ├── shader │ │ │ ├── flake.frag │ │ │ ├── flake.vert │ │ │ ├── shader.frag │ │ │ └── shader.vert │ │ │ ├── snow-fall-geometry.js │ │ │ ├── snow-fall-material.js │ │ │ ├── snow-field.js │ │ │ ├── snow-interaction.js │ │ │ ├── snow-mesh.js │ │ │ ├── snow-particle.js │ │ │ └── snow-wrapper-object.js │ ├── gpgpu │ │ ├── gpgpu-basic1 │ │ │ ├── _old │ │ │ │ ├── point │ │ │ │ │ ├── particleGeometry.js │ │ │ │ │ ├── pointMesh.js │ │ │ │ │ ├── pointShaderMat.js │ │ │ │ │ └── shader │ │ │ │ │ │ ├── shader.frag │ │ │ │ │ │ └── shader.vert │ │ │ │ ├── texture │ │ │ │ │ ├── index.js │ │ │ │ │ └── shader │ │ │ │ │ │ ├── shader.frag │ │ │ │ │ │ └── shader.vert │ │ │ │ └── velocity │ │ │ │ │ ├── shader.frag │ │ │ │ │ └── shader.vert │ │ │ ├── app.js │ │ │ ├── gpuRenderer │ │ │ │ ├── _temp.js │ │ │ │ ├── index.js │ │ │ │ └── shaders │ │ │ │ │ └── pass │ │ │ │ │ ├── shader.frag │ │ │ │ │ └── shader.vert │ │ │ └── shaders │ │ │ │ ├── curl.frag │ │ │ │ ├── lookup.frag │ │ │ │ └── lookup.vert │ │ ├── gpgpu-basic2 │ │ │ ├── app.js │ │ │ ├── gpuRenderer │ │ │ │ ├── _temp.js │ │ │ │ ├── index.js │ │ │ │ └── shaders │ │ │ │ │ └── pass │ │ │ │ │ ├── shader.frag │ │ │ │ │ └── shader.vert │ │ │ ├── lookUpMesh │ │ │ │ ├── geometry.js │ │ │ │ ├── implement.js │ │ │ │ └── index.js │ │ │ ├── shaders │ │ │ │ ├── curl.frag │ │ │ │ ├── pass.frag │ │ │ │ └── pass.vert │ │ │ ├── swapRenderer │ │ │ │ ├── implement.js │ │ │ │ ├── index.js │ │ │ │ └── shaders │ │ │ │ │ └── pass │ │ │ │ │ ├── shader.frag │ │ │ │ │ └── shader.vert │ │ │ └── utils │ │ │ │ └── create │ │ │ │ └── geometry.js │ │ └── gpgpu-swap-renderer │ │ │ ├── app.js │ │ │ ├── gpuRenderer │ │ │ ├── _temp.js │ │ │ ├── index.js │ │ │ └── shaders │ │ │ │ └── pass │ │ │ │ ├── shader.frag │ │ │ │ └── shader.vert │ │ │ ├── lookUpMesh │ │ │ ├── geometry.js │ │ │ ├── implement.js │ │ │ └── index.js │ │ │ ├── shaders │ │ │ ├── curl.frag │ │ │ ├── pass.frag │ │ │ └── pass.vert │ │ │ ├── swapRenderer │ │ │ ├── geometry.js │ │ │ ├── implement.js │ │ │ ├── index.js │ │ │ └── shaders │ │ │ │ └── pass │ │ │ │ ├── shader.frag │ │ │ │ └── shader.vert │ │ │ └── utils │ │ │ └── create │ │ │ └── geometry.js │ ├── light │ │ └── 9999-point-light#00 │ │ │ ├── app.js │ │ │ ├── effect.vert │ │ │ ├── ray.frag │ │ │ └── ray.js │ ├── marching-cube │ │ ├── custom-marching-cube │ │ │ └── app.js │ │ ├── marching-cube00 │ │ │ ├── app.js │ │ │ └── marching-cubes-data.js │ │ └── vendor │ │ │ └── MarchingCubes.js │ ├── noise │ │ └── noise01 │ │ │ ├── app.js │ │ │ ├── shader.frag │ │ │ └── shader.vert │ ├── paint │ │ ├── brush00 │ │ │ └── app.js │ │ ├── brush01 │ │ │ └── app.js │ │ ├── brush02 │ │ │ ├── app.js │ │ │ ├── line-mesh-geometry.js │ │ │ ├── line-mesh.js │ │ │ ├── shader │ │ │ │ └── basic.js │ │ │ └── sketch-geometry.js │ │ └── brush03 │ │ │ ├── app.js │ │ │ ├── polyline-miter-util.js │ │ │ └── polyline-normals.js │ ├── particle-system │ │ └── particle01 │ │ │ ├── app.js │ │ │ ├── config.js │ │ │ ├── front-particle.js │ │ │ ├── line-shader.frag │ │ │ ├── line-shader.vert │ │ │ ├── page-controller.js │ │ │ ├── particle.js │ │ │ ├── post-effect.frag │ │ │ ├── post-effect.vert │ │ │ ├── postEffect.js │ │ │ ├── shader.frag │ │ │ └── shader.vert │ ├── particles │ │ └── buffergeometry-particle │ │ │ ├── BufferGeometry.js │ │ │ ├── app.js │ │ │ ├── shader.frag │ │ │ └── shader.vert │ ├── post-processing │ │ ├── bloom │ │ │ ├── app.js │ │ │ ├── shaders │ │ │ │ └── quntum-additive │ │ │ │ │ ├── index.js │ │ │ │ │ ├── shader.frag │ │ │ │ │ └── shader.vert │ │ │ └── vendors │ │ │ │ └── StaticShader.js │ │ ├── godray0 │ │ │ ├── ShaderGodRays.js │ │ │ ├── app.js │ │ │ └── not-working │ │ │ │ ├── ShaderExtras.js │ │ │ │ ├── app.js │ │ │ │ ├── sources │ │ │ │ ├── RenderManager.js │ │ │ │ ├── Shaders.js │ │ │ │ └── Utils.js │ │ │ │ └── three.js │ │ ├── godray1 │ │ │ ├── app.js │ │ │ ├── shader.frag │ │ │ ├── shader.vert │ │ │ ├── shaders │ │ │ │ ├── quantum-godray │ │ │ │ │ ├── index.js │ │ │ │ │ ├── shader.frag │ │ │ │ │ └── shader.vert │ │ │ │ └── quntum-additive │ │ │ │ │ ├── index.js │ │ │ │ │ ├── shader.frag │ │ │ │ │ └── shader.vert │ │ │ └── vendors │ │ │ │ └── StaticShader.js │ │ ├── ofx-glitch │ │ │ ├── app.js │ │ │ └── shaders │ │ │ │ ├── covergence │ │ │ │ ├── app.js │ │ │ │ ├── shader.frag │ │ │ │ └── shader.vert │ │ │ │ ├── cut-slider │ │ │ │ ├── app.js │ │ │ │ ├── shader.frag │ │ │ │ └── shader.vert │ │ │ │ ├── noise │ │ │ │ ├── app.js │ │ │ │ ├── shader.frag │ │ │ │ └── shader.vert │ │ │ │ ├── slit-scan-horizonal │ │ │ │ ├── app.js │ │ │ │ ├── shader.frag │ │ │ │ └── shader.vert │ │ │ │ ├── slit-scan │ │ │ │ ├── app.js │ │ │ │ ├── shader.frag │ │ │ │ └── shader.vert │ │ │ │ └── twist │ │ │ │ ├── app.js │ │ │ │ ├── shader.frag │ │ │ │ └── shader.vert │ │ ├── ofx-water │ │ │ ├── app.js │ │ │ ├── decay │ │ │ │ ├── main.js │ │ │ │ ├── shader.frag │ │ │ │ └── shader.vert │ │ │ ├── displacePixel │ │ │ │ ├── main.js │ │ │ │ ├── shader.frag │ │ │ │ └── shader.vert │ │ │ └── translation │ │ │ │ ├── main.js │ │ │ │ ├── shader.frag │ │ │ │ └── shader.vert │ │ ├── postprocessing-nonphoto │ │ │ ├── CharlotteHoare_Thesis.pdf │ │ │ ├── Non-Photorealistic.pdf │ │ │ ├── OBrien.pdf │ │ │ └── memo.md │ │ ├── postprocessing00 │ │ │ ├── ShaderExtras.js │ │ │ ├── app.js │ │ │ └── sources │ │ │ │ ├── RenderManager.js │ │ │ │ ├── Shaders.js │ │ │ │ └── Utils.js │ │ └── postprocessing01 │ │ │ ├── Shaders.js │ │ │ └── app.js │ ├── procedural-mesh │ │ ├── cube │ │ │ ├── app.js │ │ │ ├── geometry.js │ │ │ └── mesh.js │ │ ├── cube2 │ │ │ ├── app.js │ │ │ ├── geometry.js │ │ │ ├── material.js │ │ │ ├── mesh.js │ │ │ ├── particle.js │ │ │ └── shader │ │ │ │ ├── shader.frag │ │ │ │ └── shader.vert │ │ ├── generative-plane │ │ │ ├── app.js │ │ │ ├── geometry.js │ │ │ └── mesh.js │ │ ├── grid │ │ │ ├── app.js │ │ │ ├── geometry.js │ │ │ ├── mat.js │ │ │ ├── mesh.js │ │ │ ├── particle.js │ │ │ ├── shader │ │ │ │ ├── shader.frag │ │ │ │ └── shader.vert │ │ │ └── triangle.js │ │ ├── primitive-plane │ │ │ ├── app.js │ │ │ ├── geometry.js │ │ │ └── mesh.js │ │ ├── raycaster-sphere │ │ │ ├── geometry.js │ │ │ ├── index.js │ │ │ └── mesh.js │ │ ├── readme.md │ │ ├── sphere-collide │ │ │ ├── geometry.js │ │ │ ├── index.js │ │ │ └── mesh.js │ │ └── sphere │ │ │ ├── geometry.js │ │ │ ├── index.js │ │ │ └── mesh.js │ ├── shader │ │ ├── 00-shader00 │ │ │ ├── app.js │ │ │ ├── shader.frag │ │ │ ├── shader.vert │ │ │ └── util.glsl │ │ ├── 01-wireframe │ │ │ ├── app.js │ │ │ ├── geometry.js │ │ │ ├── mesh.js │ │ │ ├── mesh2.js │ │ │ ├── mesh3.js │ │ │ ├── mesh4.js │ │ │ ├── mesh5.js │ │ │ ├── mesh6.js │ │ │ ├── mesh7.js │ │ │ ├── mesh8.js │ │ │ ├── mesh9.js │ │ │ └── shader │ │ │ │ ├── shader.frag │ │ │ │ ├── shader.vert │ │ │ │ ├── shader2.frag │ │ │ │ ├── shader3.frag │ │ │ │ ├── shader4.frag │ │ │ │ ├── shader5.frag │ │ │ │ ├── shader6.frag │ │ │ │ ├── shader7.frag │ │ │ │ ├── shader8.frag │ │ │ │ └── shader9.frag │ │ ├── app01 │ │ │ ├── app.js │ │ │ ├── shader.frag │ │ │ └── shader.vert │ │ └── app02-lensflare │ │ │ ├── app.js │ │ │ ├── shader.frag │ │ │ └── shader.vert │ ├── swap-renderer │ │ ├── app00 │ │ │ ├── app.js │ │ │ ├── blur │ │ │ │ └── shader.frag │ │ │ ├── display │ │ │ │ ├── shader.frag │ │ │ │ └── shader.vert │ │ │ └── index.js │ │ └── app01 │ │ │ ├── app.js │ │ │ ├── blur │ │ │ └── shader.frag │ │ │ ├── display │ │ │ ├── shader.frag │ │ │ └── shader.vert │ │ │ ├── index.js │ │ │ └── shaders │ │ │ └── advect.frag │ ├── vertex-displacement │ │ ├── 01-vertex-displacement │ │ │ ├── index.js │ │ │ ├── modelBufferGeometry.js │ │ │ └── shaders │ │ │ │ ├── shader.frag │ │ │ │ └── shader.vert │ │ └── readme.md │ └── video │ │ └── videoMask │ │ ├── HorizontalBlurShader.js │ │ ├── OutputAddShader.js │ │ ├── VerticalBlurShader.js │ │ ├── app.js │ │ ├── index.js │ │ ├── shaders │ │ ├── shader.frag │ │ └── shader.vert │ │ ├── utils.js │ │ └── video-texture.js ├── undefined │ ├── #000 │ │ └── app.js │ ├── #001 │ │ ├── app.js │ │ ├── blur │ │ │ └── shader.frag │ │ ├── display │ │ │ ├── shader.frag │ │ │ └── shader.vert │ │ ├── index.js │ │ └── shaders │ │ │ └── advect.frag │ ├── #002 │ │ ├── app.js │ │ ├── geometry.js │ │ ├── mesh.js │ │ ├── shader.frag │ │ └── shader.vert │ └── #003 │ │ ├── app.js │ │ ├── geometry.js │ │ ├── mesh.js │ │ ├── shader.frag │ │ └── shader.vert └── vendors │ ├── controller │ ├── EventDispatcher.js │ ├── index.js │ ├── package.json │ └── utils.js │ └── desc.js ├── src └── sass │ └── main.scss └── vendors ├── Stats.js ├── caption.js ├── controls ├── OrbitControls.js └── TrackballControls.js ├── postprocessing ├── AdaptiveToneMappingPass.js ├── BloomPass.js ├── BokehPass.js ├── DotScreenPass.js ├── EffectComposer.js ├── FilmPass.js ├── GlitchPass.js ├── MaskPass.js ├── RenderPass.js ├── SavePass.js ├── ShaderPass.js └── TexturePass.js ├── shader-odango-set ├── .gitignore ├── main.js ├── package.json └── shaders │ ├── 00common │ └── shader.vert │ ├── blur │ ├── main.js │ └── shader.frag │ ├── common │ └── shader.vert │ ├── copy │ ├── main.js │ └── shader.frag │ ├── displacePixel │ ├── main.js │ └── shader.frag │ ├── gray │ ├── main.js │ └── shader.frag │ └── normal │ ├── main.js │ └── shader.frag ├── shaders ├── BasicShader.js ├── BleachBypassShader.js ├── BlendShader.js ├── BokehShader.js ├── BokehShader2.js ├── BrightnessContrastShader.js ├── ColorCorrectionShader.js ├── ColorifyShader.js ├── ConvolutionShader.js ├── CopyShader.js ├── DOFMipMapShader.js ├── DigitalGlitch.js ├── DotScreenShader.js ├── EdgeShader.js ├── EdgeShader2.js ├── FXAAShader.js ├── FilmShader.js ├── FocusShader.js ├── FresnelShader.js ├── HorizontalBlurShader.js ├── HorizontalTiltShiftShader.js ├── HueSaturationShader.js ├── KaleidoShader.js ├── LuminosityShader.js ├── MirrorShader.js ├── NormalDisplacementShader.js ├── NormalMapShader.js ├── OceanShaders.js ├── ParallaxShader.js ├── RGBShiftShader.js ├── SSAOShader.js ├── SepiaShader.js ├── TechnicolorShader.js ├── ToneMapShader.js ├── TriangleBlurShader.js ├── UnpackDepthRGBAShader.js ├── VerticalBlurShader.js ├── VerticalTiltShiftShader.js └── VignetteShader.js ├── swapRenderer ├── implement.js ├── index.js └── shaders │ └── pass │ ├── shader.frag │ └── shader.vert ├── swapRendererTarget └── index.js ├── three-js-utils └── utils.js ├── three-kiso └── index.js ├── utils.js └── video-texture ├── video.js └── webcam.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015"] 3 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | bower_components 2 | node_modules 3 | *.log 4 | .DS_Store 5 | bundle.js 6 | app/main.css 7 | .idea 8 | 9 | /9999 10 | /example -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | bower_components 2 | node_modules 3 | *.log 4 | .DS_Store 5 | bundle.js 6 | test 7 | test.js 8 | demo/ 9 | .npmignore 10 | LICENSE.md -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | Copyright (c) 2015 Matt DesLauriers 3 | 4 | Permission is hereby granted, free of charge, to any person obtaining a copy 5 | of this software and associated documentation files (the "Software"), to deal 6 | in the Software without restriction, including without limitation the rights 7 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | copies of the Software, and to permit persons to whom the Software is 9 | furnished to do so, subject to the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be included in all 12 | copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 17 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, 18 | DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR 19 | OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE 20 | OR OTHER DEALINGS IN THE SOFTWARE. 21 | 22 | -------------------------------------------------------------------------------- /PerformanceTips.md: -------------------------------------------------------------------------------- 1 | ## Performance Test 2 | 3 | #### URL: http://webgl-sketch-dojo.kenji-special.info/app/999-performance-test/ 4 | 5 | ### May/01/2017 6 | 7 | ### Desktop 8 | 9 | - chrome 57 / MacBook Pro (Retina, 15-inch, Mid 2015) / 16 GB 1600 MHz DDR3 / AMD Radeon R9 M370X 2048 MB Intel Iris Pro 1536 MB average 0.4ms - 0.5ms 10 | - firefox / MacBook Pro (Retina, 15-inch, Mid 2015) / 16 GB 1600 MHz DDR3 / AMD Radeon R9 M370X 2048 MB Intel Iris Pro 1536 MB average 0.02ms - 0.03ms 11 | - safari 10.0.2/ MacBook Pro (Retina, 15-inch, Mid 2015) / 16 GB 1600 MHz DDR3 / AMD Radeon R9 M370X 2048 MB Intel Iris Pro 1536 MB average 0.12ms - 0.13ms 12 | 13 | ### Desktop 14 | 15 | - safari / iphone 5 / 3.5 ms 16 | - safari / iphont 5s / 0.6ms 17 | - safari / iphont 6/6 plus/6s/ / 0.4 - 0.5ms 18 | 19 | ### performance list for project 20 | 21 | ### iPhone 22 | 23 | - perf < 5 -> good 24 | - perf < 10 -> bad 25 | - perf > 10 -> worst 26 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # WEBGL SKETCH DOJO 2 | 3 | webgl, mainly with three.js, sketches for practice and work. 4 | 5 | url: [webgl-sketch-dojo.kenji-special.info](http://webgl-sketch-dojo.kenji-special.info/) 6 | 7 | 8 | [![alt text]( ./assets/site.jpg "site")](http://webgl-sketch-dojo.kenji-special.info/) 9 | 10 | 11 | ## Easy CPU Performance Test 12 | 13 | url: [http://webgl-sketch-dojo.kenji-special.info/app/999-performance-test/](http://webgl-sketch-dojo.kenji-special.info/app/999-performance-test/) 14 | 15 | Result data - [https://github.com/kenjiSpecial/webgl-sketch-dojo/blob/master/PerformanceTips.md](https://github.com/kenjiSpecial/webgl-sketch-dojo/blob/master/PerformanceTips.md) 16 | 17 | ## References 18 | 19 | - [Three.js](http://threejs.org/) 20 | - [Learning Three.js](https://github.com/josdirksen/learning-threejs) 21 | -------------------------------------------------------------------------------- /assets/brash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/brash.png -------------------------------------------------------------------------------- /assets/brushes/brush.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/brushes/brush.png -------------------------------------------------------------------------------- /assets/brushes/brush1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/brushes/brush1.png -------------------------------------------------------------------------------- /assets/eye.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/eye.jpg -------------------------------------------------------------------------------- /assets/hello-world.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/hello-world.png -------------------------------------------------------------------------------- /assets/instgram/icon-normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/instgram/icon-normal.png -------------------------------------------------------------------------------- /assets/instgram/icon-outline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/instgram/icon-outline.png -------------------------------------------------------------------------------- /assets/instgram/icon-pause.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/instgram/icon-pause.png -------------------------------------------------------------------------------- /assets/instgram/icon-play.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/instgram/icon-play.png -------------------------------------------------------------------------------- /assets/instgram/instagram.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/instgram/instagram.png -------------------------------------------------------------------------------- /assets/noise/noise.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/noise/noise.jpg -------------------------------------------------------------------------------- /assets/noise/noise.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/noise/noise.png -------------------------------------------------------------------------------- /assets/noise/pnoise.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/noise/pnoise.png -------------------------------------------------------------------------------- /assets/noise/pnoise2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/noise/pnoise2.png -------------------------------------------------------------------------------- /assets/noise/pnoise3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/noise/pnoise3.jpg -------------------------------------------------------------------------------- /assets/normal/coin_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/normal/coin_normal.png -------------------------------------------------------------------------------- /assets/particles/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/particles/bg.png -------------------------------------------------------------------------------- /assets/particles/bg1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/particles/bg1.png -------------------------------------------------------------------------------- /assets/particles/bg2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/particles/bg2.jpg -------------------------------------------------------------------------------- /assets/particles/bg4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/particles/bg4.png -------------------------------------------------------------------------------- /assets/particles/particle0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/particles/particle0.png -------------------------------------------------------------------------------- /assets/particles/particle1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/particles/particle1.png -------------------------------------------------------------------------------- /assets/particles/particle2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/particles/particle2.png -------------------------------------------------------------------------------- /assets/particles/particle3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/particles/particle3.png -------------------------------------------------------------------------------- /assets/particles/particle4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/particles/particle4.png -------------------------------------------------------------------------------- /assets/portraits/portrait00.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/portraits/portrait00.jpg -------------------------------------------------------------------------------- /assets/portraits/portrait01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/portraits/portrait01.jpg -------------------------------------------------------------------------------- /assets/portraits/portrait02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/portraits/portrait02.jpg -------------------------------------------------------------------------------- /assets/sam.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/sam.jpg -------------------------------------------------------------------------------- /assets/sample.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/sample.jpg -------------------------------------------------------------------------------- /assets/sample2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/sample2.jpeg -------------------------------------------------------------------------------- /assets/sample3-sq.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/sample3-sq.jpg -------------------------------------------------------------------------------- /assets/sample3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/sample3.jpg -------------------------------------------------------------------------------- /assets/sample4-sq.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/sample4-sq.jpg -------------------------------------------------------------------------------- /assets/sample5-sq.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/sample5-sq.jpg -------------------------------------------------------------------------------- /assets/sample6-sq.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/sample6-sq.jpg -------------------------------------------------------------------------------- /assets/sample8-sq.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/sample8-sq.jpg -------------------------------------------------------------------------------- /assets/sample_square.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/sample_square.png -------------------------------------------------------------------------------- /assets/screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/screen.png -------------------------------------------------------------------------------- /assets/site.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/site.jpg -------------------------------------------------------------------------------- /assets/snow/noise.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/snow/noise.jpg -------------------------------------------------------------------------------- /assets/snow/particle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/snow/particle.png -------------------------------------------------------------------------------- /assets/snow/snow-n.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/snow/snow-n.jpg -------------------------------------------------------------------------------- /assets/snow/snow.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/snow/snow.jpg -------------------------------------------------------------------------------- /assets/sq0.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/sq0.jpg -------------------------------------------------------------------------------- /assets/sq1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/sq1.jpg -------------------------------------------------------------------------------- /assets/sq2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/sq2.jpg -------------------------------------------------------------------------------- /assets/sq3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/sq3.jpg -------------------------------------------------------------------------------- /assets/sq4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/sq4.jpg -------------------------------------------------------------------------------- /assets/sq5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/sq5.jpg -------------------------------------------------------------------------------- /assets/sq6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/sq6.jpg -------------------------------------------------------------------------------- /assets/sq7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/sq7.jpg -------------------------------------------------------------------------------- /assets/test.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/test.jpg -------------------------------------------------------------------------------- /assets/texture00.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/texture00.jpg -------------------------------------------------------------------------------- /assets/texture01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/texture01.jpg -------------------------------------------------------------------------------- /assets/texture02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/texture02.jpg -------------------------------------------------------------------------------- /assets/texture03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/texture03.jpg -------------------------------------------------------------------------------- /assets/texture04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/texture04.jpg -------------------------------------------------------------------------------- /assets/trump.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/trump.jpg -------------------------------------------------------------------------------- /assets/video/video.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/video/video.mp4 -------------------------------------------------------------------------------- /assets/video/video.ogv: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/video/video.ogv -------------------------------------------------------------------------------- /assets/white.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/assets/white.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | WEB-GL SKETCH DOJO 5 | 6 | 7 | 8 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /node/app.js: -------------------------------------------------------------------------------- 1 | var budo = require('budo'); 2 | var babelify = require('babelify'); 3 | var glslify = require('glslify'); 4 | var aliasify = require('aliasify'); 5 | 6 | // "sections": "./src/sections/", 7 | budo("main.js", { 8 | live : true, 9 | // open : true, 10 | stream : process.stdout, 11 | serve : "bundle.js", 12 | verbose : true, 13 | browserify: { 14 | transform: [ 15 | babelify.configure({presets: ["es2015"]}), 16 | glslify, 17 | aliasify.configure({ 18 | aliases : { 19 | "vendors" : "./vendors/" 20 | } 21 | }) 22 | ] 23 | } 24 | }).on('connect', function (ev) { 25 | console.log('Server running on %s', ev.uri) 26 | console.log('LiveReload running on port %s', ev.livePort) 27 | }).on('update', function (buffer) { 28 | console.log('bundle - %d bytes', buffer.length) 29 | }) -------------------------------------------------------------------------------- /node/build.js: -------------------------------------------------------------------------------- 1 | var browserify = require('browserify'); 2 | var babelify = require('babelify'); 3 | var glslify = require('glslify'); 4 | var aliasify = require('aliasify'); 5 | var vinyl = require('vinyl-source-stream'); 6 | var uglify = require("uglifyify"); 7 | var browserify = require('browserify') 8 | var fs = require('fs') 9 | 10 | // console.log('__dirname + '/index.js ); 11 | var b = browserify(); 12 | b.add(__dirname + '/../main.js'); 13 | b.transform(babelify.configure({presets: ["es2015"]})); 14 | b.transform(glslify); 15 | b.transform(aliasify.configure({aliases : {"vendors" : "./vendors/"}})); 16 | b.transform({global: true}, 'uglifyify'); 17 | 18 | var o = b.bundle().pipe(fs.createWriteStream(__dirname + '/../example/bundle.js')); -------------------------------------------------------------------------------- /sketches/basic/buffer-geometry/shader.frag: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | 5 | gl_FragColor = vec4( vUv.x, vUv.y, 0.0, 1.0 ); 6 | } -------------------------------------------------------------------------------- /sketches/basic/buffer-geometry/shader.vert: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | vUv = uv; 5 | 6 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 7 | } -------------------------------------------------------------------------------- /sketches/basic/swap-rendering-with-customSwapRenderer/display/shader.frag: -------------------------------------------------------------------------------- 1 | 2 | varying vec2 vUv; 3 | uniform sampler2D tDiffuse; 4 | 5 | void main(){ 6 | gl_FragColor = texture2D(tDiffuse, vUv); 7 | // gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0); 8 | } -------------------------------------------------------------------------------- /sketches/basic/swap-rendering-with-customSwapRenderer/display/shader.vert: -------------------------------------------------------------------------------- 1 | 2 | varying vec2 vUv; 3 | 4 | void main(){ 5 | vUv = uv; 6 | 7 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 8 | } 9 | -------------------------------------------------------------------------------- /sketches/basic/swap-rendering0/blur/main.js: -------------------------------------------------------------------------------- 1 | var glslify = require('glslify'); 2 | 3 | module.exports = { 4 | uniforms: { 5 | "tDiffuse" : { type: "t", value: null }, 6 | "uTexture" : { type: "t", value: null }, 7 | "uWindow" : { type: "v2", value: null }, 8 | "uMouse" : { type: "v2", value: null } 9 | }, 10 | vertexShader : glslify('./shader.vert'), 11 | fragmentShader : glslify('./shader.frag') 12 | }; -------------------------------------------------------------------------------- /sketches/basic/swap-rendering0/blur/shader.vert: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main(){ 4 | vUv = uv; 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 6 | } -------------------------------------------------------------------------------- /sketches/basic/swap-rendering1/blur/main.js: -------------------------------------------------------------------------------- 1 | var glslify = require('glslify'); 2 | 3 | module.exports = { 4 | 5 | vertexShader : glslify('./shader.vert'), 6 | fragmentShader : glslify('./shader.frag') 7 | }; -------------------------------------------------------------------------------- /sketches/basic/swap-rendering1/blur/shader.vert: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main(){ 4 | vUv = vec2(uv.x ,1.0 - uv.y); 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 6 | } -------------------------------------------------------------------------------- /sketches/basic/swap-rendering1/display/shader.frag: -------------------------------------------------------------------------------- 1 | 2 | varying vec2 vUv; 3 | uniform sampler2D tDiffuse; 4 | 5 | void main(){ 6 | gl_FragColor = texture2D(tDiffuse, vUv); 7 | // gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0); 8 | } -------------------------------------------------------------------------------- /sketches/basic/swap-rendering1/display/shader.vert: -------------------------------------------------------------------------------- 1 | 2 | varying vec2 vUv; 3 | 4 | void main(){ 5 | vUv = uv; 6 | 7 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 8 | } 9 | -------------------------------------------------------------------------------- /sketches/basic/texture-buffergeometry-canvas/shader.frag: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | uniform sampler2D tDiffuse; 4 | 5 | void main(){ 6 | vec4 texel = texture2D( tDiffuse, vUv ); 7 | gl_FragColor = texel; // * opacity + vec4(0.0, 0.0, 0.0, 1.0) * (1. - opacity); 8 | } -------------------------------------------------------------------------------- /sketches/basic/texture-buffergeometry-canvas/shader.vert: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main(){ 4 | vUv = uv; 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 6 | } -------------------------------------------------------------------------------- /sketches/basic/texture-buffergeometry-image/shader.frag: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | uniform sampler2D tDiffuse; 4 | 5 | void main(){ 6 | vec4 texel = texture2D( tDiffuse, vUv ); 7 | gl_FragColor = texel; // * opacity + vec4(0.0, 0.0, 0.0, 1.0) * (1. - opacity); 8 | } -------------------------------------------------------------------------------- /sketches/basic/texture-buffergeometry-image/shader.vert: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main(){ 4 | vUv = uv; 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 6 | } -------------------------------------------------------------------------------- /sketches/basic/webglrenderer-target/shader.frag: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | uniform sampler2D tDiffuse; 4 | uniform float opacity; 5 | 6 | void main(){ 7 | vec4 texel = texture2D( tDiffuse, vUv ); 8 | gl_FragColor = texel * opacity + vec4(0.0, 0.0, 0.0, 1.0) * (1. - opacity); 9 | } -------------------------------------------------------------------------------- /sketches/basic/webglrenderer-target/shader.vert: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main(){ 4 | vUv = uv; 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 6 | } -------------------------------------------------------------------------------- /sketches/boilerplate/shader/shader.frag: -------------------------------------------------------------------------------- 1 | void main() { 2 | gl_FragColor = vec4( 1.0, 0.0, 0.0, 0.5 ); 3 | } -------------------------------------------------------------------------------- /sketches/boilerplate/shader/shader.vert: -------------------------------------------------------------------------------- 1 | void main() { 2 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 3 | } -------------------------------------------------------------------------------- /sketches/lib/stats.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | getStats : function(){ 3 | var stats = new Stats(); 4 | stats.setMode( 0 ); // 0: fps, 1: ms, 2: mb 5 | 6 | // align top-left 7 | stats.domElement.style.position = 'absolute'; 8 | stats.domElement.style.bottom = '0px'; 9 | stats.domElement.style.left = '0px'; 10 | stats.domElement.style.zIndex= 9999; 11 | 12 | 13 | document.body.appendChild( stats.domElement ); 14 | 15 | return stats; 16 | } 17 | }; -------------------------------------------------------------------------------- /sketches/rawGL/noise/shader.frag: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | 3 | varying vec2 vUv; 4 | 5 | uniform vec2 uWindow; 6 | uniform float uTime; 7 | 8 | #pragma glslify: random = require(glsl-random) 9 | 10 | void main() { 11 | gl_FragColor = vec4( vec3( random( (gl_FragCoord.xy + vec2(uTime) ) * uWindow.xy ) ), 1.0 ); 12 | } 13 | -------------------------------------------------------------------------------- /sketches/rawGL/noise/shader.vert: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | 3 | attribute vec2 points; 4 | varying vec2 vUv; 5 | 6 | void main() { 7 | vUv = (points * vec2(1, -1) + 1.0) / 2.0; 8 | gl_Position = vec4(points, 0.0, 1.0); 9 | } 10 | -------------------------------------------------------------------------------- /sketches/theme/bloom/app0/main.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/sketches/theme/bloom/app0/main.js -------------------------------------------------------------------------------- /sketches/theme/brush/absorb.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify: noise2 = require('glsl-noise/simplex/2d') 2 | #pragma glslify: aastep = require('glsl-aastep') 3 | 4 | float absorb(float sdf, vec2 uv, float scale, float falloff) { 5 | float distort = sdf + noise2(uv * scale) * falloff; 6 | return aastep(0.5, distort); 7 | } 8 | 9 | #pragma glslify: export(absorb) -------------------------------------------------------------------------------- /sketches/theme/brush/shader.frag: -------------------------------------------------------------------------------- 1 | //#ifdef GL_OES_standard_derivatives 2 | // #extension GL_OES_standard_derivatives : enable 3 | //#endif 4 | 5 | 6 | #pragma glslify: aastep = require(glsl-aastep) 7 | #pragma glslify: noise2 = require(glsl-noise/simplex/2d) 8 | 9 | 10 | varying vec2 vUv; 11 | uniform sampler2D tDiffuse; 12 | 13 | void main(){ 14 | /** 15 | vec4 texel = texture2D( tDiffuse, vUv ); 16 | float alpha = ink(0, texel.a, vUv); 17 | 18 | */ 19 | 20 | 21 | vec4 texel = texture2D( tDiffuse, vUv ); 22 | float sdf = texel.a; 23 | 24 | float alpha = 0.0; 25 | alpha += (sdf + noise2(vUv * 1000.0) * 0.1) * 0.5; 26 | alpha += (sdf + noise2(vUv * 50.0) * 0.2) * 0.3; 27 | alpha += (sdf + noise2(vUv * 500.0) * 0.2) * 0.2; 28 | 29 | gl_FragColor = vec4( texel.rgb, alpha ); // * opacity + vec4(0.0, 0.0, 0.0, 1.0) * (1. - opacity); 30 | } -------------------------------------------------------------------------------- /sketches/theme/brush/shader.vert: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main(){ 4 | vUv = uv; 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 6 | } -------------------------------------------------------------------------------- /sketches/theme/buffer-geometry/app00/modelBufferGeometry.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | export default class ModelBufferGeometry extends THREE.BufferGeometry { 4 | constructor(model) { 5 | super(); 6 | 7 | } 8 | } -------------------------------------------------------------------------------- /sketches/theme/camera/app00/optical-flow-mat.js: -------------------------------------------------------------------------------- 1 | var glslify = require('glslify'); 2 | 3 | export default class OpticalFlowMaterial extends THREE.ShaderMaterial { 4 | constructor(opts) { 5 | var uniforms = { 6 | uTexture : {value: null}, 7 | uPreviousTexture : {value: null}, 8 | uResolution : {value : new THREE.Vector2(opts.width, opts.height)}, 9 | uOffset : {value : 1.0}, 10 | uLambda : {value : 0.0}, 11 | baseCol : {value: new THREE.Vector3()} 12 | }; 13 | 14 | super({ 15 | uniforms: uniforms, vertexShader: glslify("./shaders/shader.vert"), fragmentShader: glslify("./shaders/shader.frag"), 16 | depthTest : false, 17 | transparent : true, 18 | side : THREE.DoubleSide 19 | }) 20 | } 21 | updateShader(texture){ 22 | this.uniforms.uTexture.value = texture; 23 | // this.uniforms.uPreviousTexture.value = this.previousTexture; 24 | 25 | 26 | // this.previousTexture = texture; 27 | } 28 | updateBaseColor(baseCol){ 29 | this.uniforms.baseCol.value = baseCol; 30 | } 31 | 32 | } -------------------------------------------------------------------------------- /sketches/theme/camera/app00/shaders/shader.vert: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | vUv = uv; 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 6 | } -------------------------------------------------------------------------------- /sketches/theme/camera/app01/display/shader.frag: -------------------------------------------------------------------------------- 1 | 2 | varying vec2 vUv; 3 | 4 | uniform vec3 uBaseCol; 5 | uniform sampler2D tDiffuse; 6 | 7 | void main(){ 8 | gl_FragColor = vec4(texture2D(tDiffuse, vUv ).rgb + uBaseCol, 1.0); 9 | } -------------------------------------------------------------------------------- /sketches/theme/camera/app01/display/shader.vert: -------------------------------------------------------------------------------- 1 | 2 | varying vec2 vUv; 3 | 4 | void main(){ 5 | vUv = uv; 6 | 7 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 8 | } 9 | -------------------------------------------------------------------------------- /sketches/theme/camera/app01/display/shader2.frag: -------------------------------------------------------------------------------- 1 | 2 | varying vec2 vUv; 3 | 4 | uniform sampler2D tDiffuse; 5 | uniform sampler2D tDensity; 6 | 7 | void main(){ 8 | gl_FragColor = vec4(texture2D(tDensity, vUv).rgb, 1.0); 9 | } -------------------------------------------------------------------------------- /sketches/theme/camera/app01/fluid/force/mat.js: -------------------------------------------------------------------------------- 1 | var glslify = require('glslify'); 2 | 3 | export default class ForceMat extends THREE.ShaderMaterial { 4 | constructor() { 5 | var uniforms = { 6 | uMouse: { 7 | value: new THREE.Vector2() 8 | }, 9 | uPrevMouse: { 10 | value: new THREE.Vector2 11 | }, 12 | uMouseDown: { 13 | value: false 14 | }, 15 | uTexture: { 16 | value: null 17 | }, 18 | uWindow : { 19 | value : new THREE.Vector2(window.innerWidth, window.innerHeight) 20 | } 21 | } 22 | super({ 23 | uniforms: uniforms, vertexShader: glslify("./pass.vert"), fragmentShader: glslify("./shader.frag"), 24 | depthTest : false, 25 | side : THREE.DoubleSide 26 | }); 27 | } 28 | } -------------------------------------------------------------------------------- /sketches/theme/camera/app01/fluid/force/pass.vert: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | vUv = uv; 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 6 | } -------------------------------------------------------------------------------- /sketches/theme/camera/app01/fluid/slabop/base.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var glslify = require('glslify'); 3 | 4 | module.exports = (function(){ 5 | var Base = function(fs, uniforms){ 6 | var geometry = new THREE.PlaneBufferGeometry(2, 2); 7 | var material = new THREE.ShaderMaterial({ 8 | uniforms : uniforms, 9 | vertexShader : glslify("../../display/shader.vert"), 10 | fragmentShader : fs, 11 | depthWrite : false, 12 | depthTest : false, 13 | blending : THREE.NoBlending 14 | }); 15 | var quad = new THREE.Mesh(geometry, material); 16 | 17 | this.camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1); 18 | this.scene = new THREE.Scene(); 19 | this.scene.add(quad); 20 | }; 21 | 22 | return Base; 23 | 24 | })(); -------------------------------------------------------------------------------- /sketches/theme/camera/app01/fluid/slabop/index.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | Advect : require('./advect'), 3 | Divergence : require('./divergence'), 4 | Jacobi : require('./jacobi'), 5 | Gradient : require('./gradient'), 6 | Splat : require('./splat'), 7 | Splat2 : require('./splat2') 8 | } -------------------------------------------------------------------------------- /sketches/theme/camera/app01/fluid/slabop/shaders/divergence.frag: -------------------------------------------------------------------------------- 1 | uniform sampler2D velocity; 2 | 3 | uniform vec2 gridSize; 4 | uniform float gridScale; 5 | 6 | void main(){ 7 | vec2 uv = gl_FragCoord.xy / gridSize.xy; 8 | 9 | vec2 xOffset = vec2(1.0 / gridSize.x, 0.0); 10 | vec2 yOffset = vec2(0.0, 1.0 / gridSize.y); 11 | 12 | float vl = texture2D(velocity, uv - xOffset).x; 13 | float vr = texture2D(velocity, uv + xOffset).x; 14 | float vb = texture2D(velocity, uv - yOffset).y; 15 | float vt = texture2D(velocity, uv + yOffset).y; 16 | 17 | float scale = 0.5 / gridScale; 18 | float divergence = scale * (vr - vl + vt - vb); 19 | 20 | gl_FragColor = vec4(divergence, 0.0, 0.0, 1.0); 21 | } -------------------------------------------------------------------------------- /sketches/theme/camera/app01/fluid/slabop/shaders/gradient.frag: -------------------------------------------------------------------------------- 1 | uniform sampler2D p; 2 | uniform sampler2D w; 3 | 4 | uniform vec2 gridSize; 5 | uniform float gridScale; 6 | 7 | void main() 8 | { 9 | vec2 uv = gl_FragCoord.xy / gridSize.xy; 10 | 11 | vec2 xOffset = vec2(1.0 / gridSize.x, 0.0); 12 | vec2 yOffset = vec2(0.0, 1.0 / gridSize.y); 13 | 14 | float pl = texture2D(p, uv - xOffset).x; 15 | float pr = texture2D(p, uv + xOffset).x; 16 | float pb = texture2D(p, uv - yOffset).x; 17 | float pt = texture2D(p, uv + yOffset).x; 18 | 19 | float scale = 0.5 / gridScale; 20 | vec2 gradient = scale * vec2(pr - pl, pt - pb); 21 | 22 | vec2 wc = texture2D(w, uv).xy; 23 | 24 | gl_FragColor = vec4(wc - gradient, 0.0, 1.0); 25 | } 26 | -------------------------------------------------------------------------------- /sketches/theme/camera/app01/fluid/slabop/shaders/jacobiscalar.frag: -------------------------------------------------------------------------------- 1 | uniform sampler2D x; 2 | uniform sampler2D b; 3 | 4 | uniform vec2 gridSize; 5 | 6 | uniform float alpha; 7 | uniform float beta; 8 | 9 | void main() 10 | { 11 | vec2 uv = gl_FragCoord.xy / gridSize.xy; 12 | 13 | vec2 xOffset = vec2(1.0 / gridSize.x, 0.0); 14 | vec2 yOffset = vec2(0.0, 1.0 / gridSize.y); 15 | 16 | float xl = texture2D(x, uv - xOffset).x; 17 | float xr = texture2D(x, uv + xOffset).x; 18 | float xb = texture2D(x, uv - yOffset).x; 19 | float xt = texture2D(x, uv + yOffset).x; 20 | 21 | float bc = texture2D(b, uv).x; 22 | 23 | gl_FragColor = vec4((xl + xr + xb + xt + alpha * bc) / beta, 0.0, 0.0, 1.0); 24 | } 25 | -------------------------------------------------------------------------------- /sketches/theme/camera/app01/fluid/slabop/shaders/splat.frag: -------------------------------------------------------------------------------- 1 | uniform sampler2D read; 2 | uniform sampler2D uOpticalFlow; 3 | uniform vec2 gridSize; 4 | uniform vec2 point; 5 | uniform vec3 uCol; 6 | uniform float radius; 7 | 8 | 9 | varying vec2 vUv; 10 | 11 | float gauss(vec2 p, float r){ 12 | return exp(-dot(p, p) / r); 13 | } 14 | 15 | void main(){ 16 | vec3 base = texture2D(read, vUv).xyz; 17 | vec2 coord = point.xy - vUv.xy; 18 | vec3 splat = texture2D(uOpticalFlow, vUv).rgb; //* gauss(coord, gridSize.x * radius * 0.00000001); 19 | vec3 col = base + splat; 20 | // col *= 0.9; 21 | gl_FragColor = vec4(col, 1.0); 22 | //gl_FragColor = vec4(base + 0.01, 1.0); 23 | } -------------------------------------------------------------------------------- /sketches/theme/camera/app01/fluid/slabop/shaders/splat2.frag: -------------------------------------------------------------------------------- 1 | uniform sampler2D read; 2 | uniform sampler2D uOpticalFlow; 3 | uniform vec2 gridSize; 4 | uniform vec2 point; 5 | uniform vec3 uCol; 6 | uniform float radius; 7 | uniform float uScale; 8 | 9 | 10 | varying vec2 vUv; 11 | 12 | float gauss(vec2 p, float r){ 13 | return exp(-dot(p, p) / r); 14 | } 15 | 16 | void main(){ 17 | vec3 base = texture2D(read, vUv).xyz; 18 | vec2 coord = point.xy - vUv.xy; 19 | vec3 splat = texture2D(uOpticalFlow, vUv).rgb; //* gauss(coord, gridSize.x * radius * 0.00000001); 20 | float gray = (abs(splat.r) + abs(splat.g) + abs(splat.b))/3.; 21 | vec3 grayColor = vec3(gray); 22 | vec3 col = base + uScale * grayColor; 23 | 24 | gl_FragColor = vec4(col, 1.0); 25 | } -------------------------------------------------------------------------------- /sketches/theme/camera/app01/optical-flow-mat.js: -------------------------------------------------------------------------------- 1 | var glslify = require('glslify'); 2 | 3 | export default class OpticalFlowMaterial extends THREE.ShaderMaterial { 4 | constructor(opts) { 5 | var uniforms = { 6 | uTexture : {value: null}, 7 | uPreviousTexture : {value: null}, 8 | uResolution : {value : new THREE.Vector2(opts.width, opts.height)}, 9 | uOffset : {value : 1.0}, 10 | uLambda : {value : 0.0}, 11 | baseCol : {value: new THREE.Vector3()} 12 | }; 13 | 14 | super({ 15 | uniforms: uniforms, vertexShader: glslify("./shaders/shader.vert"), fragmentShader: glslify("./shaders/shader.frag"), 16 | depthTest : false, 17 | transparent : true, 18 | side : THREE.DoubleSide 19 | }) 20 | } 21 | updateShader(texture){ 22 | this.uniforms.uTexture.value = texture; 23 | // this.uniforms.uPreviousTexture.value = this.previousTexture; 24 | 25 | 26 | // this.previousTexture = texture; 27 | } 28 | updateBaseColor(baseCol){ 29 | this.uniforms.baseCol.value = baseCol; 30 | } 31 | 32 | } -------------------------------------------------------------------------------- /sketches/theme/camera/app01/shaders/advect.frag: -------------------------------------------------------------------------------- 1 | uniform sampler2D velocity; 2 | uniform sampler2D target; 3 | 4 | uniform vec2 uWindow; 5 | 6 | vec3 bilerpVec3(sampler2D d, vec2 p){ 7 | vec4 ij; // i0, j0, i1, j1 8 | ij.xy = floor(p - 0.5) + 0.5; 9 | ij.zw = ij.xy + 1.0; 10 | 11 | vec4 uv = ij / uWindow.xyxy; 12 | vec3 d11 = texture2D(d, uv.xy).rgb; 13 | vec3 d21 = texture2D(d, uv.zy).rgb; 14 | vec3 d12 = texture2D(d, uv.xw).rgb; 15 | vec3 d22 = texture2D(d, uv.zw).rgb; 16 | 17 | vec2 a = p - ij.xy; 18 | 19 | return mix(mix(d11, d21, a.x), mix(d12, d22, a.x), a.y); 20 | } 21 | 22 | void main(){ 23 | vec2 uv = gl_FragCoord.xy / uWindow.xy; 24 | vec2 p = gl_FragCoord.xy - texture2D(velocity, uv).xy; 25 | vec4 outputPos = vec4( bilerpVec3(target, p), 1.0); 26 | 27 | gl_FragColor = outputPos; 28 | } 29 | -------------------------------------------------------------------------------- /sketches/theme/camera/app01/shaders/gray.frag: -------------------------------------------------------------------------------- 1 | 2 | varying vec2 vUv; 3 | 4 | uniform sampler2D uTexture; 5 | uniform vec3 baseCol; 6 | 7 | 8 | void main(){ 9 | vec3 col = texture2D(uTexture, vUv).rgb + baseCol; 10 | float gray = (col.r + col.g + col.b) / 3.0; 11 | gray = (gray - 0.5) * 2.0; 12 | 13 | gl_FragColor = vec4(gray, gray, gray, 1.0); 14 | } -------------------------------------------------------------------------------- /sketches/theme/camera/app01/shaders/shader.vert: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | vUv = uv; 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 6 | } -------------------------------------------------------------------------------- /sketches/theme/fluid/advect/materials/advect/mat.js: -------------------------------------------------------------------------------- 1 | var glslify = require('glslify'); 2 | 3 | export default class CustomGeometry extends THREE.ShaderMaterial { 4 | constructor(){ 5 | var uniforms = { 6 | uTime : { type : "f", value: 0}, 7 | uDis : { type : "f", value: 0}, 8 | uWindow : {type : "v2", value: new THREE.Vector2(window.innerWidth, window.innerHeight)}, 9 | uMouse : {type : "v2", value: new THREE.Vector2(9999, 9999)}, 10 | uTexture : {type : "t", value : null}, 11 | uVelocity: {type : "t", value: null}, 12 | uOriginTexture : {type : "t", value: null}, 13 | } 14 | 15 | super({ uniforms : uniforms, vertexShader : glslify("../pass.vert"), fragmentShader: glslify("./shader.frag")}); 16 | } 17 | 18 | updateMat(dt, texture, velocityTexture, originTexture, mouse, dis ){ 19 | this.uniforms.uTexture.value = texture; 20 | this.uniforms.uVelocity.value = velocityTexture; 21 | this.uniforms.uOriginTexture.value = originTexture; 22 | if(mouse)this.uniforms.uMouse.value = mouse; 23 | if(dis) this.uniforms.uDis.value = dis|| 0; 24 | this.uniforms.uTime.value += 1/60; 25 | } 26 | } -------------------------------------------------------------------------------- /sketches/theme/fluid/advect/materials/advect/shader.frag: -------------------------------------------------------------------------------- 1 | uniform sampler2D uTexture; 2 | uniform sampler2D uVelocity; 3 | uniform sampler2D uOriginTexture; 4 | 5 | uniform vec2 uWindow; 6 | uniform vec2 uMouse; 7 | uniform float uDis; 8 | uniform float uTime; 9 | 10 | varying vec2 vUv; 11 | 12 | vec4 bilerp(sampler2D d, vec2 p) 13 | { 14 | vec4 ij; // i0, j0, i1, j1 15 | ij.xy = floor(p - 0.5) + 0.5; 16 | ij.zw = ij.xy + 1.0; 17 | 18 | vec4 uv = ij / uWindow.xyxy; 19 | vec4 d11 = texture2D(d, uv.xy); 20 | vec4 d21 = texture2D(d, uv.zy); 21 | vec4 d12 = texture2D(d, uv.xw); 22 | vec4 d22 = texture2D(d, uv.zw); 23 | 24 | vec2 a = p - ij.xy; 25 | 26 | return mix(mix(d11, d21, a.x), mix(d12, d22, a.x), a.y); 27 | } 28 | 29 | void main() 30 | { 31 | float theta = texture2D(uVelocity, vUv).x * 6. ; 32 | vec2 p = vUv - 0.001 * vec2(cos(theta), sin(theta)); 33 | p.x *= uWindow.x; 34 | p.y *= uWindow.y; 35 | 36 | 37 | vec4 originCol = texture2D(uOriginTexture, vUv); 38 | float dis = distance(vUv * uWindow.xy, uMouse * uWindow.xy); 39 | if(dis < uDis){ 40 | gl_FragColor = originCol; 41 | }else{ 42 | vec4 calCol = bilerp(uTexture, p); 43 | gl_FragColor = calCol ; 44 | } 45 | 46 | 47 | } -------------------------------------------------------------------------------- /sketches/theme/fluid/advect/materials/pass.vert: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | vUv = uv; 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 6 | } -------------------------------------------------------------------------------- /sketches/theme/fluid/advect/materials/perlin/mat.js: -------------------------------------------------------------------------------- 1 | var glslify = require('glslify'); 2 | 3 | export default class CustomGeometry extends THREE.ShaderMaterial { 4 | constructor(){ 5 | var uniforms = { 6 | uTime : { type : "f", value: 0}, 7 | uScale : {type : "f", value: 30}, 8 | uWindow : {type : "v2", value: new THREE.Vector2(window.innerWidth, window.innerHeight)} 9 | } 10 | 11 | super({ uniforms : uniforms, vertexShader : glslify("../pass.vert"), fragmentShader: glslify("./shader.frag")}); 12 | } 13 | update(dt){ 14 | dt = dt || 0; 15 | this.uniforms.uTime.value += dt; 16 | // console.log(this.uniforms.uTime.value ); 17 | 18 | } 19 | } -------------------------------------------------------------------------------- /sketches/theme/fluid/advect/materials/show/mat.js: -------------------------------------------------------------------------------- 1 | var glslify = require('glslify'); 2 | 3 | export default class CustomGeometry extends THREE.ShaderMaterial { 4 | constructor(){ 5 | var uniforms = { 6 | tDiffuse : { type : "t"} 7 | } 8 | 9 | super({ uniforms : uniforms, vertexShader : glslify("../pass.vert"), fragmentShader: glslify("./shader.frag")}); 10 | } 11 | update(texture){ 12 | this.uniforms.tDiffuse.value = texture; 13 | 14 | } 15 | } -------------------------------------------------------------------------------- /sketches/theme/fluid/advect/materials/show/shader.frag: -------------------------------------------------------------------------------- 1 | 2 | varying vec2 vUv; 3 | uniform sampler2D tDiffuse; 4 | 5 | void main(){ 6 | gl_FragColor = texture2D(tDiffuse, vUv); 7 | // gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0); 8 | } -------------------------------------------------------------------------------- /sketches/theme/fluid/app-2dFluid/index.js: -------------------------------------------------------------------------------- 1 | require('./app.js') -------------------------------------------------------------------------------- /sketches/theme/fluid/app-2dFluid/materials/advect/mat.js: -------------------------------------------------------------------------------- 1 | var glslify = require('glslify'); 2 | 3 | export default class CustomGeometry extends THREE.ShaderMaterial { 4 | constructor(){ 5 | var uniforms = { 6 | uWindow : { type : "v2", value: new THREE.Vector2(window.innerWidth, window.innerHeight)}, 7 | uTexture: { type: "t", value : null } 8 | } 9 | 10 | super({ uniforms : uniforms, vertexShader : glslify("../pass.vert"), fragmentShader: glslify("./shader.frag")}); 11 | } 12 | } -------------------------------------------------------------------------------- /sketches/theme/fluid/app-2dFluid/materials/advect/shader.frag: -------------------------------------------------------------------------------- 1 | uniform sampler2D uTexture; 2 | uniform vec2 uWindow; 3 | 4 | varying vec2 vUv; 5 | void main(){ 6 | float w = 1.0/512.; 7 | float h = 1.0/512.; 8 | float dt = 0.001; 9 | float tau = 0.5 * dt/h; 10 | float tauW = 0.5 * dt/w; 11 | vec2 tc = vUv; 12 | 13 | vec2 D = -tau*vec2( 14 | texture2D(uTexture, tc).r + texture2D(uTexture, vec2(tc.r - h, tc.g)).r, 15 | texture2D(uTexture, tc).g + texture2D(uTexture, vec2(tc.r, tc.g - h)).g ); 16 | vec2 Df = floor(D), Dd = D - Df; 17 | vec2 tc1 = tc + Df*h; 18 | vec3 new = 19 | (texture2D(uTexture, tc1).rgb*(1. - Dd.g) + 20 | texture2D(uTexture, vec2(tc1.r, tc1.g + w)).rgb*Dd.g)*(1. - Dd.r) + 21 | (texture2D(uTexture, vec2(tc1.r + w, tc1.g)).rgb*(1. - Dd.g) + 22 | texture2D(uTexture, vec2(tc1.r + w, tc1.g + h)).rgb*Dd.g)*Dd.r; 23 | gl_FragColor = vec4( new, texture2D(uTexture, tc).a ); 24 | } -------------------------------------------------------------------------------- /sketches/theme/fluid/app-2dFluid/materials/boiler/mat.js: -------------------------------------------------------------------------------- 1 | var glslify = require('glslify'); 2 | 3 | export default class CustomGeometry extends THREE.ShaderMaterial { 4 | constructor(){ 5 | var uniforms = { 6 | 7 | } 8 | 9 | super({ uniforms : uniforms, vertexShader : glslify("../pass.vert"), fragmentShader: glslify("./shader.frag")}); 10 | } 11 | } -------------------------------------------------------------------------------- /sketches/theme/fluid/app-2dFluid/materials/boiler/shader.frag: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/sketches/theme/fluid/app-2dFluid/materials/boiler/shader.frag -------------------------------------------------------------------------------- /sketches/theme/fluid/app-2dFluid/materials/div/mat.js: -------------------------------------------------------------------------------- 1 | var glslify = require('glslify'); 2 | 3 | export default class CustomGeometry extends THREE.ShaderMaterial { 4 | constructor(){ 5 | var uniforms = { 6 | uWindow : { type : "v2", value: new THREE.Vector2(window.innerWidth, window.innerHeight)}, 7 | uInvWindow : { type : "v2", value: new THREE.Vector2(1/window.innerWidth, 1/window.innerHeight)}, 8 | uTexture: { type: "t", value : null } 9 | } 10 | 11 | super({ uniforms : uniforms, vertexShader : glslify("../pass.vert"), fragmentShader: glslify("./shader.frag")}); 12 | } 13 | } -------------------------------------------------------------------------------- /sketches/theme/fluid/app-2dFluid/materials/div/shader.frag: -------------------------------------------------------------------------------- 1 | uniform sampler2D uTexture; 2 | uniform vec2 uWindow; 3 | uniform vec2 uInvWindow; 4 | 5 | varying vec2 vUv; 6 | 7 | void main(){ 8 | vec2 tc = vUv; 9 | float n = 512.; 10 | float h = 1.0/n; 11 | 12 | vec4 t = texture2D(uTexture, tc); 13 | t.r -= (texture2D(uTexture, vec2(tc.r + h, tc.g)).a - t.a)*n; 14 | t.g -= (texture2D(uTexture, vec2(tc.r, tc.g + h)).a - t.a)*n; 15 | gl_FragColor = t; 16 | } -------------------------------------------------------------------------------- /sketches/theme/fluid/app-2dFluid/materials/force/mat.js: -------------------------------------------------------------------------------- 1 | var glslify = require('glslify'); 2 | 3 | export default class CustomGeometry extends THREE.ShaderMaterial { 4 | constructor(){ 5 | var uniforms = { 6 | uWindow : { type : "v2", value: new THREE.Vector2(window.innerWidth, window.innerHeight)}, 7 | uC : { type : "f", value: 0.001 }, 8 | uTexture: { type: "t", value : null } 9 | } 10 | 11 | super({ uniforms : uniforms, vertexShader : glslify("../pass.vert"), fragmentShader: glslify("./shader.frag")}); 12 | } 13 | } -------------------------------------------------------------------------------- /sketches/theme/fluid/app-2dFluid/materials/force/shader.frag: -------------------------------------------------------------------------------- 1 | uniform sampler2D uTexture; 2 | uniform float uC; 3 | uniform vec2 uWindow; 4 | 5 | varying vec2 vUv; 6 | 7 | void main(){ 8 | vec2 tc =vUv; 9 | float h = 1.0/512.; 10 | vec4 t = texture2D(uTexture, tc); 11 | t.g += uC*(t.b + texture2D(uTexture, vec2(tc.r, tc.g + h)).b ); 12 | gl_FragColor = t; 13 | } -------------------------------------------------------------------------------- /sketches/theme/fluid/app-2dFluid/materials/pass.vert: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | vUv = uv; 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 6 | } -------------------------------------------------------------------------------- /sketches/theme/fluid/app-2dFluid/materials/pressure/mat.js: -------------------------------------------------------------------------------- 1 | var glslify = require('glslify'); 2 | 3 | export default class CustomGeometry extends THREE.ShaderMaterial { 4 | constructor(){ 5 | var uniforms = { 6 | uWindow : { type : "v2", value: new THREE.Vector2(window.innerWidth, window.innerHeight)}, 7 | uInvWindow : { type : "v2", value: new THREE.Vector2(1/window.innerWidth, 1/window.innerHeight)}, 8 | uTexture: { type: "t", value : null } 9 | } 10 | 11 | super({ uniforms : uniforms, vertexShader : glslify("../pass.vert"), fragmentShader: glslify("./shader.frag")}); 12 | } 13 | } -------------------------------------------------------------------------------- /sketches/theme/fluid/app-2dFluid/materials/pressure/shader.frag: -------------------------------------------------------------------------------- 1 | uniform sampler2D uTexture; 2 | uniform vec2 uWindow; 3 | uniform vec2 uInvWindow; 4 | 5 | varying vec2 vUv; 6 | 7 | void main(){ 8 | vec4 t = texture2D(uTexture, vUv); 9 | vec2 tc = vUv; 10 | float w = 1.0/512.;//uInvWindow.x; 11 | float h = 1.0/512.; //uInvWindow.y; 12 | 13 | t.a = 14 | (texture2D(uTexture, vec2(tc.r - w, tc.g)).a + 15 | texture2D(uTexture, vec2(tc.r + w, tc.g)).a + 16 | texture2D(uTexture, vec2(tc.r, tc.g - h)).a + 17 | texture2D(uTexture, vec2(tc.r, tc.g + h)).a - 18 | (t.r - texture2D(uTexture, vec2(tc.r - w, tc.g)).r + 19 | t.g - texture2D(uTexture, vec2(tc.r, tc.g - h)).g) *h) *.25; 20 | 21 | gl_FragColor = t; 22 | } -------------------------------------------------------------------------------- /sketches/theme/fluid/app-2dFluid/materials/show/mat.js: -------------------------------------------------------------------------------- 1 | var glslify = require('glslify'); 2 | 3 | export default class CustomGeometry extends THREE.ShaderMaterial { 4 | constructor(){ 5 | var uniforms = { 6 | samp : {type : "t", value : null } 7 | } 8 | 9 | super({ uniforms : uniforms, vertexShader : glslify("../pass.vert"), fragmentShader: glslify("./shader.frag")}); 10 | } 11 | } -------------------------------------------------------------------------------- /sketches/theme/fluid/app-2dFluid/materials/show/shader.frag: -------------------------------------------------------------------------------- 1 | 2 | varying vec2 vUv; 3 | uniform sampler2D samp; 4 | 5 | void main() { 6 | float ttt = texture2D(samp, vUv).b; 7 | 8 | if(ttt > 0.) gl_FragColor = vec4(ttt, 0., 0., 1.); 9 | else gl_FragColor = vec4(0., 0., -ttt, 1.); 10 | } -------------------------------------------------------------------------------- /sketches/theme/fluid/app-2dFluid/materials/source/mat.js: -------------------------------------------------------------------------------- 1 | var glslify = require('glslify'); 2 | 3 | export default class CustomShaderMaterial extends THREE.ShaderMaterial { 4 | constructor(){ 5 | var uniforms = { 6 | samp : { 7 | type : "t", 8 | value : null 9 | }, 10 | samp2 : { 11 | type : "t", 12 | value : null 13 | } 14 | } 15 | 16 | super({ uniforms : uniforms, vertexShader : glslify("../pass.vert"), fragmentShader: glslify("./shader.frag")}); 17 | } 18 | } -------------------------------------------------------------------------------- /sketches/theme/fluid/app-2dFluid/materials/source/shader.frag: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | uniform sampler2D samp; 4 | uniform sampler2D samp2; 5 | 6 | void main() { 7 | vec4 t = texture2D(samp,vUv); 8 | t.b += texture2D(samp2, vUv).b; 9 | gl_FragColor = t; 10 | } -------------------------------------------------------------------------------- /sketches/theme/fluid/app/display/shader.frag: -------------------------------------------------------------------------------- 1 | 2 | varying vec2 vUv; 3 | uniform sampler2D tDiffuse; 4 | 5 | void main(){ 6 | gl_FragColor = texture2D(tDiffuse, vUv); 7 | // gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0); 8 | } -------------------------------------------------------------------------------- /sketches/theme/fluid/app/display/shader.vert: -------------------------------------------------------------------------------- 1 | 2 | varying vec2 vUv; 3 | 4 | void main(){ 5 | vUv = uv; 6 | 7 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 8 | } 9 | -------------------------------------------------------------------------------- /sketches/theme/fluid/app/fluid/slabop/base.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var glslify = require('glslify'); 3 | 4 | module.exports = (function(){ 5 | var Base = function(fs, uniforms){ 6 | var geometry = new THREE.PlaneBufferGeometry(2, 2); 7 | var material = new THREE.ShaderMaterial({ 8 | uniforms : uniforms, 9 | vertexShader : glslify("../../display/shader.vert"), 10 | fragmentShader : fs, 11 | depthWrite : false, 12 | depthTest : false, 13 | blending : THREE.NoBlending 14 | }); 15 | var quad = new THREE.Mesh(geometry, material); 16 | 17 | this.camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1); 18 | this.scene = new THREE.Scene(); 19 | this.scene.add(quad); 20 | }; 21 | 22 | return Base; 23 | 24 | })(); -------------------------------------------------------------------------------- /sketches/theme/fluid/app/fluid/slabop/index.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | Advect : require('./advect'), 3 | Divergence : require('./divergence'), 4 | Jacobi : require('./jacobi'), 5 | Gradient : require('./gradient') 6 | } -------------------------------------------------------------------------------- /sketches/theme/fluid/app/fluid/slabop/shaders/advect.frag: -------------------------------------------------------------------------------- 1 | uniform sampler2D velocity; 2 | uniform sampler2D advected; 3 | 4 | uniform vec2 gridSize; 5 | uniform float gridScale; 6 | 7 | uniform float timestep; 8 | uniform float dissipation; 9 | 10 | vec2 bilerp(sampler2D d, vec2 p){ 11 | vec4 ij; // i0, j0, i1, j1 12 | ij.xy = floor(p - 0.5) + 0.5; 13 | ij.zw = ij.xy + 1.0; 14 | 15 | vec4 uv = ij / gridSize.xyxy; 16 | vec2 d11 = texture2D(d, uv.xy).xy; 17 | vec2 d21 = texture2D(d, uv.zy).xy; 18 | vec2 d12 = texture2D(d, uv.xw).xy; 19 | vec2 d22 = texture2D(d, uv.zw).xy; 20 | 21 | vec2 a = p - ij.xy; 22 | 23 | return mix(mix(d11, d21, a.x), mix(d12, d22, a.x), a.y); 24 | } 25 | 26 | void main(){ 27 | vec2 uv = gl_FragCoord.xy / gridSize.xy; 28 | float scale = 1.0 / gridScale; 29 | 30 | vec2 p = gl_FragCoord.xy - timestep * scale * texture2D(velocity, uv).xy; 31 | 32 | gl_FragColor = vec4(dissipation * bilerp(advected, p), 0.0, 1.0); 33 | } 34 | -------------------------------------------------------------------------------- /sketches/theme/fluid/app/fluid/slabop/shaders/divergence.frag: -------------------------------------------------------------------------------- 1 | uniform sampler2D velocity; 2 | 3 | uniform vec2 gridSize; 4 | uniform float gridScale; 5 | 6 | void main(){ 7 | vec2 uv = gl_FragCoord.xy / gridSize.xy; 8 | 9 | vec2 xOffset = vec2(1.0 / gridSize.x, 0.0); 10 | vec2 yOffset = vec2(0.0, 1.0 / gridSize.y); 11 | 12 | float vl = texture2D(velocity, uv - xOffset).x; 13 | float vr = texture2D(velocity, uv + xOffset).x; 14 | float vb = texture2D(velocity, uv - yOffset).y; 15 | float vt = texture2D(velocity, uv + yOffset).y; 16 | 17 | float scale = 0.5 / gridScale; 18 | float divergence = scale * (vr - vl + vt - vb); 19 | 20 | gl_FragColor = vec4(divergence, 0.0, 0.0, 1.0); 21 | } -------------------------------------------------------------------------------- /sketches/theme/fluid/app/fluid/slabop/shaders/gradient.frag: -------------------------------------------------------------------------------- 1 | uniform sampler2D p; 2 | uniform sampler2D w; 3 | 4 | uniform vec2 gridSize; 5 | uniform float gridScale; 6 | 7 | void main() 8 | { 9 | vec2 uv = gl_FragCoord.xy / gridSize.xy; 10 | 11 | vec2 xOffset = vec2(1.0 / gridSize.x, 0.0); 12 | vec2 yOffset = vec2(0.0, 1.0 / gridSize.y); 13 | 14 | float pl = texture2D(p, uv - xOffset).x; 15 | float pr = texture2D(p, uv + xOffset).x; 16 | float pb = texture2D(p, uv - yOffset).x; 17 | float pt = texture2D(p, uv + yOffset).x; 18 | 19 | float scale = 0.5 / gridScale; 20 | vec2 gradient = scale * vec2(pr - pl, pt - pb); 21 | 22 | vec2 wc = texture2D(w, uv).xy; 23 | 24 | gl_FragColor = vec4(wc - gradient, 0.0, 1.0); 25 | } 26 | -------------------------------------------------------------------------------- /sketches/theme/fluid/app/fluid/slabop/shaders/jacobiscalar.frag: -------------------------------------------------------------------------------- 1 | uniform sampler2D x; 2 | uniform sampler2D b; 3 | 4 | uniform vec2 gridSize; 5 | 6 | uniform float alpha; 7 | uniform float beta; 8 | 9 | void main() 10 | { 11 | vec2 uv = gl_FragCoord.xy / gridSize.xy; 12 | 13 | vec2 xOffset = vec2(1.0 / gridSize.x, 0.0); 14 | vec2 yOffset = vec2(0.0, 1.0 / gridSize.y); 15 | 16 | float xl = texture2D(x, uv - xOffset).x; 17 | float xr = texture2D(x, uv + xOffset).x; 18 | float xb = texture2D(x, uv - yOffset).x; 19 | float xt = texture2D(x, uv + yOffset).x; 20 | 21 | float bc = texture2D(b, uv).x; 22 | 23 | gl_FragColor = vec4((xl + xr + xb + xt + alpha * bc) / beta, 0.0, 0.0, 1.0); 24 | } 25 | -------------------------------------------------------------------------------- /sketches/theme/fluid/app/index.js: -------------------------------------------------------------------------------- 1 | require('./app'); -------------------------------------------------------------------------------- /sketches/theme/fluid/app/shaders/advect.frag: -------------------------------------------------------------------------------- 1 | uniform sampler2D velocity; 2 | uniform sampler2D target; 3 | 4 | uniform vec2 uWindow; 5 | 6 | vec3 bilerpVec3(sampler2D d, vec2 p){ 7 | vec4 ij; // i0, j0, i1, j1 8 | ij.xy = floor(p - 0.5) + 0.5; 9 | ij.zw = ij.xy + 1.0; 10 | 11 | vec4 uv = ij / uWindow.xyxy; 12 | vec3 d11 = texture2D(d, uv.xy).rgb; 13 | vec3 d21 = texture2D(d, uv.zy).rgb; 14 | vec3 d12 = texture2D(d, uv.xw).rgb; 15 | vec3 d22 = texture2D(d, uv.zw).rgb; 16 | 17 | vec2 a = p - ij.xy; 18 | 19 | return mix(mix(d11, d21, a.x), mix(d12, d22, a.x), a.y); 20 | } 21 | 22 | void main(){ 23 | vec2 uv = gl_FragCoord.xy / uWindow.xy; 24 | vec2 p = gl_FragCoord.xy - texture2D(velocity, uv).xy; 25 | vec4 outputPos = vec4( bilerpVec3(target, p), 1.0); 26 | 27 | gl_FragColor = outputPos; 28 | } 29 | -------------------------------------------------------------------------------- /sketches/theme/fluid/app00/display/shader.frag: -------------------------------------------------------------------------------- 1 | 2 | varying vec2 vUv; 3 | uniform sampler2D tDiffuse; 4 | 5 | void main(){ 6 | gl_FragColor = texture2D(tDiffuse, vUv); 7 | // gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0); 8 | } -------------------------------------------------------------------------------- /sketches/theme/fluid/app00/display/shader.vert: -------------------------------------------------------------------------------- 1 | 2 | varying vec2 vUv; 3 | 4 | void main(){ 5 | vUv = uv; 6 | 7 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 8 | } 9 | -------------------------------------------------------------------------------- /sketches/theme/fluid/app00/fluid/slabop/base.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var glslify = require('glslify'); 3 | 4 | module.exports = (function(){ 5 | var Base = function(fs, uniforms){ 6 | var geometry = new THREE.PlaneBufferGeometry(2, 2); 7 | var material = new THREE.ShaderMaterial({ 8 | uniforms : uniforms, 9 | vertexShader : glslify("../../display/shader.vert"), 10 | fragmentShader : fs, 11 | depthWrite : false, 12 | depthTest : false, 13 | blending : THREE.NoBlending 14 | }); 15 | var quad = new THREE.Mesh(geometry, material); 16 | 17 | this.camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1); 18 | this.scene = new THREE.Scene(); 19 | this.scene.add(quad); 20 | }; 21 | 22 | return Base; 23 | 24 | })(); -------------------------------------------------------------------------------- /sketches/theme/fluid/app00/fluid/slabop/index.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | Advect : require('./advect'), 3 | Divergence : require('./divergence'), 4 | Jacobi : require('./jacobi'), 5 | Gradient : require('./gradient') 6 | } -------------------------------------------------------------------------------- /sketches/theme/fluid/app00/fluid/slabop/shaders/advect.frag: -------------------------------------------------------------------------------- 1 | uniform sampler2D velocity; 2 | uniform sampler2D advected; 3 | 4 | uniform vec2 gridSize; 5 | uniform float gridScale; 6 | 7 | uniform float timestep; 8 | uniform float dissipation; 9 | 10 | vec2 bilerp(sampler2D d, vec2 p){ 11 | vec4 ij; // i0, j0, i1, j1 12 | ij.xy = floor(p - 0.5) + 0.5; 13 | ij.zw = ij.xy + 1.0; 14 | 15 | vec4 uv = ij / gridSize.xyxy; 16 | vec2 d11 = texture2D(d, uv.xy).xy; 17 | vec2 d21 = texture2D(d, uv.zy).xy; 18 | vec2 d12 = texture2D(d, uv.xw).xy; 19 | vec2 d22 = texture2D(d, uv.zw).xy; 20 | 21 | vec2 a = p - ij.xy; 22 | 23 | return mix(mix(d11, d21, a.x), mix(d12, d22, a.x), a.y); 24 | } 25 | 26 | void main(){ 27 | vec2 uv = gl_FragCoord.xy / gridSize.xy; 28 | float scale = 1.0 / gridScale; 29 | 30 | vec2 p = gl_FragCoord.xy - timestep * scale * texture2D(velocity, uv).xy; 31 | 32 | gl_FragColor = vec4(dissipation * bilerp(advected, p), 0.0, 1.0); 33 | } 34 | -------------------------------------------------------------------------------- /sketches/theme/fluid/app00/fluid/slabop/shaders/divergence.frag: -------------------------------------------------------------------------------- 1 | uniform sampler2D velocity; 2 | 3 | uniform vec2 gridSize; 4 | uniform float gridScale; 5 | 6 | void main(){ 7 | vec2 uv = gl_FragCoord.xy / gridSize.xy; 8 | 9 | vec2 xOffset = vec2(1.0 / gridSize.x, 0.0); 10 | vec2 yOffset = vec2(0.0, 1.0 / gridSize.y); 11 | 12 | float vl = texture2D(velocity, uv - xOffset).x; 13 | float vr = texture2D(velocity, uv + xOffset).x; 14 | float vb = texture2D(velocity, uv - yOffset).y; 15 | float vt = texture2D(velocity, uv + yOffset).y; 16 | 17 | float scale = 0.5 / gridScale; 18 | float divergence = scale * (vr - vl + vt - vb); 19 | 20 | gl_FragColor = vec4(divergence, 0.0, 0.0, 1.0); 21 | } -------------------------------------------------------------------------------- /sketches/theme/fluid/app00/fluid/slabop/shaders/gradient.frag: -------------------------------------------------------------------------------- 1 | uniform sampler2D p; 2 | uniform sampler2D w; 3 | 4 | uniform vec2 gridSize; 5 | uniform float gridScale; 6 | 7 | void main() 8 | { 9 | vec2 uv = gl_FragCoord.xy / gridSize.xy; 10 | 11 | vec2 xOffset = vec2(1.0 / gridSize.x, 0.0); 12 | vec2 yOffset = vec2(0.0, 1.0 / gridSize.y); 13 | 14 | float pl = texture2D(p, uv - xOffset).x; 15 | float pr = texture2D(p, uv + xOffset).x; 16 | float pb = texture2D(p, uv - yOffset).x; 17 | float pt = texture2D(p, uv + yOffset).x; 18 | 19 | float scale = 0.5 / gridScale; 20 | vec2 gradient = scale * vec2(pr - pl, pt - pb); 21 | 22 | vec2 wc = texture2D(w, uv).xy; 23 | 24 | gl_FragColor = vec4(wc - gradient, 0.0, 1.0); 25 | } 26 | -------------------------------------------------------------------------------- /sketches/theme/fluid/app00/fluid/slabop/shaders/jacobiscalar.frag: -------------------------------------------------------------------------------- 1 | uniform sampler2D x; 2 | uniform sampler2D b; 3 | 4 | uniform vec2 gridSize; 5 | 6 | uniform float alpha; 7 | uniform float beta; 8 | 9 | void main() 10 | { 11 | vec2 uv = gl_FragCoord.xy / gridSize.xy; 12 | 13 | vec2 xOffset = vec2(1.0 / gridSize.x, 0.0); 14 | vec2 yOffset = vec2(0.0, 1.0 / gridSize.y); 15 | 16 | float xl = texture2D(x, uv - xOffset).x; 17 | float xr = texture2D(x, uv + xOffset).x; 18 | float xb = texture2D(x, uv - yOffset).x; 19 | float xt = texture2D(x, uv + yOffset).x; 20 | 21 | float bc = texture2D(b, uv).x; 22 | 23 | gl_FragColor = vec4((xl + xr + xb + xt + alpha * bc) / beta, 0.0, 0.0, 1.0); 24 | } 25 | -------------------------------------------------------------------------------- /sketches/theme/fluid/app00/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by kenjisaito on 4/30/16. 3 | */ 4 | 5 | require('./app') 6 | -------------------------------------------------------------------------------- /sketches/theme/fluid/app00/shaders/advect.frag: -------------------------------------------------------------------------------- 1 | uniform sampler2D velocity; 2 | uniform sampler2D target; 3 | 4 | uniform vec2 uWindow; 5 | 6 | vec3 bilerpVec3(sampler2D d, vec2 p){ 7 | vec4 ij; // i0, j0, i1, j1 8 | ij.xy = floor(p - 0.5) + 0.5; 9 | ij.zw = ij.xy + 1.0; 10 | 11 | vec4 uv = ij / uWindow.xyxy; 12 | vec3 d11 = texture2D(d, uv.xy).rgb; 13 | vec3 d21 = texture2D(d, uv.zy).rgb; 14 | vec3 d12 = texture2D(d, uv.xw).rgb; 15 | vec3 d22 = texture2D(d, uv.zw).rgb; 16 | 17 | vec2 a = p - ij.xy; 18 | 19 | return mix(mix(d11, d21, a.x), mix(d12, d22, a.x), a.y); 20 | } 21 | 22 | void main(){ 23 | vec2 uv = gl_FragCoord.xy / uWindow.xy; 24 | vec2 p = gl_FragCoord.xy - texture2D(velocity, uv).xy; 25 | vec4 outputPos = vec4( bilerpVec3(target, p), 1.0); 26 | 27 | gl_FragColor = outputPos; 28 | } 29 | -------------------------------------------------------------------------------- /sketches/theme/fluid/app00temp00/display/shader.frag: -------------------------------------------------------------------------------- 1 | 2 | varying vec2 vUv; 3 | uniform sampler2D tDiffuse; 4 | 5 | void main(){ 6 | gl_FragColor = texture2D(tDiffuse, vUv); 7 | // gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0); 8 | } -------------------------------------------------------------------------------- /sketches/theme/fluid/app00temp00/display/shader.vert: -------------------------------------------------------------------------------- 1 | 2 | varying vec2 vUv; 3 | 4 | void main(){ 5 | vUv = uv; 6 | 7 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 8 | } 9 | -------------------------------------------------------------------------------- /sketches/theme/fluid/app00temp00/fluid/slabop/base.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var glslify = require('glslify'); 3 | 4 | module.exports = (function(){ 5 | var Base = function(fs, uniforms){ 6 | var geometry = new THREE.PlaneBufferGeometry(2, 2); 7 | var material = new THREE.ShaderMaterial({ 8 | uniforms : uniforms, 9 | vertexShader : glslify("../../display/shader.vert"), 10 | fragmentShader : fs, 11 | depthWrite : false, 12 | depthTest : false, 13 | blending : THREE.NoBlending 14 | }); 15 | var quad = new THREE.Mesh(geometry, material); 16 | 17 | this.camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1); 18 | this.scene = new THREE.Scene(); 19 | this.scene.add(quad); 20 | }; 21 | 22 | return Base; 23 | 24 | })(); -------------------------------------------------------------------------------- /sketches/theme/fluid/app00temp00/fluid/slabop/index.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | Advect : require('./advect') 3 | } -------------------------------------------------------------------------------- /sketches/theme/fluid/app00temp00/fluid/slabop/shaders/advect.frag: -------------------------------------------------------------------------------- 1 | uniform sampler2D velocity; 2 | uniform sampler2D advected; 3 | 4 | uniform vec2 gridSize; 5 | uniform float gridScale; 6 | 7 | uniform float timestep; 8 | uniform float dissipation; 9 | 10 | vec2 bilerp(sampler2D d, vec2 p){ 11 | vec4 ij; // i0, j0, i1, j1 12 | ij.xy = floor(p - 0.5) + 0.5; 13 | ij.zw = ij.xy + 1.0; 14 | 15 | vec4 uv = ij / gridSize.xyxy; 16 | vec2 d11 = texture2D(d, uv.xy).xy; 17 | vec2 d21 = texture2D(d, uv.zy).xy; 18 | vec2 d12 = texture2D(d, uv.xw).xy; 19 | vec2 d22 = texture2D(d, uv.zw).xy; 20 | 21 | vec2 a = p - ij.xy; 22 | 23 | return mix(mix(d11, d21, a.x), mix(d12, d22, a.x), a.y); 24 | } 25 | 26 | void main(){ 27 | vec2 uv = gl_FragCoord.xy / gridSize.xy; 28 | float scale = 1.0 / gridScale; 29 | 30 | vec2 p = gl_FragCoord.xy - timestep * scale * texture2D(velocity, uv).xy; 31 | 32 | gl_FragColor = vec4(dissipation * bilerp(advected, p), 0.0, 1.0); 33 | } 34 | -------------------------------------------------------------------------------- /sketches/theme/fluid/app00temp00/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by kenjisaito on 4/30/16. 3 | */ 4 | 5 | require('./app') -------------------------------------------------------------------------------- /sketches/theme/fluid/app00temp01/display/shader.frag: -------------------------------------------------------------------------------- 1 | 2 | varying vec2 vUv; 3 | uniform sampler2D tDiffuse; 4 | 5 | void main(){ 6 | gl_FragColor = texture2D(tDiffuse, vUv); 7 | // gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0); 8 | } -------------------------------------------------------------------------------- /sketches/theme/fluid/app00temp01/display/shader.vert: -------------------------------------------------------------------------------- 1 | 2 | varying vec2 vUv; 3 | 4 | void main(){ 5 | vUv = uv; 6 | 7 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 8 | } 9 | -------------------------------------------------------------------------------- /sketches/theme/fluid/app00temp01/fluid/slabop/base.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var glslify = require('glslify'); 3 | 4 | module.exports = (function(){ 5 | var Base = function(fs, uniforms){ 6 | var geometry = new THREE.PlaneBufferGeometry(2, 2); 7 | var material = new THREE.ShaderMaterial({ 8 | uniforms : uniforms, 9 | vertexShader : glslify("../../display/shader.vert"), 10 | fragmentShader : fs, 11 | depthWrite : false, 12 | depthTest : false, 13 | blending : THREE.NoBlending 14 | }); 15 | var quad = new THREE.Mesh(geometry, material); 16 | 17 | this.camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1); 18 | this.scene = new THREE.Scene(); 19 | this.scene.add(quad); 20 | }; 21 | 22 | return Base; 23 | 24 | })(); -------------------------------------------------------------------------------- /sketches/theme/fluid/app00temp01/fluid/slabop/index.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | Advect : require('./advect'), 3 | Divergence : require('./divergence'), 4 | Jacobi : require('./jacobi'), 5 | Gradient : require('./gradient') 6 | } -------------------------------------------------------------------------------- /sketches/theme/fluid/app00temp01/fluid/slabop/shaders/advect.frag: -------------------------------------------------------------------------------- 1 | uniform sampler2D velocity; 2 | uniform sampler2D advected; 3 | 4 | uniform vec2 gridSize; 5 | uniform float gridScale; 6 | 7 | uniform float timestep; 8 | uniform float dissipation; 9 | 10 | vec2 bilerp(sampler2D d, vec2 p){ 11 | vec4 ij; // i0, j0, i1, j1 12 | ij.xy = floor(p - 0.5) + 0.5; 13 | ij.zw = ij.xy + 1.0; 14 | 15 | vec4 uv = ij / gridSize.xyxy; 16 | vec2 d11 = texture2D(d, uv.xy).xy; 17 | vec2 d21 = texture2D(d, uv.zy).xy; 18 | vec2 d12 = texture2D(d, uv.xw).xy; 19 | vec2 d22 = texture2D(d, uv.zw).xy; 20 | 21 | vec2 a = p - ij.xy; 22 | 23 | return mix(mix(d11, d21, a.x), mix(d12, d22, a.x), a.y); 24 | } 25 | 26 | void main(){ 27 | vec2 uv = gl_FragCoord.xy / gridSize.xy; 28 | float scale = 1.0 / gridScale; 29 | 30 | vec2 p = gl_FragCoord.xy - timestep * scale * texture2D(velocity, uv).xy; 31 | 32 | gl_FragColor = vec4(dissipation * bilerp(advected, p), 0.0, 1.0); 33 | } 34 | -------------------------------------------------------------------------------- /sketches/theme/fluid/app00temp01/fluid/slabop/shaders/divergence.frag: -------------------------------------------------------------------------------- 1 | uniform sampler2D velocity; 2 | 3 | uniform vec2 gridSize; 4 | uniform float gridScale; 5 | 6 | void main(){ 7 | vec2 uv = gl_FragCoord.xy / gridSize.xy; 8 | 9 | vec2 xOffset = vec2(1.0 / gridSize.x, 0.0); 10 | vec2 yOffset = vec2(0.0, 1.0 / gridSize.y); 11 | 12 | float vl = texture2D(velocity, uv - xOffset).x; 13 | float vr = texture2D(velocity, uv + xOffset).x; 14 | float vb = texture2D(velocity, uv - yOffset).y; 15 | float vt = texture2D(velocity, uv + yOffset).y; 16 | 17 | float scale = 0.5 / gridScale; 18 | float divergence = scale * (vr - vl + vt - vb); 19 | 20 | gl_FragColor = vec4(divergence, 0.0, 0.0, 1.0); 21 | } -------------------------------------------------------------------------------- /sketches/theme/fluid/app00temp01/fluid/slabop/shaders/gradient.frag: -------------------------------------------------------------------------------- 1 | uniform sampler2D p; 2 | uniform sampler2D w; 3 | 4 | uniform vec2 gridSize; 5 | uniform float gridScale; 6 | 7 | void main() 8 | { 9 | vec2 uv = gl_FragCoord.xy / gridSize.xy; 10 | 11 | vec2 xOffset = vec2(1.0 / gridSize.x, 0.0); 12 | vec2 yOffset = vec2(0.0, 1.0 / gridSize.y); 13 | 14 | float pl = texture2D(p, uv - xOffset).x; 15 | float pr = texture2D(p, uv + xOffset).x; 16 | float pb = texture2D(p, uv - yOffset).x; 17 | float pt = texture2D(p, uv + yOffset).x; 18 | 19 | float scale = 0.5 / gridScale; 20 | vec2 gradient = scale * vec2(pr - pl, pt - pb); 21 | 22 | vec2 wc = texture2D(w, uv).xy; 23 | 24 | gl_FragColor = vec4(wc - gradient, 0.0, 1.0); 25 | } 26 | -------------------------------------------------------------------------------- /sketches/theme/fluid/app00temp01/fluid/slabop/shaders/jacobiscalar.frag: -------------------------------------------------------------------------------- 1 | uniform sampler2D x; 2 | uniform sampler2D b; 3 | 4 | uniform vec2 gridSize; 5 | 6 | uniform float alpha; 7 | uniform float beta; 8 | 9 | void main() 10 | { 11 | vec2 uv = gl_FragCoord.xy / gridSize.xy; 12 | 13 | vec2 xOffset = vec2(1.0 / gridSize.x, 0.0); 14 | vec2 yOffset = vec2(0.0, 1.0 / gridSize.y); 15 | 16 | float xl = texture2D(x, uv - xOffset).x; 17 | float xr = texture2D(x, uv + xOffset).x; 18 | float xb = texture2D(x, uv - yOffset).x; 19 | float xt = texture2D(x, uv + yOffset).x; 20 | 21 | float bc = texture2D(b, uv).x; 22 | 23 | gl_FragColor = vec4((xl + xr + xb + xt + alpha * bc) / beta, 0.0, 0.0, 1.0); 24 | } 25 | -------------------------------------------------------------------------------- /sketches/theme/fluid/app00temp01/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by kenjisaito on 4/30/16. 3 | */ 4 | 5 | require('./app') -------------------------------------------------------------------------------- /sketches/theme/fluid/app01/display/shader.frag: -------------------------------------------------------------------------------- 1 | 2 | varying vec2 vUv; 3 | 4 | uniform vec3 uBaseCol; 5 | uniform sampler2D tDiffuse; 6 | 7 | void main(){ 8 | gl_FragColor = vec4(texture2D(tDiffuse, vUv).rgb + uBaseCol, 1.0); 9 | } -------------------------------------------------------------------------------- /sketches/theme/fluid/app01/display/shader.vert: -------------------------------------------------------------------------------- 1 | 2 | varying vec2 vUv; 3 | 4 | void main(){ 5 | vUv = uv; 6 | 7 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 8 | } 9 | -------------------------------------------------------------------------------- /sketches/theme/fluid/app01/fluid/force/mat.js: -------------------------------------------------------------------------------- 1 | var glslify = require('glslify'); 2 | 3 | export default class ForceMat extends THREE.ShaderMaterial { 4 | constructor() { 5 | var uniforms = { 6 | uMouse: { 7 | value: new THREE.Vector2() 8 | }, 9 | uPrevMouse: { 10 | value: new THREE.Vector2 11 | }, 12 | uMouseDown: { 13 | value: false 14 | }, 15 | uTexture: { 16 | value: null 17 | }, 18 | uWindow : { 19 | value : new THREE.Vector2(window.innerWidth, window.innerHeight) 20 | } 21 | } 22 | super({ 23 | uniforms: uniforms, vertexShader: glslify("./pass.vert"), fragmentShader: glslify("./shader.frag"), 24 | depthTest : false, 25 | side : THREE.DoubleSide 26 | }); 27 | } 28 | } -------------------------------------------------------------------------------- /sketches/theme/fluid/app01/fluid/force/pass.vert: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | vUv = uv; 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 6 | } -------------------------------------------------------------------------------- /sketches/theme/fluid/app01/fluid/slabop/base.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var glslify = require('glslify'); 3 | 4 | module.exports = (function(){ 5 | var Base = function(fs, uniforms){ 6 | var geometry = new THREE.PlaneBufferGeometry(2, 2); 7 | var material = new THREE.ShaderMaterial({ 8 | uniforms : uniforms, 9 | vertexShader : glslify("../../display/shader.vert"), 10 | fragmentShader : fs, 11 | depthWrite : false, 12 | depthTest : false, 13 | blending : THREE.NoBlending 14 | }); 15 | var quad = new THREE.Mesh(geometry, material); 16 | 17 | this.camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1); 18 | this.scene = new THREE.Scene(); 19 | this.scene.add(quad); 20 | }; 21 | 22 | return Base; 23 | 24 | })(); -------------------------------------------------------------------------------- /sketches/theme/fluid/app01/fluid/slabop/index.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | Advect : require('./advect'), 3 | Divergence : require('./divergence'), 4 | Jacobi : require('./jacobi'), 5 | Gradient : require('./gradient'), 6 | Splat : require('./splat') 7 | } -------------------------------------------------------------------------------- /sketches/theme/fluid/app01/fluid/slabop/shaders/divergence.frag: -------------------------------------------------------------------------------- 1 | uniform sampler2D velocity; 2 | 3 | uniform vec2 gridSize; 4 | uniform float gridScale; 5 | 6 | void main(){ 7 | vec2 uv = gl_FragCoord.xy / gridSize.xy; 8 | 9 | vec2 xOffset = vec2(1.0 / gridSize.x, 0.0); 10 | vec2 yOffset = vec2(0.0, 1.0 / gridSize.y); 11 | 12 | float vl = texture2D(velocity, uv - xOffset).x; 13 | float vr = texture2D(velocity, uv + xOffset).x; 14 | float vb = texture2D(velocity, uv - yOffset).y; 15 | float vt = texture2D(velocity, uv + yOffset).y; 16 | 17 | float scale = 0.5 / gridScale; 18 | float divergence = scale * (vr - vl + vt - vb); 19 | 20 | gl_FragColor = vec4(divergence, 0.0, 0.0, 1.0); 21 | } -------------------------------------------------------------------------------- /sketches/theme/fluid/app01/fluid/slabop/shaders/gradient.frag: -------------------------------------------------------------------------------- 1 | uniform sampler2D p; 2 | uniform sampler2D w; 3 | 4 | uniform vec2 gridSize; 5 | uniform float gridScale; 6 | 7 | void main() 8 | { 9 | vec2 uv = gl_FragCoord.xy / gridSize.xy; 10 | 11 | vec2 xOffset = vec2(1.0 / gridSize.x, 0.0); 12 | vec2 yOffset = vec2(0.0, 1.0 / gridSize.y); 13 | 14 | float pl = texture2D(p, uv - xOffset).x; 15 | float pr = texture2D(p, uv + xOffset).x; 16 | float pb = texture2D(p, uv - yOffset).x; 17 | float pt = texture2D(p, uv + yOffset).x; 18 | 19 | float scale = 0.5 / gridScale; 20 | vec2 gradient = scale * vec2(pr - pl, pt - pb); 21 | 22 | vec2 wc = texture2D(w, uv).xy; 23 | 24 | gl_FragColor = vec4(wc - gradient, 0.0, 1.0); 25 | } 26 | -------------------------------------------------------------------------------- /sketches/theme/fluid/app01/fluid/slabop/shaders/jacobiscalar.frag: -------------------------------------------------------------------------------- 1 | uniform sampler2D x; 2 | uniform sampler2D b; 3 | 4 | uniform vec2 gridSize; 5 | 6 | uniform float alpha; 7 | uniform float beta; 8 | 9 | void main() 10 | { 11 | vec2 uv = gl_FragCoord.xy / gridSize.xy; 12 | 13 | vec2 xOffset = vec2(1.0 / gridSize.x, 0.0); 14 | vec2 yOffset = vec2(0.0, 1.0 / gridSize.y); 15 | 16 | float xl = texture2D(x, uv - xOffset).x; 17 | float xr = texture2D(x, uv + xOffset).x; 18 | float xb = texture2D(x, uv - yOffset).x; 19 | float xt = texture2D(x, uv + yOffset).x; 20 | 21 | float bc = texture2D(b, uv).x; 22 | 23 | gl_FragColor = vec4((xl + xr + xb + xt + alpha * bc) / beta, 0.0, 0.0, 1.0); 24 | } 25 | -------------------------------------------------------------------------------- /sketches/theme/fluid/app01/fluid/slabop/shaders/splat.frag: -------------------------------------------------------------------------------- 1 | uniform sampler2D read; 2 | uniform vec2 gridSize; 3 | uniform vec2 point; 4 | uniform vec3 uCol; 5 | uniform float radius; 6 | 7 | 8 | varying vec2 vUv; 9 | 10 | float gauss(vec2 p, float r){ 11 | return exp(-dot(p, p) / r); 12 | } 13 | 14 | void main(){ 15 | vec3 base = texture2D(read, vUv).xyz; 16 | vec2 coord = point.xy - vUv.xy; 17 | vec3 splat = uCol * gauss(coord, gridSize.x * radius * 0.00000001); 18 | vec3 col = base + splat; 19 | // col *= 0.9; 20 | gl_FragColor = vec4(col, 1.0); 21 | //gl_FragColor = vec4(base + 0.01, 1.0); 22 | } -------------------------------------------------------------------------------- /sketches/theme/fluid/app01/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by kenjisaito on 4/30/16. 3 | */ 4 | 5 | require('./app') 6 | -------------------------------------------------------------------------------- /sketches/theme/fluid/app01/shaders/advect.frag: -------------------------------------------------------------------------------- 1 | uniform sampler2D velocity; 2 | uniform sampler2D target; 3 | 4 | uniform vec2 uWindow; 5 | 6 | vec3 bilerpVec3(sampler2D d, vec2 p){ 7 | vec4 ij; // i0, j0, i1, j1 8 | ij.xy = floor(p - 0.5) + 0.5; 9 | ij.zw = ij.xy + 1.0; 10 | 11 | vec4 uv = ij / uWindow.xyxy; 12 | vec3 d11 = texture2D(d, uv.xy).rgb; 13 | vec3 d21 = texture2D(d, uv.zy).rgb; 14 | vec3 d12 = texture2D(d, uv.xw).rgb; 15 | vec3 d22 = texture2D(d, uv.zw).rgb; 16 | 17 | vec2 a = p - ij.xy; 18 | 19 | return mix(mix(d11, d21, a.x), mix(d12, d22, a.x), a.y); 20 | } 21 | 22 | void main(){ 23 | vec2 uv = gl_FragCoord.xy / uWindow.xy; 24 | vec2 p = gl_FragCoord.xy - texture2D(velocity, uv).xy; 25 | vec4 outputPos = vec4( bilerpVec3(target, p), 1.0); 26 | 27 | gl_FragColor = outputPos; 28 | } 29 | -------------------------------------------------------------------------------- /sketches/theme/gallery/gallery00/imageShader/app.js: -------------------------------------------------------------------------------- 1 | var glslify = require('glslify') 2 | 3 | module.exports = { 4 | uniforms: { 5 | "tMain": { type: "t", value: null }, 6 | "tNext": { type: "t", value: null }, 7 | "uImage": { type: "v2", value: new THREE.Vector2(512, 512) }, 8 | "uRate": { type: "f", value: 0.0 }, 9 | "uNext": { type: "f", value: 0.0 } 10 | }, 11 | side: THREE.DoubleSide, 12 | vertexShader : glslify('./shader.vert'), 13 | fragmentShader : glslify('./shader.frag') 14 | }; -------------------------------------------------------------------------------- /sketches/theme/gallery/gallery00/imageShader/shader.frag: -------------------------------------------------------------------------------- 1 | 2 | varying vec2 vUv; 3 | 4 | uniform sampler2D tMain; 5 | uniform sampler2D tNext; 6 | uniform float uRate; 7 | uniform float uNext; 8 | uniform vec2 uImage; 9 | 10 | void main(){ 11 | vec4 col; 12 | 13 | if(uNext < 0.5){ 14 | col = texture2D(tMain, vUv); 15 | }else{ 16 | float curRate = uRate * (1.-uRate) * 4.0; 17 | curRate = clamp(curRate, 0., 1.); 18 | float imgHeight = curRate * uImage.y/100.; 19 | if(imgHeight < 1.0) imgHeight = 1.0; 20 | float yPos = (floor(gl_FragCoord.y / imgHeight) + 0.5) * imgHeight / uImage.y; 21 | float xPos; 22 | if(uNext > 0.75){ 23 | xPos = (vUv.x * (1.-curRate ) + uRate *2. * curRate * curRate * curRate); 24 | }else{ 25 | xPos = (vUv.x * (1.-curRate ) - uRate *2. * curRate * curRate * curRate); 26 | } 27 | xPos = clamp(xPos, 0., 1.); 28 | vec2 vPos = vec2(xPos, yPos); 29 | 30 | float finalRate = clamp(uRate * uRate, 0.0, 1.0); 31 | 32 | vec4 transCol = texture2D(tMain, vPos ) * (1.-finalRate) + texture2D(tNext, vPos ) * finalRate; 33 | col = transCol;// * (1. - curRate) + blackCol * (curRate); 34 | } 35 | 36 | gl_FragColor = col; 37 | } -------------------------------------------------------------------------------- /sketches/theme/gallery/gallery00/imageShader/shader.vert: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main(){ 4 | vUv = uv; 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 6 | } -------------------------------------------------------------------------------- /sketches/theme/gallery/gallery01/imagePlanes/base.js: -------------------------------------------------------------------------------- 1 | 2 | var ImageBasee = function( shader, image ){ 3 | var imgSize = 256; 4 | var plane = new THREE.PlaneBufferGeometry( imgSize, imgSize ); 5 | var mat = new THREE.ShaderMaterial(shader); 6 | 7 | THREE.Mesh.call(this, plane, mat ); 8 | this.material.uniforms.tMain.value = image; 9 | }; 10 | 11 | ImageBasee.prototype = Object.create(THREE.Mesh.prototype); 12 | ImageBasee.prototype.constructor = ImageBasee; 13 | 14 | 15 | ImageBasee.prototype.update = function(dt, intersect){ 16 | }; 17 | 18 | module.exports = ImageBasee; -------------------------------------------------------------------------------- /sketches/theme/gallery/gallery01/imagePlanes/image0.js: -------------------------------------------------------------------------------- 1 | var MeshBase = require('./base'); 2 | var imageShader = require('./image0Shader/app'); 3 | 4 | var ImagePlane = function( image ){ 5 | 6 | MeshBase.call(this, imageShader, image); 7 | }; 8 | 9 | ImagePlane.prototype = Object.create(MeshBase.prototype); 10 | ImagePlane.prototype.constructor = ImagePlane; 11 | 12 | 13 | ImagePlane.prototype.update = function(dt, intersect){ 14 | 15 | if(intersect && intersect.object == this){ 16 | this.material.uniforms.uMouse.value = intersect.uv; 17 | this.material.uniforms.uRate.value += ( 4.0 - this.material.uniforms.uRate.value) * 0.05; 18 | }else{ 19 | this.material.uniforms.uRate.value += (0.0 - this.material.uniforms.uRate.value) * 0.1; 20 | } 21 | 22 | }; 23 | 24 | module.exports = ImagePlane; -------------------------------------------------------------------------------- /sketches/theme/gallery/gallery01/imagePlanes/image0Shader/app.js: -------------------------------------------------------------------------------- 1 | var glslify = require('glslify') 2 | 3 | module.exports = { 4 | uniforms: { 5 | "tMain": { type: "t", value: null }, 6 | "uRate": { type: "f", value: 0.0 }, 7 | "uNext": { type: "f", value: 0.0 }, 8 | 'uMouse' : { type: "v2", value: new THREE.Vector2(-9999, -9999)} 9 | }, 10 | side: THREE.DoubleSide, 11 | vertexShader : glslify('./shader.vert'), 12 | fragmentShader : glslify('./shader.frag') 13 | }; -------------------------------------------------------------------------------- /sketches/theme/gallery/gallery01/imagePlanes/image0Shader/shader.frag: -------------------------------------------------------------------------------- 1 | 2 | varying vec2 vUv; 3 | 4 | uniform sampler2D tMain; 5 | uniform float uRate; 6 | uniform float uNext; 7 | uniform vec2 uMouse; 8 | 9 | void main(){ 10 | vec4 col; 11 | 12 | if(uMouse.x > 10.){ 13 | col = texture2D(tMain, vUv); 14 | }else{ 15 | col = texture2D(tMain, vUv+ vec2( abs( length( uMouse - vUv) - 0.5 ) / 2. * uRate )); 16 | } 17 | 18 | gl_FragColor = col; 19 | } -------------------------------------------------------------------------------- /sketches/theme/gallery/gallery01/imagePlanes/image0Shader/shader.vert: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main(){ 4 | vUv = uv; 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 6 | } -------------------------------------------------------------------------------- /sketches/theme/gallery/gallery01/imagePlanes/image1.js: -------------------------------------------------------------------------------- 1 | var MeshBase = require('./base'); 2 | var imageShader = require('./image1Shader/app'); 3 | 4 | var ImagePlane = function( image ){ 5 | 6 | MeshBase.call(this, imageShader, image); 7 | }; 8 | 9 | ImagePlane.prototype = Object.create(MeshBase.prototype); 10 | ImagePlane.prototype.constructor = ImagePlane; 11 | 12 | 13 | ImagePlane.prototype.update = function(dt, intersect){ 14 | this.material.uniforms.tTime.value = dt; 15 | 16 | if(intersect && intersect.object == this){ 17 | this.material.uniforms.uMouse.value = intersect.uv; 18 | this.material.uniforms.uRate.value += ( 1.0 - this.material.uniforms.uRate.value) * 0.05; 19 | }else{ 20 | this.material.uniforms.uRate.value += (0.0 - this.material.uniforms.uRate.value) * 0.1; 21 | } 22 | 23 | }; 24 | 25 | module.exports = ImagePlane; -------------------------------------------------------------------------------- /sketches/theme/gallery/gallery01/imagePlanes/image1Shader/app.js: -------------------------------------------------------------------------------- 1 | var glslify = require('glslify') 2 | 3 | module.exports = { 4 | uniforms: { 5 | "tMain": { type: "t", value: null }, 6 | "uRate": { type: "f", value: 0.0 }, 7 | "uNext": { type: "f", value: 0.0 }, 8 | "tTime": { type: "f", value: 0.0 }, 9 | 'uMouse' : { type: "v2", value: new THREE.Vector2(-9999, -9999)} 10 | }, 11 | side: THREE.DoubleSide, 12 | vertexShader : glslify('./shader.vert'), 13 | fragmentShader : glslify('./shader.frag') 14 | }; -------------------------------------------------------------------------------- /sketches/theme/gallery/gallery01/imagePlanes/image1Shader/shader.frag: -------------------------------------------------------------------------------- 1 | 2 | varying vec2 vUv; 3 | 4 | uniform sampler2D tMain; 5 | uniform float uRate; 6 | uniform float tTime; 7 | uniform vec2 uMouse; 8 | 9 | 10 | /** 11 | void main(){ 12 | vec4 col; 13 | 14 | if(uMouse.x > 10.){ 15 | col = texture2D(tMain, vUv); 16 | }else{ 17 | col = texture2D(tMain, vUv+ vec2( abs( length( uMouse - vUv) - 0.5 ) / 2. * uRate )); 18 | } 19 | 20 | gl_FragColor = col; 21 | } */ 22 | 23 | vec2 getDistortion(vec2 uv, float d, float t) { 24 | 25 | uv.x += (0.1 + uRate)/10. * cos(d + t * 0.9) * uRate; 26 | uv.y += (0.1 + uRate)/10. * sin(d + t * 0.75) * uRate; 27 | return uv; 28 | } 29 | 30 | vec4 getDistortedTexture(sampler2D iChannel, vec2 uv) { 31 | vec4 rgb = texture2D(iChannel, uv); 32 | return rgb; 33 | } 34 | 35 | void main(){ 36 | vec2 mid = vec2(0.5,0.5); 37 | vec2 focus = uMouse; 38 | float d1 = distance(focus+sin(tTime * 0.25) * 0.5,vUv); 39 | //float d2 = distance(focus+cos(tTime),vUv); 40 | vec4 rgb = getDistortedTexture( tMain, getDistortion(vUv, d1, tTime)); 41 | 42 | // rgb.r /= d2; 43 | // rgb.g += -0.5 + d1; 44 | // rgb.b = -0.5 + (d1 + d2) / 2.0; 45 | // vec4 col = uRate * rgb + (1. - uRate) * texture2D(tMain, vUv); 46 | 47 | gl_FragColor = rgb; 48 | } -------------------------------------------------------------------------------- /sketches/theme/gallery/gallery01/imagePlanes/image1Shader/shader.vert: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main(){ 4 | vUv = uv; 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 6 | } -------------------------------------------------------------------------------- /sketches/theme/gallery/gallery01/imagePlanes/image2.js: -------------------------------------------------------------------------------- 1 | var MeshBase = require('./base'); 2 | var imageShader = require('./image2Shader/app'); 3 | 4 | var ImagePlane = function( image ){ 5 | 6 | MeshBase.call(this, imageShader, image); 7 | }; 8 | 9 | ImagePlane.prototype = Object.create(MeshBase.prototype); 10 | ImagePlane.prototype.constructor = ImagePlane; 11 | 12 | 13 | ImagePlane.prototype.update = function(dt, intersect){ 14 | this.material.uniforms.tTime.value = dt; 15 | 16 | if(intersect && intersect.object == this){ 17 | this.material.uniforms.uMouse.value = intersect.uv; 18 | this.material.uniforms.uRate.value += ( 1.0 - this.material.uniforms.uRate.value) * 0.05; 19 | }else{ 20 | this.material.uniforms.uRate.value += (0.0 - this.material.uniforms.uRate.value) * 0.1; 21 | } 22 | 23 | }; 24 | 25 | module.exports = ImagePlane; -------------------------------------------------------------------------------- /sketches/theme/gallery/gallery01/imagePlanes/image2Shader/app.js: -------------------------------------------------------------------------------- 1 | var glslify = require('glslify') 2 | 3 | module.exports = { 4 | uniforms: { 5 | "tMain": { type: "t", value: null }, 6 | "uRate": { type: "f", value: 0.0 }, 7 | "uNext": { type: "f", value: 0.0 }, 8 | "tTime": { type: "f", value: 0.0 }, 9 | 'uMouse' : { type: "v2", value: new THREE.Vector2(-9999, -9999)} 10 | }, 11 | side: THREE.DoubleSide, 12 | vertexShader : glslify('./shader.vert'), 13 | fragmentShader : glslify('./shader.frag') 14 | }; -------------------------------------------------------------------------------- /sketches/theme/gallery/gallery01/imagePlanes/image2Shader/shader.vert: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main(){ 4 | vUv = uv; 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 6 | } -------------------------------------------------------------------------------- /sketches/theme/gallery/gallery02/shader.frag: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | uniform float uTime; 4 | uniform float uColorDiffuse; 5 | uniform sampler2D bgTexture; 6 | uniform sampler2D noise1; 7 | uniform sampler2D noise2; 8 | uniform sampler2D noise3; 9 | 10 | void main() { 11 | vec4 noise1 = texture2D(noise1, vUv); 12 | vec4 noise2 = texture2D(noise2, vUv); 13 | vec4 noise3 = texture2D(noise3, vUv); 14 | vec2 texPos = clamp( vec2(vUv.x, vUv.y * (1.0 - uTime * uColorDiffuse)) + uColorDiffuse * uTime * (vec2(noise1.x, noise2.y) - vec2(0.5)), vec2(0), vec2(1.)); 15 | vec4 bgCol = texture2D(bgTexture, texPos); 16 | 17 | float uScale = 0.6; 18 | float uScroll = 0.4; 19 | float alpha = clamp( uScale * noise3.y + 1.0 + uScroll * vUv.y - (1.0 + uScale + uScroll) * uTime , 0.0, 1.0); 20 | // vec3 color = mix( vec3(1.), bgCol.rgb, ); 21 | 22 | gl_FragColor = vec4(bgCol.rgb, alpha * (2.0 - alpha) ); 23 | } 24 | -------------------------------------------------------------------------------- /sketches/theme/gallery/gallery02/shader.vert: -------------------------------------------------------------------------------- 1 | 2 | varying vec2 vUv; 3 | 4 | void main(){ 5 | vUv = uv; 6 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 7 | } -------------------------------------------------------------------------------- /sketches/theme/gallery/gallery02/utils.js: -------------------------------------------------------------------------------- 1 | 2 | export function fitImage (width, height, imageW, imageH) { 3 | var sizes = {}; 4 | sizes.w = width; 5 | var ratio = sizes.w/imageW; 6 | sizes.h = Math.round(imageH * ratio); 7 | sizes.margin = 0; 8 | 9 | if (sizes.h < height) { 10 | sizes.h = height; 11 | ratio = sizes.h/imageH; 12 | sizes.w = Math.round(imageW * ratio); 13 | sizes.margin = -(sizes.w - width)/2; 14 | } 15 | 16 | return sizes; 17 | }; -------------------------------------------------------------------------------- /sketches/theme/geometry/animation-geometry/shader/flake.frag: -------------------------------------------------------------------------------- 1 | uniform sampler2D tMap; 2 | 3 | varying float vTime; 4 | varying float vAlpha; 5 | 6 | void main() { 7 | vec2 uv = vec2(gl_PointCoord.x, 1.0 - gl_PointCoord.y); 8 | vec4 texel = texture2D(tMap, uv); 9 | 10 | if(vTime < 0.0) texel.a *= 0.0; 11 | else if(vTime > 3.0) texel.a *= vAlpha * clamp((5.0 - vTime), 0.0, 1.0) * 0.6; 12 | else texel.a *= vAlpha * 0.6; 13 | 14 | 15 | gl_FragColor = texel; 16 | } -------------------------------------------------------------------------------- /sketches/theme/geometry/animation-geometry/shader/flake.vert: -------------------------------------------------------------------------------- 1 | uniform float size; 2 | uniform sampler2D tColor; 3 | 4 | attribute float scale; 5 | attribute float alpha; 6 | attribute float time; 7 | 8 | varying float vAlpha; 9 | varying float vTime; 10 | 11 | #pragma glslify: range = require(ks-glsl-utils/range); 12 | void main() { 13 | vec4 mvPosition = modelViewMatrix * vec4(position, 1.0); 14 | gl_PointSize = (size * scale) * (1000.0 / length(mvPosition.xyz)); 15 | gl_Position = projectionMatrix * mvPosition; 16 | 17 | float fade = smoothstep(900.0, 600.0, position.y); 18 | 19 | vAlpha = alpha * fade ; 20 | vTime = time; 21 | } -------------------------------------------------------------------------------- /sketches/theme/geometry/animation-geometry/snow-mesh.js: -------------------------------------------------------------------------------- 1 | import SnowFallGeometry from "./snow-fall-geometry"; 2 | import SnowFallMaterial from "./snow-fall-material"; 3 | 4 | export default class SnowMesh extends THREE.Points { 5 | constructor(){ 6 | super(new SnowFallGeometry(), new SnowFallMaterial()); 7 | 8 | this.material.transparent = true; 9 | } 10 | update(dt){ 11 | this.geometry.update(dt); 12 | } 13 | } -------------------------------------------------------------------------------- /sketches/theme/geometry/animation-geometry/snow-particle.js: -------------------------------------------------------------------------------- 1 | var SnowParticle = function(){ 2 | this.reset() 3 | }; 4 | 5 | SnowParticle.prototype.update = function(){ 6 | if(this.interval > 0){ 7 | this.interval -= 1/60; 8 | this.isVisible = false; 9 | return; 10 | } 11 | 12 | this.isVisible = true; 13 | this.time += 1/60; 14 | this.theta += this.time; 15 | //this.rad += this.velRad ; 16 | 17 | this.x = this.rad * Math.cos(this.theta) + this.initX; 18 | this.y = this.rad * Math.sin(this.theta) + this.initY; 19 | 20 | if(this.time > this.lifeSpan) this.reset(); 21 | }; 22 | 23 | SnowParticle.prototype.reset = function(){ 24 | this.rad = 20; 25 | this.theta = Math.PI * 2 * Math.random(); 26 | this.velRad = 0.4 + 0.8 * Math.random(); 27 | 28 | this.initX = 300; 29 | this.initY = 300; 30 | 31 | this.time = 0; 32 | this.lifeSpan = 1 + 1 * Math.random(); 33 | this.interval = 3 * Math.random() ; 34 | }; 35 | 36 | 37 | module.exports = SnowParticle; 38 | 39 | -------------------------------------------------------------------------------- /sketches/theme/geometry/animation-geometry/snow-wrapper-object.js: -------------------------------------------------------------------------------- 1 | var SnowField = require('./snow-field'); 2 | import SnowMesh from "./snow-mesh"; 3 | 4 | 5 | export default class snowWrapperObject extends THREE.Object3D { 6 | constructor(){ 7 | super(); 8 | 9 | this.time = 0; 10 | 11 | this.snowField = new SnowField(); 12 | this.add(this.snowField); 13 | 14 | this.snowMesh = new SnowMesh(); 15 | this.add(this.snowMesh); 16 | 17 | } 18 | update(dt){ 19 | this.time += dt * 1.5; 20 | 21 | this.position.y = Math.cos(this.time) * 20; 22 | 23 | this.snowField.update(dt); 24 | this.snowMesh.update(dt); 25 | } 26 | } -------------------------------------------------------------------------------- /sketches/theme/gpgpu/gpgpu-basic1/_old/point/pointMesh.js: -------------------------------------------------------------------------------- 1 | import PointGeometry from "./particleGeometry"; 2 | import PointShaderMaterial from "./pointShaderMat"; 3 | 4 | export default class PointMesh extends THREE.Points { 5 | constructor(gpgpuTex){ 6 | super(new PointGeometry(gpgpuTex), new PointShaderMaterial()); 7 | } 8 | update(tex){ 9 | this.material.uniforms.tMap.value = tex; 10 | } 11 | } -------------------------------------------------------------------------------- /sketches/theme/gpgpu/gpgpu-basic1/_old/point/pointShaderMat.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by kenjisaito on 2/18/16. 3 | */ 4 | 5 | var glslify = require('glslify'); 6 | 7 | export default class PointShaderMaterial extends THREE.ShaderMaterial{ 8 | constructor(){ 9 | 10 | var uniforms = { 11 | tMap : { 12 | type : "t", 13 | value : null 14 | }, 15 | uWindow : { 16 | type : "v2", 17 | value : new THREE.Vector2(window.innerWidth, window.innerHeight) 18 | } 19 | }; 20 | 21 | super({ uniforms : uniforms, vertexShader : glslify("./shader/shader.vert"), fragmentShader: glslify("./shader/shader.frag") }); 22 | this.uniforms = uniforms; 23 | this.transparent = true; 24 | } 25 | } -------------------------------------------------------------------------------- /sketches/theme/gpgpu/gpgpu-basic1/_old/point/shader/shader.frag: -------------------------------------------------------------------------------- 1 | precision highp float; 2 | 3 | varying vec2 vUv; 4 | varying vec3 vCurPos; 5 | //uniform sampler2D tVelocity; 6 | uniform sampler2D tMap; 7 | 8 | void main(){ 9 | // vec4 velocity = texture2D(tMap, vUv); 10 | // vec4 tPosition = texture2D(tPosition, vUv); 11 | // 12 | // vec4 position = tPosition + velocity/100.; 13 | // position *= 0.95; 14 | 15 | gl_FragColor = vec4(vCurPos, 1.0) ; //vec4(1.0, 0.0, 0.0, 1.0); 16 | } -------------------------------------------------------------------------------- /sketches/theme/gpgpu/gpgpu-basic1/_old/point/shader/shader.vert: -------------------------------------------------------------------------------- 1 | precision highp float; 2 | 3 | varying vec2 vUv; 4 | varying vec3 vCurPos; 5 | uniform sampler2D tMat; 6 | uniform vec2 uWindow; 7 | 8 | void main(){ 9 | vUv = uv; 10 | 11 | // texture2D(tVelocity, vUv); 12 | vec3 pos = texture2D( tMat , position.xy ).rgb ; 13 | pos = (pos.rgb - vec3(0.5)) * vec3(uWindow, 512.); 14 | 15 | gl_Position = projectionMatrix * modelViewMatrix * vec4( pos.rgb, 1.0 ); 16 | // gl_PointSize = 3.0/(2. + pos.b); 17 | vec3 dif = cameraPosition - pos.xyz; 18 | 19 | gl_PointSize = 1.0; // * min( 5. , 50. / length( dif )); 20 | vCurPos = vec3(1.0, 0.0, 0.0);//pos.rgb/10.; 21 | 22 | } 23 | -------------------------------------------------------------------------------- /sketches/theme/gpgpu/gpgpu-basic1/_old/texture/shader/shader.frag: -------------------------------------------------------------------------------- 1 | 2 | varying vec2 vUv; 3 | uniform sampler2D tDiffuse; 4 | 5 | void main(){ 6 | gl_FragColor = texture2D(tDiffuse, vUv); 7 | // gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0); 8 | } -------------------------------------------------------------------------------- /sketches/theme/gpgpu/gpgpu-basic1/_old/texture/shader/shader.vert: -------------------------------------------------------------------------------- 1 | 2 | varying vec2 vUv; 3 | 4 | void main(){ 5 | vUv = uv; 6 | 7 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 8 | } 9 | -------------------------------------------------------------------------------- /sketches/theme/gpgpu/gpgpu-basic1/_old/velocity/shader.frag: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | uniform sampler2D tVelocity; 3 | uniform sampler2D tPosition; 4 | 5 | void main(){ 6 | 7 | vec4 tPosition = texture2D(tPosition, vUv); 8 | vec4 velocity = texture2D(tVelocity, vUv); 9 | 10 | vec4 position = tPosition + velocity/100.; 11 | // position *= 0.95; 12 | 13 | gl_FragColor = vec4(position.rgb, 1.0); 14 | } -------------------------------------------------------------------------------- /sketches/theme/gpgpu/gpgpu-basic1/_old/velocity/shader.vert: -------------------------------------------------------------------------------- 1 | 2 | varying vec2 vUv; 3 | 4 | void main(){ 5 | vUv = uv; 6 | 7 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 8 | } -------------------------------------------------------------------------------- /sketches/theme/gpgpu/gpgpu-basic1/gpuRenderer/shaders/pass/shader.frag: -------------------------------------------------------------------------------- 1 | uniform sampler2D texture; 2 | varying vec2 vUv; 3 | 4 | void main(){ 5 | gl_FragColor = texture2D(texture, vUv); 6 | } -------------------------------------------------------------------------------- /sketches/theme/gpgpu/gpgpu-basic1/gpuRenderer/shaders/pass/shader.vert: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | vUv = uv; 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 6 | } -------------------------------------------------------------------------------- /sketches/theme/gpgpu/gpgpu-basic1/shaders/curl.frag: -------------------------------------------------------------------------------- 1 | uniform sampler2D tOPos; 2 | uniform sampler2D tPos; 3 | 4 | uniform float dT; 5 | uniform float noiseSize; 6 | uniform vec2 resolution; 7 | 8 | varying vec2 vUv; 9 | 10 | //$simplex 11 | //$curl 12 | 13 | #pragma glslify:curlNoise = require(glsl-curl-noise) 14 | 15 | float rand(vec2 co){ 16 | return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453); 17 | } 18 | 19 | 20 | void main(){ 21 | 22 | vec2 uv = gl_FragCoord.xy / resolution; 23 | vec4 oPos = texture2D( tOPos , uv ); 24 | vec4 pos = texture2D( tPos , uv ); 25 | 26 | vec3 vel = pos.xyz - oPos.xyz; 27 | 28 | vec3 curl = curlNoise( pos.xyz * noiseSize ); 29 | 30 | vel += curl ; 31 | vel *= .99; // dampening 32 | 33 | 34 | vec3 p = pos.xyz + vel; 35 | p *= 0.98; 36 | // p.y += 0.01; 37 | // p.z += 0.01; 38 | 39 | 40 | gl_FragColor = vec4( p , 1. ); 41 | 42 | 43 | } -------------------------------------------------------------------------------- /sketches/theme/gpgpu/gpgpu-basic1/shaders/lookup.frag: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main(){ 4 | float dis = distance(gl_PointCoord.xy, vec2(0.5, 0.5)); 5 | //vec2 uv = vec2(gl_PointCoord.x, 1.0 - gl_PointCoord.y); 6 | 7 | 8 | gl_FragColor = vec4( 1.0, 1.0, 1.0, clamp(1. - dis * 5., 0., 1.) ); 9 | } 10 | -------------------------------------------------------------------------------- /sketches/theme/gpgpu/gpgpu-basic1/shaders/lookup.vert: -------------------------------------------------------------------------------- 1 | uniform sampler2D tPos; 2 | varying vec2 vUv; 3 | 4 | void main(){ 5 | vUv = uv; 6 | vec4 pos = texture2D( tPos, position.xy ); 7 | vec3 dif = cameraPosition - pos.xyz; 8 | 9 | gl_PointSize = max(min( 100. , 400. / length( dif )), 2.0); 10 | // pos.x = min(pos.x, 10.); 11 | gl_Position = projectionMatrix * modelViewMatrix * vec4( pos.xyz, 1. ); 12 | } 13 | -------------------------------------------------------------------------------- /sketches/theme/gpgpu/gpgpu-basic2/gpuRenderer/shaders/pass/shader.frag: -------------------------------------------------------------------------------- 1 | uniform sampler2D texture; 2 | varying vec2 vUv; 3 | 4 | void main(){ 5 | gl_FragColor = texture2D(texture, vUv); 6 | } -------------------------------------------------------------------------------- /sketches/theme/gpgpu/gpgpu-basic2/gpuRenderer/shaders/pass/shader.vert: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | vUv = uv; 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 6 | } -------------------------------------------------------------------------------- /sketches/theme/gpgpu/gpgpu-basic2/lookUpMesh/implement.js: -------------------------------------------------------------------------------- 1 | var glslify = require('glslify'); 2 | import CustomGeometry from "./geometry"; 3 | 4 | 5 | module.exports = { 6 | initialize : function(opts){ 7 | this.uniforms = opts.uniforms; 8 | this.geometry = new CustomGeometry({width: 600, height: 600, widthSegment : opts.size, heightSegment: opts.size }); 9 | 10 | this.material = new THREE.ShaderMaterial({ 11 | uniforms : this.uniforms, 12 | vertexShader : glslify("../shaders/pass.vert"), 13 | fragmentShader : glslify("../shaders/pass.frag"), 14 | side : THREE.DoubleSide, 15 | transparent : true 16 | }); 17 | // this.material = new THREE.MeshBasicMaterial({ color : 0xffff00, wireframe: true, side: THREE.DoubleSide }) 18 | // new THREE.MeshBasicMaterial({ color: 0x0000ff, wireframe: true, side: THREE.DoubleSide })); 19 | 20 | // console.log('?'); 21 | }, 22 | update : function(){ 23 | // this.rotation.y += 0.01; 24 | } 25 | } -------------------------------------------------------------------------------- /sketches/theme/gpgpu/gpgpu-basic2/lookUpMesh/index.js: -------------------------------------------------------------------------------- 1 | var _ = require('lodash'); 2 | var Implement = require('./implement'); 3 | 4 | module.exports = (function() { 5 | var LookUpMesh = function(opts){ 6 | this.initialize(opts); 7 | THREE.Mesh.call(this, this.geometry, this.material); 8 | // console.log(this); 9 | 10 | // this.scale.x = window.innerWidth; 11 | // this.scale.y = window.innerHeight; 12 | this.rotation.set(Math.PI/2, 0, 0); 13 | } 14 | 15 | LookUpMesh.prototype = Object.create(THREE.Mesh.prototype); 16 | 17 | _.extend(LookUpMesh.prototype, { 18 | geometry : null, 19 | matrerial : null, 20 | initialize : Implement.initialize, 21 | update : Implement.update 22 | }); 23 | 24 | 25 | return LookUpMesh; 26 | })(); -------------------------------------------------------------------------------- /sketches/theme/gpgpu/gpgpu-basic2/shaders/curl.frag: -------------------------------------------------------------------------------- 1 | uniform sampler2D tOPos; 2 | uniform sampler2D tPos; 3 | 4 | uniform float dT; 5 | uniform float noiseSize; 6 | uniform float damping; 7 | uniform float friction; 8 | uniform vec2 resolution; 9 | 10 | varying vec2 vUv; 11 | 12 | //$simplex 13 | //$curl 14 | 15 | #pragma glslify:curlNoise = require(glsl-curl-noise) 16 | 17 | float rand(vec2 co){ 18 | return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453); 19 | } 20 | 21 | 22 | void main(){ 23 | 24 | vec2 uv = gl_FragCoord.xy / resolution; 25 | vec4 oPos = texture2D( tOPos , uv ); 26 | vec4 pos = texture2D( tPos , uv ); 27 | 28 | vec3 vel = pos.xyz - oPos.xyz; 29 | 30 | vec3 curl = curlNoise( pos.xyz * noiseSize ); 31 | 32 | vel += curl; 33 | vel *= damping; // dampening 34 | 35 | 36 | vec3 p = pos.xyz + vel; 37 | p *= friction; 38 | // p.x += 0.01; 39 | // p.y += 0.01; 40 | // p.z += 0.01; 41 | 42 | 43 | gl_FragColor = vec4( p , 1. ); 44 | 45 | 46 | } -------------------------------------------------------------------------------- /sketches/theme/gpgpu/gpgpu-basic2/shaders/pass.frag: -------------------------------------------------------------------------------- 1 | uniform sampler2D texture; 2 | varying vec2 vUv; 3 | 4 | void main(){ 5 | gl_FragColor = vec4(0.1, 0.0, texture2D(texture, vUv).r/80., 1.0); 6 | } -------------------------------------------------------------------------------- /sketches/theme/gpgpu/gpgpu-basic2/shaders/pass.vert: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | uniform sampler2D tPos; 3 | 4 | void main() { 5 | vUv = uv; 6 | 7 | vec4 pos = texture2D( tPos, uv.xy ); 8 | vec4 outputPos = vec4(position.x + pos.x, position.y + pos.y, position.z + pos.z, 1.0); 9 | gl_Position = projectionMatrix * modelViewMatrix * outputPos; 10 | } -------------------------------------------------------------------------------- /sketches/theme/gpgpu/gpgpu-basic2/swapRenderer/index.js: -------------------------------------------------------------------------------- 1 | var Implement = require('./implement'); 2 | var _ = require('lodash'); 3 | 4 | module.exports = (function(){ 5 | var SwapRenderer = function(opts){if(this.initialize) this.initialize(opts) }; 6 | 7 | THREE.EventDispatcher.prototype.apply( SwapRenderer.prototype ); 8 | 9 | /** property and method **/ 10 | 11 | _.extend(SwapRenderer.prototype, { 12 | size : 128, 13 | initialize : Implement.initialize , 14 | createTexturePassProgram : Implement.createTexturePassProgram, 15 | update : Implement.update, 16 | render : Implement.render, 17 | pass : Implement.pass, 18 | out : Implement.out, 19 | reset : Implement.reset, 20 | resetRand : Implement.resetRand, 21 | }); 22 | 23 | 24 | return SwapRenderer; 25 | 26 | }); -------------------------------------------------------------------------------- /sketches/theme/gpgpu/gpgpu-basic2/swapRenderer/shaders/pass/shader.frag: -------------------------------------------------------------------------------- 1 | uniform sampler2D texture; 2 | varying vec2 vUv; 3 | 4 | void main(){ 5 | gl_FragColor = texture2D(texture, vUv); 6 | } -------------------------------------------------------------------------------- /sketches/theme/gpgpu/gpgpu-basic2/swapRenderer/shaders/pass/shader.vert: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | vUv = uv; 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 6 | } -------------------------------------------------------------------------------- /sketches/theme/gpgpu/gpgpu-basic2/utils/create/geometry.js: -------------------------------------------------------------------------------- 1 | module.exports = function(size){ 2 | var geo = new THREE.BufferGeometry(); 3 | var positions = new Float32Array( size * size * 3 ); 4 | 5 | for ( var i = 0, j = 0, l = positions.length / 3; i < l; i ++, j += 3 ) { 6 | 7 | positions[ j ] = ( i % size ) / size; 8 | positions[ j + 1 ] = Math.floor( i / size ) / size; 9 | 10 | } 11 | 12 | var posAtt = new THREE.BufferAttribute( positions , 3 ); 13 | geo.addAttribute( 'position', posAtt ); 14 | 15 | return geo; 16 | 17 | }; -------------------------------------------------------------------------------- /sketches/theme/gpgpu/gpgpu-swap-renderer/gpuRenderer/shaders/pass/shader.frag: -------------------------------------------------------------------------------- 1 | uniform sampler2D texture; 2 | varying vec2 vUv; 3 | 4 | void main(){ 5 | gl_FragColor = texture2D(texture, vUv); 6 | } -------------------------------------------------------------------------------- /sketches/theme/gpgpu/gpgpu-swap-renderer/gpuRenderer/shaders/pass/shader.vert: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | vUv = uv; 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 6 | } -------------------------------------------------------------------------------- /sketches/theme/gpgpu/gpgpu-swap-renderer/lookUpMesh/index.js: -------------------------------------------------------------------------------- 1 | var _ = require('lodash'); 2 | var Implement = require('./implement'); 3 | 4 | module.exports = (function() { 5 | var LookUpMesh = function(opts){ 6 | this.initialize(opts); 7 | THREE.Mesh.call(this, this.geometry, this.material); 8 | // console.log(this); 9 | 10 | // this.scale.x = window.innerWidth; 11 | // this.scale.y = window.innerHeight; 12 | // this.rotation.set(Math.PI/2, 0, 0); 13 | } 14 | 15 | LookUpMesh.prototype = Object.create(THREE.Mesh.prototype); 16 | 17 | _.extend(LookUpMesh.prototype, { 18 | geometry : null, 19 | matrerial : null, 20 | initialize : Implement.initialize, 21 | update : Implement.update, 22 | resetRand : Implement.resetRand 23 | }); 24 | 25 | 26 | return LookUpMesh; 27 | })(); -------------------------------------------------------------------------------- /sketches/theme/gpgpu/gpgpu-swap-renderer/shaders/curl.frag: -------------------------------------------------------------------------------- 1 | uniform sampler2D tOPos; 2 | uniform sampler2D tPos; 3 | 4 | uniform float dT; 5 | uniform float noiseSize; 6 | uniform float damping; 7 | uniform float friction; 8 | uniform vec2 resolution; 9 | 10 | varying vec2 vUv; 11 | 12 | //$simplex 13 | //$curl 14 | 15 | #pragma glslify:curlNoise = require(glsl-curl-noise) 16 | 17 | float rand(vec2 co){ 18 | return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453); 19 | } 20 | 21 | 22 | void main(){ 23 | 24 | vec2 uv = gl_FragCoord.xy / resolution; 25 | vec4 oPos = texture2D( tOPos , uv ); 26 | vec4 pos = texture2D( tPos , uv ); 27 | 28 | vec3 vel = pos.xyz - oPos.xyz; 29 | 30 | vec3 curl = curlNoise( pos.xyz * noiseSize ); 31 | 32 | vel += curl; 33 | vel *= damping; // dampening 34 | 35 | 36 | vec3 p = pos.xyz + vel; 37 | p *= friction; 38 | // p.x += 0.01; 39 | // p.y += 0.01; 40 | // p.z += 0.01; 41 | 42 | 43 | gl_FragColor = vec4( p , 1. ); 44 | 45 | 46 | } -------------------------------------------------------------------------------- /sketches/theme/gpgpu/gpgpu-swap-renderer/shaders/pass.frag: -------------------------------------------------------------------------------- 1 | uniform sampler2D texture; 2 | varying vec2 vUv; 3 | 4 | void main(){ 5 | gl_FragColor = vec4(texture2D(texture, vUv).rgb, 1.0); 6 | } -------------------------------------------------------------------------------- /sketches/theme/gpgpu/gpgpu-swap-renderer/shaders/pass.vert: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | uniform sampler2D texture; 3 | 4 | void main() { 5 | vUv = uv; 6 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position.xyz, 1.0); 7 | } -------------------------------------------------------------------------------- /sketches/theme/gpgpu/gpgpu-swap-renderer/swapRenderer/index.js: -------------------------------------------------------------------------------- 1 | var Implement = require('./implement'); 2 | var _ = require('lodash'); 3 | 4 | module.exports = (function(){ 5 | var SwapRenderer = function(opts){if(this.initialize) this.initialize(opts) }; 6 | 7 | THREE.EventDispatcher.prototype.apply( SwapRenderer.prototype ); 8 | 9 | /** property and method **/ 10 | 11 | _.extend(SwapRenderer.prototype, { 12 | size : 128, 13 | initialize : Implement.initialize , 14 | createTexturePassProgram : Implement.createTexturePassProgram, 15 | update : Implement.update, 16 | render : Implement.render, 17 | pass : Implement.pass, 18 | out : Implement.out, 19 | reset : Implement.reset, 20 | resetRand : Implement.resetRand, 21 | createDebugScene : Implement.createDebugScene 22 | }); 23 | 24 | 25 | return SwapRenderer; 26 | 27 | })(); -------------------------------------------------------------------------------- /sketches/theme/gpgpu/gpgpu-swap-renderer/swapRenderer/shaders/pass/shader.frag: -------------------------------------------------------------------------------- 1 | uniform sampler2D texture; 2 | uniform sampler2D tVelocity; 3 | uniform float uSize; 4 | varying vec2 vUv; 5 | 6 | void main(){ 7 | float unit = 1.0 / uSize; 8 | vec3 col = texture2D(texture, vUv).rgb; 9 | vec4 leftVel = texture2D(tVelocity, vUv - vec2(unit, 0.)); 10 | vec4 rightVel= texture2D(tVelocity, vUv + vec2(unit, 0.)); 11 | vec4 topVel= texture2D(tVelocity, vUv + vec2(0., unit)); 12 | vec4 botVel= texture2D(tVelocity, vUv - vec2(0., unit)); 13 | 14 | vec4 div = (rightVel - leftVel + topVel - botVel)/2.0; 15 | vec2 dDiv = div.xy; 16 | 17 | vec3 getCol = texture2D(texture, vUv - dDiv).rgb; 18 | 19 | // vec3 colO = texture2D(tVelocity, vUv).rgb; 20 | 21 | // vec4 outputCol = col; 22 | gl_FragColor = vec4( col + getCol/10., 1.0); 23 | } -------------------------------------------------------------------------------- /sketches/theme/gpgpu/gpgpu-swap-renderer/swapRenderer/shaders/pass/shader.vert: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | vUv = uv; 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 6 | } -------------------------------------------------------------------------------- /sketches/theme/gpgpu/gpgpu-swap-renderer/utils/create/geometry.js: -------------------------------------------------------------------------------- 1 | module.exports = function(size){ 2 | var geo = new THREE.BufferGeometry(); 3 | var positions = new Float32Array( size * size * 3 ); 4 | 5 | for ( var i = 0, j = 0, l = positions.length / 3; i < l; i ++, j += 3 ) { 6 | 7 | positions[ j ] = ( i % size ) / size; 8 | positions[ j + 1 ] = Math.floor( i / size ) / size; 9 | 10 | } 11 | 12 | var posAtt = new THREE.BufferAttribute( positions , 3 ); 13 | geo.addAttribute( 'position', posAtt ); 14 | 15 | return geo; 16 | 17 | }; -------------------------------------------------------------------------------- /sketches/theme/light/9999-point-light#00/effect.vert: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main(){ 4 | vUv = uv; 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 6 | } -------------------------------------------------------------------------------- /sketches/theme/light/9999-point-light#00/ray.frag: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | uniform sampler2D tDiffuse; 4 | 5 | uniform float fX; 6 | uniform float fY; 7 | uniform float fExposure; 8 | uniform float fDecay; 9 | uniform float fDensity; 10 | uniform float fWeight; 11 | uniform float fClamp; 12 | 13 | const int iSamples = 20; 14 | 15 | void main() { 16 | vec2 deltaTextCoord = vec2(vUv - vec2(fX, fY)); 17 | deltaTextCoord *= 1.0 / float(iSamples) * fDensity; 18 | vec2 coord = vUv; 19 | float illuminationDecay = 1.0; 20 | 21 | vec4 FragColor = vec4(0.0); 22 | 23 | coord -= deltaTextCoord; 24 | vec4 texel = texture2D(tDiffuse, coord); 25 | FragColor += texel; 26 | 27 | /** 28 | for (int i = 0; i < iSamples; i++) { 29 | coord -= deltaTextCoord; 30 | vec4 texel = texture2D(tDiffuse, coord); 31 | texel *= illuminationDecay * fWeight; 32 | 33 | FragColor += texel; 34 | 35 | illuminationDecay *= fDecay; 36 | } 37 | 38 | FragColor *= fExposure; 39 | FragColor = clamp(FragColor, 0.0, fClamp); */ 40 | gl_FragColor = FragColor; 41 | } -------------------------------------------------------------------------------- /sketches/theme/light/9999-point-light#00/ray.js: -------------------------------------------------------------------------------- 1 | 2 | THREE.GodRay = { 3 | uniforms : { 4 | tDiffuse: { 5 | type: "t", 6 | value: null 7 | }, 8 | fX: { 9 | type: "f", 10 | value: 0.5 11 | }, 12 | fY: { 13 | type: "f", 14 | value: 1.1 15 | }, 16 | fExposure: { 17 | type: "f", 18 | value: 2.9 19 | }, 20 | fDecay: { 21 | type: "f", 22 | value: 0.93 23 | }, 24 | fDensity: { 25 | type: "f", 26 | value: 0.96 27 | }, 28 | fWeight: { 29 | type: "f", 30 | value: 0.9 31 | }, 32 | fClamp: { 33 | type: "f", 34 | value: 1 35 | } 36 | }, 37 | vertexShader : require('./effect.vert')(), 38 | fragmentShader : require('./ray.frag')() 39 | }; -------------------------------------------------------------------------------- /sketches/theme/noise/noise01/shader.vert: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | vUv = uv; 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 6 | } -------------------------------------------------------------------------------- /sketches/theme/paint/brush02/line-mesh.js: -------------------------------------------------------------------------------- 1 | import CustomGeometry from "./line-mesh-geometry"; 2 | 3 | export default class Mesh extends THREE.Mesh { 4 | constructor(){ 5 | // super( new CustomGeometry({width: 200, height: 200, widthSegment : 4, heightSegment: 4 }), new THREE.MeshBasicMaterial({ color: 0x0000ff, wireframe: true, side: THREE.DoubleSide })); 6 | 7 | } 8 | updateLoop(dt){ 9 | // this.geometry.updateLoop(dt); 10 | } 11 | 12 | } -------------------------------------------------------------------------------- /sketches/theme/paint/brush02/sketch-geometry.js: -------------------------------------------------------------------------------- 1 | export default class SketchGeometry extends THREE.Geometry { 2 | constructor() { 3 | super(); 4 | 5 | this.quadVerts = []; 6 | this.quadUVs = []; 7 | this.vertIndex = 0; 8 | this.quadCount = 0; 9 | 10 | 11 | } 12 | updateGeometry( xx, yy ){ 13 | 14 | } 15 | } -------------------------------------------------------------------------------- /sketches/theme/paint/brush03/polyline-miter-util.js: -------------------------------------------------------------------------------- 1 | var THREE = require('three'); 2 | 3 | module.exports = { 4 | computeMiter : function( lineA, lineB ){ 5 | 6 | var tan = lineA.clone().add(lineB).normalize(); 7 | var miter = new THREE.Vector2(-tan.y, tan.x); 8 | var tmp = new THREE.Vector2(-lineA.y, lineA.x); 9 | 10 | return {miterLength: 1/ miter.dot(tmp), miter : miter, tangent : tan}; 11 | }, 12 | 13 | normal : function (dir) { 14 | return dir.clone().set(-dir.y, dir.x) 15 | }, 16 | direction : function( pointA, pointB ){ 17 | var dirLine = pointB.clone().sub(pointA); 18 | dirLine = dirLine.normalize(); 19 | return dirLine; 20 | } 21 | } -------------------------------------------------------------------------------- /sketches/theme/particle-system/particle01/config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | pageAnimationHeight : 800, 3 | pageHeight : {min: -5000, max: 1500}, 4 | pageWidth : {min: -2000, max: 2000}, 5 | pageDepth : {min: 1500, max: 2000}, 6 | pageFrontDepth : {min: 2400, max: 2700}, 7 | rad : {z: 2750, x: 1000, y: 1000 } 8 | }; -------------------------------------------------------------------------------- /sketches/theme/particle-system/particle01/line-shader.frag: -------------------------------------------------------------------------------- 1 | varying float zDepth; 2 | 3 | void main() { 4 | vec4 color; 5 | 6 | float alpha = clamp(zDepth/2700. * 10., 0.0, 1.); 7 | color = vec4(70./255., 79./255., 87./255., alpha * alpha * 0.6); 8 | 9 | 10 | gl_FragColor = color; 11 | } -------------------------------------------------------------------------------- /sketches/theme/particle-system/particle01/line-shader.vert: -------------------------------------------------------------------------------- 1 | varying float zDepth; 2 | 3 | void main() { 4 | vec4 worldPosition = modelMatrix * vec4(position, 1.0); // + vec4( , 1.0); 5 | vec4 mvPosition = viewMatrix * worldPosition; //vec4( worldPosition , 1.0 ); 6 | zDepth = abs(mvPosition.z); 7 | 8 | gl_Position = projectionMatrix * mvPosition; 9 | } -------------------------------------------------------------------------------- /sketches/theme/particle-system/particle01/post-effect.frag: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | uniform sampler2D tDiffuse; 4 | uniform sampler2D bgTex; 5 | uniform float uOpacity; 6 | 7 | uniform vec2 uWindow; 8 | 9 | // 1400 * 790 10 | 11 | float getOpacity(float dis){ 12 | float opacity; 13 | float rad = uWindow.x * 0.3; 14 | if(dis < rad){ 15 | // opacity = 0.8; 16 | // }else if(dis < uWindow.x / 10. * 2.){ 17 | opacity = mix(0.3, .0, dis/rad ); 18 | }else { 19 | opacity = 0.0; 20 | } 21 | 22 | return opacity ; 23 | } 24 | 25 | void main() { 26 | vec4 texel = texture2D( tDiffuse, vUv ); 27 | 28 | vec4 bgTexel = vec4( 5./255., 92./255., 182./255., 1. ); 29 | 30 | 31 | float dis = distance( gl_FragCoord.xy, vec2(0.5 * uWindow.x, uWindow.y - 10. - 1000. * (uOpacity - 1.)) ); 32 | float opacity = getOpacity(dis) * uOpacity; 33 | 34 | 35 | gl_FragColor = bgTexel * opacity + texel; 36 | } 37 | -------------------------------------------------------------------------------- /sketches/theme/particle-system/particle01/post-effect.vert: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main(){ 4 | vUv = uv; 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 6 | } -------------------------------------------------------------------------------- /sketches/theme/particle-system/particle01/postEffect.js: -------------------------------------------------------------------------------- 1 | var glslify = require('glslify'); 2 | 3 | module.exports = { 4 | uniforms: { 5 | "tDiffuse": { type: "t", value: null }, 6 | "bgTex" : { type: "t", value: null }, 7 | "uWindow" : { type: "v2", value: null }, 8 | "uOpacity" : { type: "f", value: null }, 9 | }, 10 | vertexShader : glslify('./post-effect.vert'), 11 | fragmentShader : glslify('./post-effect.frag') 12 | }; -------------------------------------------------------------------------------- /sketches/theme/particle-system/particle01/shader.frag: -------------------------------------------------------------------------------- 1 | uniform sampler2D texture0; 2 | uniform sampler2D texture1; 3 | uniform sampler2D texture2; 4 | uniform sampler2D texture3; 5 | 6 | varying float vRandomTexture; 7 | varying float zDepth; 8 | 9 | void main() { 10 | vec4 color; 11 | 12 | if(vRandomTexture < 0.25) color = texture2D( texture0, gl_PointCoord ); 13 | else if(vRandomTexture < 0.50) color = texture2D( texture1, gl_PointCoord ); 14 | else if(vRandomTexture < 0.75) color = texture2D( texture2, gl_PointCoord ); 15 | else color = texture2D( texture3, gl_PointCoord ); 16 | 17 | float alpha = clamp(zDepth/2700. * 10., 0.0, 1.); 18 | color = vec4(color.r * 70./255., color.g * 79./255., color.b * 87./255., alpha * color.a * alpha); 19 | 20 | gl_FragColor = color; 21 | 22 | } -------------------------------------------------------------------------------- /sketches/theme/particle-system/particle01/shader.vert: -------------------------------------------------------------------------------- 1 | uniform float amplitude; 2 | //uniform float uTime; 3 | 4 | attribute float randomTexture; 5 | //attribute vec3 velocity; 6 | //attribute vec3 customColor; 7 | 8 | varying float vRandomTexture; 9 | varying float zDepth; 10 | 11 | void main() { 12 | vec4 worldPosition = modelMatrix * vec4(position, 1.0); // + vec4( , 1.0); 13 | vec4 mvPosition = viewMatrix * worldPosition; //vec4( worldPosition , 1.0 ); 14 | 15 | //gl_PointSize = size; 16 | gl_PointSize = clamp(8. * clamp(( 300.0 / abs(mvPosition.z)), 0.0, 3.0), 1., 9.); 17 | zDepth = abs(mvPosition.z); 18 | vRandomTexture = randomTexture; 19 | 20 | gl_Position = projectionMatrix * mvPosition; 21 | } -------------------------------------------------------------------------------- /sketches/theme/particles/buffergeometry-particle/BufferGeometry.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/sketches/theme/particles/buffergeometry-particle/BufferGeometry.js -------------------------------------------------------------------------------- /sketches/theme/particles/buffergeometry-particle/shader.frag: -------------------------------------------------------------------------------- 1 | precision highp float; 2 | precision highp int; 3 | 4 | varying vec3 vNormal; 5 | varying vec2 vUv; 6 | 7 | void main(){ 8 | 9 | gl_FragColor = vec4(1.0); 10 | } -------------------------------------------------------------------------------- /sketches/theme/particles/buffergeometry-particle/shader.vert: -------------------------------------------------------------------------------- 1 | precision highp float; 2 | precision highp int; 3 | 4 | attribute vec3 position; 5 | attribute vec2 uv; 6 | attribute vec3 normal; 7 | 8 | uniform mat4 projectionMatrix; 9 | uniform mat4 modelViewMatrix; 10 | 11 | varying vec3 vNormal; 12 | varying vec2 vUv; 13 | 14 | void main(){ 15 | vNormal = normal; 16 | vUv = uv; 17 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position + vec3(uv, 0.0) * 10., 1.0 ); 18 | } -------------------------------------------------------------------------------- /sketches/theme/post-processing/bloom/shaders/quntum-additive/index.js: -------------------------------------------------------------------------------- 1 | var glslify = require('glslify'); 2 | 3 | module.exports = QuntumGodray; 4 | 5 | function QuntumGodray(){ 6 | this.uniforms = { 7 | tDiffuse: { 8 | type: "t", 9 | value: null 10 | }, 11 | tAdd: { 12 | type: "t", 13 | value: null 14 | }, 15 | fCoeff: { 16 | type: "f", 17 | value: 1 18 | } 19 | }; 20 | this.vertexShader = glslify('./shader.vert') 21 | this.fragmentShader = glslify('./shader.frag') 22 | } -------------------------------------------------------------------------------- /sketches/theme/post-processing/bloom/shaders/quntum-additive/shader.frag: -------------------------------------------------------------------------------- 1 | uniform sampler2D tDiffuse; 2 | uniform sampler2D tAdd; 3 | uniform float fCoeff; 4 | 5 | varying vec2 vUv; 6 | 7 | void main() { 8 | vec4 texel = texture2D(tDiffuse, vUv); 9 | vec4 add = texture2D(tAdd, vUv); 10 | gl_FragColor = texel + add * fCoeff; 11 | } -------------------------------------------------------------------------------- /sketches/theme/post-processing/bloom/shaders/quntum-additive/shader.vert: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | vUv = uv; 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | } -------------------------------------------------------------------------------- /sketches/theme/post-processing/godray0/not-working/sources/Utils.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * THREE.Extras.UTils contains extra useful methods 3 | * 4 | * @author Thibaut 'BKcore' Despoulain 5 | * 6 | */ 7 | 8 | THREE = THREE || {}; 9 | THREE.Extras = THREE.Extras || {}; 10 | THREE.Extras.Utils = THREE.Extras.Utils || {}; 11 | 12 | /*! Projects object origin into screen space coordinates using provided camera */ 13 | THREE.Extras.Utils.projectOnScreen = function(object, camera) 14 | { 15 | var mat = new THREE.Matrix4(); 16 | mat.multiply( camera.matrixWorldInverse, object.matrixWorld); 17 | mat.multiply( camera.projectionMatrix , mat); 18 | 19 | var c = mat.n44; 20 | var lPos = new THREE.Vector3(mat.n14/c, mat.n24/c, mat.n34/c); 21 | lPos.multiplyScalar(0.5); 22 | lPos.addScalar(0.5); 23 | return lPos; 24 | } -------------------------------------------------------------------------------- /sketches/theme/post-processing/godray1/shader.frag: -------------------------------------------------------------------------------- 1 | void main() { 2 | gl_FragColor = vec4( 1.0, 0.0, 0.0, 0.5 ); 3 | } -------------------------------------------------------------------------------- /sketches/theme/post-processing/godray1/shader.vert: -------------------------------------------------------------------------------- 1 | void main() { 2 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 3 | } -------------------------------------------------------------------------------- /sketches/theme/post-processing/godray1/shaders/quantum-godray/index.js: -------------------------------------------------------------------------------- 1 | var glslify = require('glslify'); 2 | 3 | module.exports = QuntumGodray; 4 | 5 | function QuntumGodray(){ 6 | this.uniforms = { 7 | tDiffuse: { 8 | type: "t", 9 | value: null 10 | }, 11 | fX: { 12 | type: "f", 13 | value: 0.5 14 | }, 15 | fY: { 16 | type: "f", 17 | value: 0.5 18 | }, 19 | fExposure: { 20 | type: "f", 21 | value: 0.9 22 | }, 23 | fDecay: { 24 | type: "f", 25 | value: 0.93 26 | }, 27 | fDensity: { 28 | type: "f", 29 | value: 0.96 30 | }, 31 | fWeight: { 32 | type: "f", 33 | value: 0.8 34 | }, 35 | fClamp: { 36 | type: "f", 37 | value: 1 38 | }, 39 | }; 40 | this.vertexShader = glslify('./shader.vert'); 41 | this.fragmentShader = glslify('./shader.frag'); 42 | } -------------------------------------------------------------------------------- /sketches/theme/post-processing/godray1/shaders/quantum-godray/shader.frag: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | uniform sampler2D tDiffuse; 4 | 5 | uniform float fX; 6 | uniform float fY; 7 | uniform float fExposure; 8 | uniform float fDecay; 9 | uniform float fDensity; 10 | uniform float fWeight; 11 | uniform float fClamp; 12 | 13 | const int iSamples = 30; 14 | 15 | void main() { 16 | vec2 deltaTextCoord = vec2(vUv - vec2(fX, fY)); 17 | deltaTextCoord *= 1.0 / float(iSamples) * fDensity; 18 | vec2 coord = vUv; 19 | float illuminationDecay = 1.0; 20 | vec4 FragColor = vec4(0.0); 21 | 22 | for (int i = 0; i < iSamples; i++) { 23 | coord -= deltaTextCoord; 24 | vec4 texel = texture2D(tDiffuse, coord); 25 | texel *= illuminationDecay * fWeight; 26 | 27 | FragColor += texel; 28 | 29 | illuminationDecay *= fDecay; 30 | } 31 | 32 | FragColor *= fExposure; 33 | FragColor = clamp(FragColor, 0.0, fClamp); 34 | gl_FragColor = FragColor; 35 | } -------------------------------------------------------------------------------- /sketches/theme/post-processing/godray1/shaders/quantum-godray/shader.vert: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | vUv = uv; 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | } -------------------------------------------------------------------------------- /sketches/theme/post-processing/godray1/shaders/quntum-additive/index.js: -------------------------------------------------------------------------------- 1 | var glslify = require('glslify'); 2 | 3 | module.exports = QuntumGodray; 4 | 5 | function QuntumGodray(){ 6 | this.uniforms = { 7 | tDiffuse: { 8 | type: "t", 9 | value: null 10 | }, 11 | tAdd: { 12 | type: "t", 13 | value: null 14 | }, 15 | fCoeff: { 16 | type: "f", 17 | value: 1 18 | } 19 | }; 20 | this.vertexShader = glslify('./shader.vert') 21 | this.fragmentShader = glslify('./shader.frag') 22 | } -------------------------------------------------------------------------------- /sketches/theme/post-processing/godray1/shaders/quntum-additive/shader.frag: -------------------------------------------------------------------------------- 1 | uniform sampler2D tDiffuse; 2 | uniform sampler2D tAdd; 3 | uniform float fCoeff; 4 | 5 | varying vec2 vUv; 6 | 7 | void main() { 8 | vec4 texel = texture2D(tDiffuse, vUv); 9 | vec4 add = texture2D(tAdd, vUv); 10 | gl_FragColor = texel + add * fCoeff; 11 | } -------------------------------------------------------------------------------- /sketches/theme/post-processing/godray1/shaders/quntum-additive/shader.vert: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | vUv = uv; 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | } -------------------------------------------------------------------------------- /sketches/theme/post-processing/ofx-glitch/shaders/covergence/app.js: -------------------------------------------------------------------------------- 1 | var glslify = require('glslify') 2 | 3 | module.exports = { 4 | uniforms: { 5 | "tDiffuse": { type: "t", value: null }, 6 | "uWindow": { type: "v2", value: null }, 7 | "uRandom": { type: "f", value: 0 } 8 | }, 9 | vertexShader : glslify('./shader.vert'), 10 | fragmentShader : glslify('./shader.frag') 11 | }; -------------------------------------------------------------------------------- /sketches/theme/post-processing/ofx-glitch/shaders/covergence/shader.frag: -------------------------------------------------------------------------------- 1 | 2 | varying vec2 vUv; 3 | 4 | uniform sampler2D tDiffuse; 5 | uniform vec2 uWindow; 6 | uniform float uRandom; 7 | 8 | void main(){ 9 | 10 | vec4 col = texture2D(tDiffuse, vUv); 11 | vec4 col_r = texture2D(tDiffuse, vUv + vec2(-35.0/uWindow.x * uRandom,0.)); 12 | vec4 col_l = texture2D(tDiffuse, vUv + vec2( 35.0/uWindow.x * uRandom,0.)); 13 | vec4 col_g = texture2D(tDiffuse, vUv + vec2( -7.5/uWindow.x * uRandom,0.)); 14 | 15 | col.b = col.b + col_r.b*max(1.0,sin(vUv.y*12.)*2.5)*uRandom; 16 | col.r = col.r + col_l.r*max(1.0,sin(vUv.y*12.)*2.5)*uRandom; 17 | col.g = col.g + col_g.g*max(1.0,sin(vUv.y*12.)*2.5)*uRandom; 18 | 19 | gl_FragColor = col; 20 | } -------------------------------------------------------------------------------- /sketches/theme/post-processing/ofx-glitch/shaders/covergence/shader.vert: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main(){ 4 | vUv = uv; 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 6 | } -------------------------------------------------------------------------------- /sketches/theme/post-processing/ofx-glitch/shaders/cut-slider/app.js: -------------------------------------------------------------------------------- 1 | var glslify = require('glslify') 2 | 3 | module.exports = { 4 | uniforms: { 5 | "tDiffuse": { type: "t", value: null }, 6 | "uWindow": { type: "v2", value: null }, 7 | "uRandom": { type: "f", value: 0 } 8 | }, 9 | vertexShader : glslify('./shader.vert'), 10 | fragmentShader : glslify('./shader.frag') 11 | }; -------------------------------------------------------------------------------- /sketches/theme/post-processing/ofx-glitch/shaders/cut-slider/shader.frag: -------------------------------------------------------------------------------- 1 | 2 | varying vec2 vUv; 3 | 4 | uniform sampler2D tDiffuse; 5 | uniform float uTime; 6 | uniform vec2 uWindow; 7 | uniform float uRandom; 8 | 9 | void main(){ 10 | vec4 col = texture2D(tDiffuse, vUv + vec2(floor(sin(vUv.y*30.0*uRandom+uRandom*uRandom))* 10.0/ uWindow.x *uRandom,0.)); 11 | gl_FragColor = col; 12 | } -------------------------------------------------------------------------------- /sketches/theme/post-processing/ofx-glitch/shaders/cut-slider/shader.vert: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main(){ 4 | vUv = uv; 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 6 | } -------------------------------------------------------------------------------- /sketches/theme/post-processing/ofx-glitch/shaders/noise/app.js: -------------------------------------------------------------------------------- 1 | var glslify = require('glslify') 2 | 3 | module.exports = { 4 | uniforms: { 5 | "tDiffuse": { type: "t", value: null }, 6 | "uWindow": { type: "v2", value: null }, 7 | "uRandom" : { type: "f", value: 0 }, 8 | "uTime": { type: "f", value: 0 } 9 | }, 10 | vertexShader : glslify('./shader.vert'), 11 | fragmentShader : glslify('./shader.frag') 12 | }; -------------------------------------------------------------------------------- /sketches/theme/post-processing/ofx-glitch/shaders/noise/shader.vert: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main(){ 4 | vUv = uv; 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 6 | } -------------------------------------------------------------------------------- /sketches/theme/post-processing/ofx-glitch/shaders/slit-scan-horizonal/app.js: -------------------------------------------------------------------------------- 1 | var glslify = require('glslify') 2 | 3 | module.exports = { 4 | uniforms: { 5 | "tDiffuse": { type: "t", value: null }, 6 | "uWindow": { type: "v2", value: null }, 7 | "uRandom" : { type: "f", value: 0 }, 8 | "uTime": { type: "f", value: 0 }, 9 | "uValue": { type: "f", value: 0 } 10 | }, 11 | vertexShader : glslify('./shader.vert'), 12 | fragmentShader : glslify('./shader.frag') 13 | }; -------------------------------------------------------------------------------- /sketches/theme/post-processing/ofx-glitch/shaders/slit-scan-horizonal/shader.frag: -------------------------------------------------------------------------------- 1 | 2 | varying vec2 vUv; 3 | 4 | uniform sampler2D tDiffuse; 5 | uniform float uTime; 6 | uniform float uRandom; 7 | uniform vec2 uWindow; 8 | uniform float uValue; 9 | 10 | void main(){ 11 | vec2 texCoord = vec2( gl_FragCoord.x, 3.0+floor(gl_FragCoord.y/uValue)*uValue ); 12 | vec4 texel = texture2D( tDiffuse, texCoord/uWindow ); 13 | gl_FragColor = texel; 14 | } -------------------------------------------------------------------------------- /sketches/theme/post-processing/ofx-glitch/shaders/slit-scan-horizonal/shader.vert: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main(){ 4 | vUv = uv; 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 6 | } -------------------------------------------------------------------------------- /sketches/theme/post-processing/ofx-glitch/shaders/slit-scan/app.js: -------------------------------------------------------------------------------- 1 | var glslify = require('glslify') 2 | 3 | module.exports = { 4 | uniforms: { 5 | "tDiffuse": { type: "t", value: null }, 6 | "uWindow": { type: "v2", value: null }, 7 | "uRandom" : { type: "f", value: 0 }, 8 | "uTime": { type: "f", value: 0 }, 9 | "uValue": { type: "f", value: 0 } 10 | }, 11 | vertexShader : glslify('./shader.vert'), 12 | fragmentShader : glslify('./shader.frag') 13 | }; -------------------------------------------------------------------------------- /sketches/theme/post-processing/ofx-glitch/shaders/slit-scan/shader.frag: -------------------------------------------------------------------------------- 1 | 2 | varying vec2 vUv; 3 | 4 | uniform sampler2D tDiffuse; 5 | uniform float uTime; 6 | uniform float uRandom; 7 | uniform vec2 uWindow; 8 | uniform float uValue; 9 | 10 | void main(){ 11 | float slit_h = uValue; 12 | vec2 texCoord = vec2( slit_h/2.+floor(gl_FragCoord.x/slit_h)*slit_h , gl_FragCoord.y ); 13 | vec4 texel = texture2D( tDiffuse, texCoord/uWindow ); 14 | gl_FragColor = texel; 15 | } -------------------------------------------------------------------------------- /sketches/theme/post-processing/ofx-glitch/shaders/slit-scan/shader.vert: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main(){ 4 | vUv = uv; 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 6 | } -------------------------------------------------------------------------------- /sketches/theme/post-processing/ofx-glitch/shaders/twist/app.js: -------------------------------------------------------------------------------- 1 | var glslify = require('glslify') 2 | 3 | module.exports = { 4 | uniforms: { 5 | "tDiffuse": { type: "t", value: null }, 6 | "uWindow": { type: "v2", value: null }, 7 | "uRandom" : { type: "f", value: 0 }, 8 | "uTime": { type: "f", value: 0 } 9 | }, 10 | vertexShader : glslify('./shader.vert'), 11 | fragmentShader : glslify('./shader.frag') 12 | }; -------------------------------------------------------------------------------- /sketches/theme/post-processing/ofx-glitch/shaders/twist/shader.frag: -------------------------------------------------------------------------------- 1 | 2 | varying vec2 vUv; 3 | 4 | uniform sampler2D tDiffuse; 5 | uniform float uTime; 6 | uniform float uRandom; 7 | uniform vec2 uWindow; 8 | 9 | void main(){ 10 | // vec2 texCoord = vec2( vUv.x + sin(uTime * 5. + vUv.y * 100.) * 10./uWindow.x , vUv.y + cos(uTime * 10. + vUv.x * 100.) * 10./uWindow.y ); 11 | 12 | float val2 = 10.; 13 | float val3 = 20.; 14 | 15 | vec2 texCoord = vec2( max( 0.0, min( uWindow.x, gl_FragCoord.x+sin(gl_FragCoord.y/(153.25*uRandom*uRandom)*uRandom+uRandom*val2+uTime/3.0)*val3) ), 16 | max( 0.0, min( uWindow.y, gl_FragCoord.y+cos(gl_FragCoord.x/(251.57*uRandom*uRandom)*uRandom+uRandom*val2+uTime/2.4)*val3) ) ); 17 | 18 | 19 | vec4 texel = texture2D( tDiffuse, texCoord/uWindow ); 20 | gl_FragColor = texel; 21 | } -------------------------------------------------------------------------------- /sketches/theme/post-processing/ofx-glitch/shaders/twist/shader.vert: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main(){ 4 | vUv = uv; 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 6 | } -------------------------------------------------------------------------------- /sketches/theme/post-processing/ofx-water/decay/main.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Created by kenjisaito on 11/8/15. 4 | * 5 | * Based on ofxDisplacePixels.h 6 | * 7 | * https://github.com/patriciogonzalezvivo/ofxFX/blob/master/src/operations/ofxDisplacePixels.h 8 | * 9 | * Use a normalMap (tex0) to displace pixels 10 | * 11 | */ 12 | 13 | var glslify = require('glslify'); 14 | 15 | module.exports = { 16 | uniforms: { 17 | "backBuffer" : { type: "t" , value: null }, 18 | "uWindow" : { type: "v2", value: null }, 19 | "uTime" : { type: "f", value: null }, 20 | }, 21 | vertexShader : glslify('./shader.vert'), 22 | fragmentShader : glslify('./shader.frag') 23 | }; 24 | 25 | -------------------------------------------------------------------------------- /sketches/theme/post-processing/ofx-water/decay/shader.frag: -------------------------------------------------------------------------------- 1 | 2 | varying vec2 vUv; 3 | 4 | uniform vec2 uWindow; 5 | uniform sampler2D backBuffer; 6 | uniform float uTime; 7 | 8 | void main(){ 9 | 10 | float rate = uTime / 2.0; 11 | 12 | vec4 newFrame = texture2D(backBuffer, vUv); 13 | gl_FragColor = newFrame; 14 | 15 | 16 | 17 | } 18 | -------------------------------------------------------------------------------- /sketches/theme/post-processing/ofx-water/decay/shader.vert: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main(){ 4 | vUv = uv; 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 6 | } -------------------------------------------------------------------------------- /sketches/theme/post-processing/ofx-water/displacePixel/main.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Created by kenjisaito on 11/8/15. 4 | * 5 | * Based on ofxDisplacePixels.h 6 | * 7 | * https://github.com/patriciogonzalezvivo/ofxFX/blob/master/src/operations/ofxDisplacePixels.h 8 | * 9 | * Use a normalMap (tex0) to displace pixels 10 | * 11 | */ 12 | 13 | var glslify = require('glslify'); 14 | 15 | module.exports = { 16 | uniforms: { 17 | "backBuffer" : { type: "t" , value: null }, 18 | "normalTexture" : { type: "t" , value: null }, 19 | "uWindow" : { type: "v2", value: null }, 20 | "uTime" : { type: "f", value: null }, 21 | }, 22 | vertexShader : glslify('./shader.vert'), 23 | fragmentShader : glslify('./shader.frag') 24 | }; 25 | 26 | -------------------------------------------------------------------------------- /sketches/theme/post-processing/ofx-water/displacePixel/shader.vert: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main(){ 4 | vUv = uv; 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 6 | } -------------------------------------------------------------------------------- /sketches/theme/post-processing/ofx-water/translation/main.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Created by kenjisaito on 11/8/15. 4 | * 5 | * Based on ofxDisplacePixels.h 6 | * 7 | * https://github.com/patriciogonzalezvivo/ofxFX/blob/master/src/operations/ofxDisplacePixels.h 8 | * 9 | * Use a normalMap (tex0) to displace pixels 10 | * 11 | */ 12 | 13 | var glslify = require('glslify'); 14 | 15 | module.exports = { 16 | uniforms: { 17 | "oldTexture" : { type: "t" , value: null }, 18 | "nextTexture" : { type: "t" , value: null }, 19 | "uWindow" : { type: "v2", value: null }, 20 | "uTime" : { type: "f", value: null }, 21 | }, 22 | vertexShader : glslify('./shader.vert'), 23 | fragmentShader : glslify('./shader.frag') 24 | }; 25 | 26 | -------------------------------------------------------------------------------- /sketches/theme/post-processing/ofx-water/translation/shader.frag: -------------------------------------------------------------------------------- 1 | 2 | varying vec2 vUv; 3 | 4 | uniform vec2 uWindow; 5 | 6 | uniform sampler2D oldTexture; 7 | uniform sampler2D nextTexture; 8 | 9 | uniform float uTime; 10 | 11 | void main(){ 12 | 13 | float rate = clamp(uTime / 1.0, 0.0, 1.0); 14 | vec4 oldFrame = texture2D(nextTexture, vUv); 15 | vec4 newFrame = texture2D(oldTexture, vUv); 16 | 17 | gl_FragColor = (rate) * oldFrame + (1.0 - rate) * newFrame; 18 | 19 | } 20 | -------------------------------------------------------------------------------- /sketches/theme/post-processing/ofx-water/translation/shader.vert: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main(){ 4 | vUv = uv; 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 6 | } -------------------------------------------------------------------------------- /sketches/theme/post-processing/postprocessing-nonphoto/CharlotteHoare_Thesis.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/sketches/theme/post-processing/postprocessing-nonphoto/CharlotteHoare_Thesis.pdf -------------------------------------------------------------------------------- /sketches/theme/post-processing/postprocessing-nonphoto/Non-Photorealistic.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/sketches/theme/post-processing/postprocessing-nonphoto/Non-Photorealistic.pdf -------------------------------------------------------------------------------- /sketches/theme/post-processing/postprocessing-nonphoto/OBrien.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/sketches/theme/post-processing/postprocessing-nonphoto/OBrien.pdf -------------------------------------------------------------------------------- /sketches/theme/post-processing/postprocessing-nonphoto/memo.md: -------------------------------------------------------------------------------- 1 | #Postprocessing Non Photorealistic 2 | 3 | ##References 4 | 5 | ###WEBSITE 6 | - [http://www.floored.com/blog/2014/sketch-rendering](http://www.floored.com/blog/2014/sketch-rendering) 7 | 8 | ###Papers 9 | 10 | - [A FRAMEWORK FOR DIGITAL WATERCOLOR](http://oaktrust.library.tamu.edu/bitstream/handle/1969.1/86068/OBrien.pdf) 11 | - [Interactive non photorealistic rendering using GLSL](https://nccastaff.bournemouth.ac.uk/jmacey/MastersProjects/MSc12/Hoare/CharlotteHoare_Thesis.pdf) 12 | - [Non-Photorealistic Rendering with Pixel and Vertex Shaders](http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.65.4558&rep=rep1&type=pdf) -------------------------------------------------------------------------------- /sketches/theme/post-processing/postprocessing00/sources/Utils.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * THREE.Extras.UTils contains extra useful methods 3 | * 4 | * @author Thibaut 'BKcore' Despoulain 5 | * 6 | */ 7 | 8 | THREE = THREE || {}; 9 | THREE.Extras = THREE.Extras || {}; 10 | THREE.Extras.Utils = THREE.Extras.Utils || {}; 11 | 12 | /*! Projects object origin into screen space coordinates using provided camera */ 13 | THREE.Extras.Utils.projectOnScreen = function(object, camera) 14 | { 15 | var mat = new THREE.Matrix4(); 16 | mat.multiplyMatrices( camera.matrixWorldInverse, object.matrixWorld); 17 | mat.multiplyMatrices( camera.projectionMatrix , mat); 18 | 19 | //var c = mat.n44; 20 | var c = mat.elements[15]; 21 | var n14 = mat.elements[12]; 22 | var n24 = mat.elements[13]; 23 | var n34 = mat.elements[14]; 24 | //console.log(mat.n44); 25 | var lPos = new THREE.Vector3( n14/c, n24/c, n34/c); 26 | lPos.multiplyScalar(0.5); 27 | lPos.addScalar(0.5); 28 | return lPos; 29 | } -------------------------------------------------------------------------------- /sketches/theme/procedural-mesh/cube/mesh.js: -------------------------------------------------------------------------------- 1 | import CustomGeometry from "./geometry"; 2 | 3 | export default class Mesh extends THREE.Mesh { 4 | constructor(){ 5 | super( new CustomGeometry(), new THREE.MeshBasicMaterial({ color: 0x0000ff, wireframe: true, side: THREE.DoubleSide })); 6 | this.position.set( - this.geometry.xSize/2, - this.geometry.ySize/2, - this.geometry.zSize/2) 7 | } 8 | updateLoop(dt){ 9 | this.geometry.updateLoop(dt); 10 | } 11 | 12 | } -------------------------------------------------------------------------------- /sketches/theme/procedural-mesh/cube2/material.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by kenjisaito on 2/18/16. 3 | */ 4 | 5 | var glslify = require('glslify'); 6 | 7 | export default class SnowFallMaterial extends THREE.ShaderMaterial{ 8 | constructor(){ 9 | 10 | var uniforms = { 11 | fresnelBias : { 12 | type : "f", 13 | value : 0.5 14 | }, 15 | fresnelScale : { 16 | type : "f", 17 | value : 1.0 18 | }, 19 | fresnelPower : { 20 | type : "f", 21 | value : 3.0 22 | }, 23 | color1 : { 24 | type : "v3", 25 | value : new THREE.Vector3(0.5, 0.5, 0.5) 26 | }, 27 | color2 : { 28 | type : "v3", 29 | value : new THREE.Vector3(0.0, 0.0, 1.0) 30 | } 31 | }; 32 | 33 | super({ uniforms : uniforms, vertexShader : glslify("./shader/shader.vert"), fragmentShader: glslify("./shader/shader.frag") }); 34 | 35 | this.uniforms = uniforms; 36 | 37 | this.transparent = true; 38 | } 39 | } -------------------------------------------------------------------------------- /sketches/theme/procedural-mesh/cube2/mesh.js: -------------------------------------------------------------------------------- 1 | import CustomGeometry from "./geometry"; 2 | import CustomMaterial from "./material"; 3 | 4 | export default class Mesh extends THREE.Mesh { 5 | constructor(){ 6 | super( new CustomGeometry(), new CustomMaterial() ); 7 | this.position.set( - this.geometry.xSize/2, 0, - this.geometry.zSize/2) 8 | } 9 | updateLoop(dt){ 10 | this.geometry.updateLoop(dt); 11 | } 12 | click(){ 13 | this.geometry.click(); 14 | } 15 | } -------------------------------------------------------------------------------- /sketches/theme/procedural-mesh/cube2/particle.js: -------------------------------------------------------------------------------- 1 | 2 | export default class Particle { 3 | constructor(xx, yy, zz){ 4 | this.xx = xx; 5 | this.yy = yy; 6 | this.zz = zz; 7 | } 8 | } -------------------------------------------------------------------------------- /sketches/theme/procedural-mesh/cube2/shader/shader.frag: -------------------------------------------------------------------------------- 1 | uniform vec3 color1; 2 | uniform vec3 color2; 3 | 4 | varying float vReflectionFactor; 5 | 6 | void main() { 7 | gl_FragColor = vec4(mix(color2, color1, vec3(clamp( vReflectionFactor, 0.0, 1.0 ))), 1.0); 8 | } 9 | -------------------------------------------------------------------------------- /sketches/theme/procedural-mesh/cube2/shader/shader.vert: -------------------------------------------------------------------------------- 1 | uniform float fresnelBias; 2 | uniform float fresnelScale; 3 | uniform float fresnelPower; 4 | 5 | varying float vReflectionFactor; 6 | 7 | void main() { 8 | vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 ); 9 | vec4 worldPosition = modelMatrix * vec4( position, 1.0 ); 10 | 11 | vec3 worldNormal = normalize( mat3( modelMatrix[0].xyz, modelMatrix[1].xyz, modelMatrix[2].xyz ) * normal ); 12 | 13 | vec3 I = worldPosition.xyz - cameraPosition; 14 | 15 | vReflectionFactor = fresnelBias + fresnelScale * pow( 1.0 + dot( normalize( I ), worldNormal ), fresnelPower ); 16 | 17 | gl_Position = projectionMatrix * mvPosition; 18 | } 19 | -------------------------------------------------------------------------------- /sketches/theme/procedural-mesh/generative-plane/mesh.js: -------------------------------------------------------------------------------- 1 | import CustomGeometry from "./geometry"; 2 | 3 | export default class Mesh extends THREE.Mesh { 4 | constructor(){ 5 | 6 | 7 | super( new CustomGeometry({width: 200, height: 200, widthSegment : 4, heightSegment: 4 }), new THREE.MeshBasicMaterial({ color: 0x0000ff, wireframe: true, side: THREE.DoubleSide })); 8 | 9 | } 10 | updateLoop(dt){ 11 | // this.geometry.updateLoop(dt); 12 | } 13 | 14 | } -------------------------------------------------------------------------------- /sketches/theme/procedural-mesh/grid/mat.js: -------------------------------------------------------------------------------- 1 | var glslify = require('glslify'); 2 | 3 | export default class Mat extends THREE.ShaderMaterial { 4 | constructor(tex) { 5 | 6 | var uniforms = { 7 | tMap: { 8 | type: "t", 9 | value: tex 10 | } 11 | }; 12 | 13 | super({ 14 | uniforms: uniforms, 15 | vertexShader: glslify("./shader/shader.vert"), 16 | fragmentShader: glslify("./shader/shader.frag") 17 | }); 18 | 19 | this.side = THREE.DoubleSide; 20 | this.depthWrite = false 21 | 22 | this.uniforms = uniforms; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /sketches/theme/procedural-mesh/grid/mesh.js: -------------------------------------------------------------------------------- 1 | import CustomGeometry from "./geometry"; 2 | import CustomMat from "./mat" 3 | 4 | export default class Mesh extends THREE.Mesh { 5 | constructor(index, texture){ 6 | super( new CustomGeometry(index, texture.image.width, texture.image.height ), new CustomMat(texture)); 7 | this.isNormal = true; 8 | } 9 | updateLoop(dt){ 10 | this.geometry.updateLoop(dt); 11 | } 12 | backToInitState(){ 13 | this.geometry.backToInitState(); 14 | } 15 | backToWall(){ 16 | this.geometry.backToWall(); 17 | } 18 | animate(){ 19 | this.isNormal = !this.isNormal; 20 | if(this.isNormal){ 21 | this.backToInitState(); 22 | }else{ 23 | this.backToWall(); 24 | } 25 | } 26 | } -------------------------------------------------------------------------------- /sketches/theme/procedural-mesh/grid/particle.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by kenjisaito on 2/28/16. 3 | */ 4 | 5 | export default class Particle { 6 | constructor( xx, yy ){ 7 | this.xx = xx; 8 | this.yy = yy; 9 | } 10 | updateLoop(dt){ 11 | 12 | } 13 | } -------------------------------------------------------------------------------- /sketches/theme/procedural-mesh/grid/shader/shader.frag: -------------------------------------------------------------------------------- 1 | uniform sampler2D tMap; 2 | 3 | varying vec2 vUv; 4 | 5 | void main(){ 6 | 7 | gl_FragColor = texture2D(tMap, vUv); 8 | 9 | } -------------------------------------------------------------------------------- /sketches/theme/procedural-mesh/grid/shader/shader.vert: -------------------------------------------------------------------------------- 1 | uniform sampler2D tMap; 2 | 3 | varying vec2 vUv; 4 | 5 | void main(){ 6 | vUv = uv; 7 | 8 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 9 | } -------------------------------------------------------------------------------- /sketches/theme/procedural-mesh/primitive-plane/mesh.js: -------------------------------------------------------------------------------- 1 | import CustomGeometry from "./geometry"; 2 | 3 | export default class Mesh extends THREE.Mesh { 4 | constructor(){ 5 | 6 | 7 | super( new CustomGeometry({width: 200, height: 200, widthSegment : 4, heightSegment: 4 }), new THREE.MeshBasicMaterial({ color: 0x0000ff, wireframe: true, side: THREE.DoubleSide })); 8 | 9 | } 10 | updateLoop(dt){ 11 | // this.geometry.updateLoop(dt); 12 | } 13 | 14 | } -------------------------------------------------------------------------------- /sketches/theme/procedural-mesh/raycaster-sphere/mesh.js: -------------------------------------------------------------------------------- 1 | import CustomGeometry from "./geometry"; 2 | 3 | export default class Mesh extends THREE.Mesh { 4 | constructor(tex){ 5 | super( new CustomGeometry(), new THREE.MeshBasicMaterial({ side: THREE.DoubleSide, map: tex })); 6 | this.radius = this.geometry.radius; 7 | var self = this; 8 | //this.position.set( - this.geometry.grid/2, - this.geometry.grid/2, - this.geometry.grid/2); 9 | } 10 | updateLoop(obj, dt){ 11 | if(obj && obj.object == this){ 12 | //console.log(obj); 13 | var point = obj.point; 14 | point.x -= this.position.x; 15 | point.y -= this.position.y; 16 | 17 | this.geometry.updateInteractive(point, dt); 18 | } 19 | 20 | this.geometry.updateLoop(dt); 21 | } 22 | click(){ 23 | this.geometry.customClick(); 24 | } 25 | } -------------------------------------------------------------------------------- /sketches/theme/procedural-mesh/readme.md: -------------------------------------------------------------------------------- 1 | the codes in this folder are based on http://catlikecoding.com/unity/tutorials/ 2 | 3 | ref 4 | 5 | - [https://en.wikipedia.org/wiki/UV_mapping](https://en.wikipedia.org/wiki/UV_mapping) -------------------------------------------------------------------------------- /sketches/theme/procedural-mesh/sphere-collide/mesh.js: -------------------------------------------------------------------------------- 1 | import CustomGeometry from "./geometry"; 2 | 3 | export default class Mesh extends THREE.Mesh { 4 | constructor(){ 5 | super( new CustomGeometry(), new THREE.MeshBasicMaterial({ color: 0x0000ff, wireframe: true, side: THREE.DoubleSide })); 6 | //this.position.set( - this.geometry.grid/2, - this.geometry.grid/2, - this.geometry.grid/2); 7 | } 8 | updateLoop(dt){ 9 | this.geometry.updateLoop(dt); 10 | } 11 | 12 | } -------------------------------------------------------------------------------- /sketches/theme/procedural-mesh/sphere/mesh.js: -------------------------------------------------------------------------------- 1 | import CustomGeometry from "./geometry"; 2 | 3 | export default class Mesh extends THREE.Mesh { 4 | constructor(){ 5 | super( new CustomGeometry(), new THREE.MeshBasicMaterial({ color: 0x0000ff, wireframe: true, side: THREE.DoubleSide })); 6 | //this.position.set( - this.geometry.grid/2, - this.geometry.grid/2, - this.geometry.grid/2); 7 | } 8 | updateLoop(dt){ 9 | this.geometry.updateLoop(dt); 10 | } 11 | 12 | } -------------------------------------------------------------------------------- /sketches/theme/shader/00-shader00/shader.frag: -------------------------------------------------------------------------------- 1 | 2 | uniform int percent; 3 | uniform vec2 uResolution; 4 | uniform vec2 uTopLeft; 5 | 6 | #pragma glslify: setType = require(./util.glsl); 7 | 8 | void main() { 9 | vec3 col = setType( uResolution, uTopLeft ); 10 | 11 | gl_FragColor = vec4( col, 1. ); 12 | } -------------------------------------------------------------------------------- /sketches/theme/shader/00-shader00/shader.vert: -------------------------------------------------------------------------------- 1 | void main() { 2 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 3 | } -------------------------------------------------------------------------------- /sketches/theme/shader/00-shader00/util.glsl: -------------------------------------------------------------------------------- 1 | 2 | 3 | vec3 get0( vec2 inputPos ){ 4 | 5 | //float[5](3.4, 4.2, 5.0, 5.2, 1.1); 6 | 7 | 8 | return vec3(1.0, 0.0, 0.0); 9 | } 10 | 11 | vec3 myFunction( vec2 resolution, vec2 topLeft ){ 12 | vec3 col; 13 | 14 | float typeSize = 210.; 15 | float typeMargin = 50.; 16 | float typeWidth = 470.; 17 | float typeHeight = 350.; 18 | 19 | if(gl_FragCoord.x > topLeft.x && gl_FragCoord.x < (topLeft.x + typeWidth) && gl_FragCoord.y > topLeft.y && gl_FragCoord.y < (topLeft.y + typeHeight) ){ 20 | 21 | vec2 pos = gl_FragCoord.xy - topLeft.xy; 22 | if( pos.x < typeSize ){ 23 | col = get0(pos); 24 | }else{ 25 | col = vec3(1.0, 1.0, 1.0); 26 | } 27 | 28 | }else{ 29 | col = vec3(1.0, 1.0, 1.0); 30 | } 31 | 32 | return col; 33 | } 34 | 35 | #pragma glslify: export(myFunction) -------------------------------------------------------------------------------- /sketches/theme/shader/01-wireframe/mesh2.js: -------------------------------------------------------------------------------- 1 | import CustomGeometry from "./geometry"; 2 | var glslify = require('glslify'); 3 | 4 | export default class Mesh extends THREE.Mesh { 5 | constructor(){ 6 | var unitWidth = 120; 7 | var unitHeight = 90; 8 | var material = new THREE.ShaderMaterial({ 9 | uniforms : { 10 | uTime : {value : 0}, 11 | uSize : {value : new THREE.Vector2(unitWidth, unitHeight)}, 12 | shaderValue : {value: 5} 13 | }, 14 | vertexShader : glslify('./shader/shader.vert'), 15 | fragmentShader : glslify('./shader/shader2.frag'), 16 | transparent : true, 17 | side: THREE.DoubleSide 18 | 19 | }) 20 | material.extensions.derivatives = true; 21 | super( new CustomGeometry({width: unitWidth, height: unitHeight, widthSegment : 5, heightSegment: 4 }), material ); 22 | this.rotation.x = Math.PI/2; 23 | 24 | this.unitWidth = unitWidth; 25 | this.unitHeight = unitHeight; 26 | } 27 | updateLoop(dt){ 28 | this.material.uniforms.uTime.value += dt; 29 | // this.geometry.updateLoop(dt); 30 | } 31 | updateShader(data){ 32 | this.material.uniforms.shaderValue.value = data.shaderValue; 33 | } 34 | 35 | } -------------------------------------------------------------------------------- /sketches/theme/shader/01-wireframe/shader/shader.frag: -------------------------------------------------------------------------------- 1 | uniform vec2 uSize; 2 | uniform float uTime; 3 | uniform float shaderValue; 4 | 5 | varying vec2 vUv; 6 | varying vec3 vBarycentric; 7 | 8 | float edgeFactor(){ 9 | vec3 vec = vBarycentric; 10 | vec3 d = fwidth(vec); 11 | vec3 a3 = smoothstep(vec3(0.0), d*1.0 * (1.0 + 3.0 * sin( 10. * (vUv.x - 0.5) * (vUv.x - 0.5) * sin(uTime * 3.)+ 10. * (vUv.y-0.5) * (vUv.y-0.5) * cos( uTime ) )), vec * cos(uTime) * sin(uTime)); 12 | // vec3 a3 = smoothstep(vec3(0.0), d*1.0 * (1.0 + 3.0 * sin( 10. * (vUv.x - 0.5) * (vUv.x - 0.5) * sin(uTime * 3.)+ 10. * (vUv.y-0.5) * (vUv.y-0.5) * cos( uTime ) )), vec * cos(uTime) * distance(vUv, vec2(0.5))); 13 | // 0.5 * cos(uTime * vUv.x * 10.0) * 0.5 * sin(uTime * vUv.y * 10.0 14 | return min(min(a3.x, a3.y), a3.z); 15 | } 16 | 17 | void main(){ 18 | // vec3 a3 = smoothstep(vec3(0.0), d*1.5, vBarycentric); 19 | 20 | gl_FragColor.rgb = mix(vec3(1.0), vec3(0.0), edgeFactor()); 21 | gl_FragColor.a = 1.0; 22 | 23 | // float minVal = min(vBarycentric.x, min(vBarycentric.y , vBarycentric.z)); 24 | // if(minVal < 0.01 ){ 25 | // gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); 26 | // }else{ 27 | // gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); 28 | // } 29 | 30 | 31 | } -------------------------------------------------------------------------------- /sketches/theme/shader/01-wireframe/shader/shader.vert: -------------------------------------------------------------------------------- 1 | attribute vec3 barycentric; 2 | 3 | varying vec2 vUv; 4 | varying vec3 vBarycentric; 5 | 6 | void main() { 7 | vBarycentric = barycentric; 8 | vUv = uv; 9 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 10 | } -------------------------------------------------------------------------------- /sketches/theme/shader/01-wireframe/shader/shader2.frag: -------------------------------------------------------------------------------- 1 | uniform vec2 uSize; 2 | uniform float uTime; 3 | uniform float shaderValue; 4 | 5 | varying vec2 vUv; 6 | varying vec3 vBarycentric; 7 | 8 | float edgeFactor(){ 9 | vec3 vec = vBarycentric; 10 | vec3 d = fwidth(vec); 11 | // vec3 a3 = smoothstep(vec3(0.0), d*1.0 * (1.0 + 3.0 * sin( 10. * (vUv.x - 0.5) * (vUv.x - 0.5) * sin(uTime * 3.)+ 10. * (vUv.y-0.5) * (vUv.y-0.5) * cos( uTime ) )), vec * cos(uTime) * sin(uTime)); 12 | float modVal = mod(uTime, 4.); 13 | vec3 a3 = smoothstep(vec3(0.0), d * (cos(uTime + vUv.x * 5. * sin( uTime/2.) * (1.5 + sin(uTime))) + sin(uTime + vUv.y * 5. * cos( uTime/4.) * (1.5 + sin(uTime)))), vec); 14 | // 0.5 * cos(uTime * vUv.x * 10.0) * 0.5 * sin(uTime * vUv.y * 10.0 15 | return min(min(a3.x, a3.y), a3.z); 16 | } 17 | 18 | void main(){ 19 | // vec3 a3 = smoothstep(vec3(0.0), d*1.5, vBarycentric); 20 | 21 | gl_FragColor.rgb = mix(vec3(1.0), vec3(0.0), edgeFactor()); 22 | gl_FragColor.a = 1.0; 23 | 24 | // float minVal = min(vBarycentric.x, min(vBarycentric.y , vBarycentric.z)); 25 | // if(minVal < 0.01 ){ 26 | // gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); 27 | // }else{ 28 | // gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); 29 | // } 30 | 31 | 32 | } -------------------------------------------------------------------------------- /sketches/theme/shader/01-wireframe/shader/shader8.frag: -------------------------------------------------------------------------------- 1 | uniform vec2 uSize; 2 | uniform float uTime; 3 | uniform float shaderValue; 4 | 5 | varying vec2 vUv; 6 | varying vec3 vBarycentric; 7 | 8 | #pragma glslify: pnoise2 = require(glsl-noise/periodic/2d) 9 | 10 | float edgeFactor(){ 11 | vec3 vec = vBarycentric; 12 | vec3 d = fwidth(vec); 13 | float dis = tan( (vUv.x - 0.5) * sin(uTime)* (vUv.y-0.5) ) * distance(vUv, vec2(0.5)) + tan(uTime)/10.; 14 | 15 | vec3 a3 = smoothstep(vec3(0.0), d + dis, vec ); 16 | return min(min(a3.x, a3.y), a3.z); 17 | } 18 | 19 | void main(){ 20 | // vec3 a3 = smoothstep(vec3(0.0), d*1.5, vBarycentric); 21 | 22 | gl_FragColor.rgb = mix(vec3(1.0), vec3(0.0), edgeFactor()); 23 | gl_FragColor.a = 1.0; 24 | 25 | // float minVal = min(vBarycentric.x, min(vBarycentric.y , vBarycentric.z)); 26 | // if(minVal < 0.01 ){ 27 | // gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); 28 | // }else{ 29 | // gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); 30 | // } 31 | 32 | 33 | } -------------------------------------------------------------------------------- /sketches/theme/shader/app01/shader.frag: -------------------------------------------------------------------------------- 1 | 2 | #pragma glslify: snoise2 = require(glsl-noise/simplex/2d) 3 | #pragma glslify: snoise3 = require(glsl-noise/simplex/3d) 4 | #pragma glslify: snoise4 = require(glsl-noise/simplex/4d) 5 | #pragma glslify: cnoise2 = require(glsl-noise/classic/2d) 6 | #pragma glslify: cnoise3 = require(glsl-noise/classic/3d) 7 | #pragma glslify: cnoise4 = require(glsl-noise/classic/4d) 8 | #pragma glslify: pnoise2 = require(glsl-noise/periodic/2d) 9 | #pragma glslify: pnoise3 = require(glsl-noise/periodic/3d) 10 | #pragma glslify: pnoise4 = require(glsl-noise/periodic/4d) 11 | 12 | uniform float time; 13 | uniform vec2 resolution; 14 | 15 | varying vec2 vUv; 16 | 17 | void main() { 18 | // gl_FragColor = vec4( 1.0, 0.0, 0.0, 0.5 ); 19 | float col = pnoise2( vec2(vUv.x * resolution.x + time, vUv.y * resolution.y), resolution/100.); 20 | 21 | gl_FragColor = vec4(vec3(col), 1.0); 22 | } -------------------------------------------------------------------------------- /sketches/theme/shader/app01/shader.vert: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | vUv = uv; 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 6 | } -------------------------------------------------------------------------------- /sketches/theme/shader/app02-lensflare/shader.vert: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | vUv = uv; 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 6 | } -------------------------------------------------------------------------------- /sketches/theme/swap-renderer/app00/display/shader.frag: -------------------------------------------------------------------------------- 1 | 2 | varying vec2 vUv; 3 | uniform sampler2D tDiffuse; 4 | 5 | void main(){ 6 | gl_FragColor = texture2D(tDiffuse, vUv); 7 | // gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0); 8 | } -------------------------------------------------------------------------------- /sketches/theme/swap-renderer/app00/display/shader.vert: -------------------------------------------------------------------------------- 1 | 2 | varying vec2 vUv; 3 | 4 | void main(){ 5 | vUv = uv; 6 | 7 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 8 | } 9 | -------------------------------------------------------------------------------- /sketches/theme/swap-renderer/app00/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by kenjisaito on 4/30/16. 3 | */ 4 | 5 | require('./app') -------------------------------------------------------------------------------- /sketches/theme/swap-renderer/app01/display/shader.frag: -------------------------------------------------------------------------------- 1 | 2 | varying vec2 vUv; 3 | uniform sampler2D tDiffuse; 4 | 5 | void main(){ 6 | gl_FragColor = texture2D(tDiffuse, vUv); 7 | // gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0); 8 | } -------------------------------------------------------------------------------- /sketches/theme/swap-renderer/app01/display/shader.vert: -------------------------------------------------------------------------------- 1 | 2 | varying vec2 vUv; 3 | 4 | void main(){ 5 | vUv = uv; 6 | 7 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 8 | } 9 | -------------------------------------------------------------------------------- /sketches/theme/swap-renderer/app01/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by kenjisaito on 4/30/16. 3 | */ 4 | 5 | require('./app') -------------------------------------------------------------------------------- /sketches/theme/vertex-displacement/01-vertex-displacement/modelBufferGeometry.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | export default class ModelBufferGeometry extends THREE.BufferGeometry { 4 | constructor(model) { 5 | super(); 6 | 7 | } 8 | } -------------------------------------------------------------------------------- /sketches/theme/vertex-displacement/01-vertex-displacement/shaders/shader.frag: -------------------------------------------------------------------------------- 1 | uniform vec3 diffuse; 2 | varying vec3 vPos; 3 | varying vec3 vNormal; 4 | 5 | 6 | #if NUM_POINT_LIGHTS > 0 7 | struct PointLight { 8 | vec3 position; 9 | vec3 color; 10 | }; 11 | uniform PointLight pointLights[ NUM_POINT_LIGHTS ]; 12 | #endif 13 | 14 | #if NUM_DIR_LIGHTS > 0 15 | struct DirectionalLight { 16 | vec3 direction; 17 | vec3 color; 18 | int shadow; 19 | float shadowBias; 20 | float shadowRadius; 21 | vec2 shadowMapSize; 22 | }; 23 | uniform DirectionalLight directionalLights[ NUM_DIR_LIGHTS ]; 24 | #endif 25 | 26 | uniform vec3 ambientLightColor; 27 | 28 | void main() { 29 | vec4 addedLights = vec4(0.0,0.0,0.0, 1.0); 30 | for(int l = 0; l < NUM_POINT_LIGHTS; l++) { 31 | 32 | vec3 lightDirection = normalize(vPos - pointLights[l].position); 33 | vec3 Idiff = clamp(dot(-lightDirection, vNormal * 10.0), 0.0, 1.0) * pointLights[l].color; 34 | addedLights = addedLights + vec4(Idiff.rgb, 0.0); // + ; 35 | } 36 | 37 | gl_FragColor = mix(vec4(diffuse.x, diffuse.y, diffuse.z, 1.0), addedLights, addedLights); 38 | } -------------------------------------------------------------------------------- /sketches/theme/vertex-displacement/01-vertex-displacement/shaders/shader.vert: -------------------------------------------------------------------------------- 1 | varying vec3 vPos; 2 | varying vec3 vNormal; 3 | 4 | uniform float uTime; 5 | 6 | vec3 getNewVertPosition(){ 7 | vec3 outputPos = (modelMatrix * vec4(position, 1.0)).xyz; 8 | float melt = outputPos.y; 9 | melt = 1. - clamp(melt, 0., 1.); 10 | 11 | vec3 uNormal = normal; 12 | uNormal = normalize(uNormal); 13 | outputPos.y = max(position.y/10., outputPos.y); 14 | outputPos.xz = outputPos.xz + uNormal.xz * melt * 10.; 15 | 16 | 17 | return outputPos; 18 | } 19 | 20 | void main() { 21 | vec3 outputPos = getNewVertPosition(); 22 | // outputPos.x = outputPos.x + sin(outputPos.y * 2. + 1.0 * uTime); 23 | 24 | vPos = (modelMatrix * vec4(outputPos, 1.0 )).xyz; 25 | vNormal = normalMatrix * normal; 26 | gl_Position = projectionMatrix * viewMatrix * vec4(outputPos,1.0); 27 | } -------------------------------------------------------------------------------- /sketches/theme/vertex-displacement/readme.md: -------------------------------------------------------------------------------- 1 | ## Vertex Displacement 2 | 3 | 4 | -[http://diary.conewars.com/vertex-displacement-shader/](http://diary.conewars.com/vertex-displacement-shader/) 5 | 6 | -[http://diary.conewars.com/melting-shader-part-2/](http://diary.conewars.com/melting-shader-part-2/) 7 | -------------------------------------------------------------------------------- /sketches/theme/video/videoMask/OutputAddShader.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author zz85 / http://www.lab4games.net/zz85/blog 3 | * 4 | * Two pass Gaussian blur filter (horizontal and vertical blur shaders) 5 | * - described in http://www.gamerendering.com/2008/10/11/gaussian-blur-filter-shader/ 6 | * and used in http://www.cake23.de/traveling-wavefronts-lit-up.html 7 | * 8 | * - 9 samples per pass 9 | * - standard deviation 2.7 10 | * - "h" and "v" parameters should be set to "1 / width" and "1 / height" 11 | */ 12 | 13 | var glslify = require('glslify') 14 | 15 | THREE.OutputAddBlur = { 16 | uniforms: { 17 | "tDiffuse": { value: null }, 18 | "tBlur" : { value: null}, 19 | "tText" : {value: null}, 20 | "uColor" : {value: new THREE.Color(0xffffff)}, 21 | "uTime" : {value: 0} 22 | 23 | }, 24 | vertexShader : glslify("./shaders/shader.vert"), 25 | fragmentShader: glslify("./shaders/shader.frag") 26 | }; 27 | -------------------------------------------------------------------------------- /sketches/theme/video/videoMask/app.js: -------------------------------------------------------------------------------- 1 | var App = require('./index'); 2 | 3 | var image = new Image(); 4 | image.onload = function(){ 5 | var app = new App({image : image, isDebug : true}); 6 | app.start(); 7 | }; 8 | image.src = "./assets/hello-world.png" 9 | -------------------------------------------------------------------------------- /sketches/theme/video/videoMask/shaders/shader.vert: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | 5 | vUv = uv; 6 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 7 | 8 | } -------------------------------------------------------------------------------- /sketches/theme/video/videoMask/utils.js: -------------------------------------------------------------------------------- 1 | var Utils = {}; 2 | 3 | Utils.fitImage = function(width, height, imageW, imageH) { 4 | var sizes = {}; 5 | sizes.w = width; 6 | var ratio = sizes.w/imageW; 7 | sizes.h = Math.round(imageH * ratio); 8 | sizes.margin = 0; 9 | 10 | if (sizes.h < height) { 11 | sizes.h = height; 12 | ratio = sizes.h/imageH; 13 | sizes.w = Math.round(imageW * ratio); 14 | sizes.margin = -(sizes.w - width)/2; 15 | } 16 | 17 | return sizes; 18 | }; 19 | 20 | module.exports = Utils -------------------------------------------------------------------------------- /sketches/undefined/#000/app.js: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /sketches/undefined/#001/display/shader.frag: -------------------------------------------------------------------------------- 1 | 2 | varying vec2 vUv; 3 | uniform sampler2D tDiffuse; 4 | 5 | void main(){ 6 | gl_FragColor = texture2D(tDiffuse, vUv); 7 | // gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0); 8 | } -------------------------------------------------------------------------------- /sketches/undefined/#001/display/shader.vert: -------------------------------------------------------------------------------- 1 | 2 | varying vec2 vUv; 3 | 4 | void main(){ 5 | vUv = uv; 6 | 7 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 8 | } 9 | -------------------------------------------------------------------------------- /sketches/undefined/#001/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by kenjisaito on 4/30/16. 3 | */ 4 | 5 | require('./app') -------------------------------------------------------------------------------- /sketches/undefined/#002/shader.vert: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | vUv = uv; 5 | 6 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 7 | } -------------------------------------------------------------------------------- /sketches/undefined/#003/shader.vert: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | vUv = uv; 5 | 6 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 7 | } -------------------------------------------------------------------------------- /sketches/vendors/controller/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "application-name", 3 | "version": "0.0.1", 4 | "devDependencies": { 5 | "lodash": "^4.6.1" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /sketches/vendors/controller/utils.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | key : function(event){ 3 | 4 | }, 5 | isArrow : function(event){ 6 | if(event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40 ) 7 | return true 8 | 9 | return false; 10 | }, 11 | isCommand : function(event){ 12 | if(event.keyCode == 33 || event.keyCode == 34 || event.keyCode == 13 || event.keyCode == 32) 13 | return true 14 | 15 | return false 16 | }, 17 | getCommand : function(event){ 18 | if(event.keyCode == 33) return "x"; 19 | else if(event.keyCode == 34) return "y"; 20 | else if(event.keyCode == 13) return "a"; 21 | else if(event.keyCode == 32) return "b"; 22 | 23 | return false; 24 | } 25 | 26 | } -------------------------------------------------------------------------------- /sketches/vendors/desc.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kenjiSpecial/webgl-sketch-dojo/9e842d6460665a30eab0731585b053adb4ba6533/sketches/vendors/desc.js -------------------------------------------------------------------------------- /src/sass/main.scss: -------------------------------------------------------------------------------- 1 | @import "reset"; 2 | 3 | $gray: hsla(0, 0%, 25%, 0.05); 4 | 5 | body { 6 | color: #1d1d1d; 7 | font-family: 'Helvetica', sans-serif; 8 | } 9 | 10 | canvas { 11 | pointer-events: none; 12 | } 13 | 14 | a { 15 | color: #af2626; 16 | font-size: 14px; 17 | margin-top: 10px; 18 | display: inline-block; 19 | text-decoration: none; 20 | padding: 5px; 21 | 22 | 23 | &:after { 24 | content: ' '; 25 | display: block; 26 | width: 100%; 27 | height: 0px; 28 | position: relative; 29 | top: 2px; left: 0; 30 | -webkit-transition: all 0.25s ease; 31 | -moz-transition: all 0.25s ease; 32 | -o-transition: all 0.25s ease; 33 | -ms-transition: all 0.25s ease; 34 | transition: all 0.25s ease; 35 | } 36 | 37 | &:hover { 38 | &:after { 39 | top: 3px; 40 | height: 6px; 41 | } 42 | } 43 | } 44 | 45 | 46 | //nicer error messages during development 47 | .errorify { 48 | color: red; 49 | padding: 20px; 50 | font-family: 'Courier', monospace; 51 | position: absolute; 52 | top: 0; 53 | left: 0; 54 | width: 100%; 55 | height: 100%; 56 | background: white; 57 | } -------------------------------------------------------------------------------- /vendors/postprocessing/RenderPass.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author alteredq / http://alteredqualia.com/ 3 | */ 4 | 5 | THREE.RenderPass = function ( scene, camera, overrideMaterial, clearColor, clearAlpha ) { 6 | 7 | this.scene = scene; 8 | this.camera = camera; 9 | 10 | this.overrideMaterial = overrideMaterial; 11 | 12 | this.clearColor = clearColor; 13 | this.clearAlpha = ( clearAlpha !== undefined ) ? clearAlpha : 1; 14 | 15 | this.oldClearColor = new THREE.Color(); 16 | this.oldClearAlpha = 1; 17 | 18 | this.enabled = true; 19 | this.clear = true; 20 | this.needsSwap = false; 21 | 22 | }; 23 | 24 | THREE.RenderPass.prototype = { 25 | 26 | render: function ( renderer, writeBuffer, readBuffer, delta ) { 27 | 28 | this.scene.overrideMaterial = this.overrideMaterial; 29 | 30 | if ( this.clearColor ) { 31 | 32 | this.oldClearColor.copy( renderer.getClearColor() ); 33 | this.oldClearAlpha = renderer.getClearAlpha(); 34 | 35 | renderer.setClearColor( this.clearColor, this.clearAlpha ); 36 | 37 | } 38 | 39 | renderer.render( this.scene, this.camera, readBuffer, this.clear ); 40 | 41 | if ( this.clearColor ) { 42 | 43 | renderer.setClearColor( this.oldClearColor, this.oldClearAlpha ); 44 | 45 | } 46 | 47 | this.scene.overrideMaterial = null; 48 | 49 | } 50 | 51 | }; 52 | -------------------------------------------------------------------------------- /vendors/postprocessing/TexturePass.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author alteredq / http://alteredqualia.com/ 3 | */ 4 | 5 | THREE.TexturePass = function ( texture, opacity ) { 6 | 7 | if ( THREE.CopyShader === undefined ) 8 | console.error( "THREE.TexturePass relies on THREE.CopyShader" ); 9 | 10 | var shader = THREE.CopyShader; 11 | 12 | this.uniforms = THREE.UniformsUtils.clone( shader.uniforms ); 13 | 14 | this.uniforms[ "opacity" ].value = ( opacity !== undefined ) ? opacity : 1.0; 15 | this.uniforms[ "tDiffuse" ].value = texture; 16 | 17 | this.material = new THREE.ShaderMaterial( { 18 | 19 | uniforms: this.uniforms, 20 | vertexShader: shader.vertexShader, 21 | fragmentShader: shader.fragmentShader 22 | 23 | } ); 24 | 25 | this.enabled = true; 26 | this.needsSwap = false; 27 | 28 | 29 | this.camera = new THREE.OrthographicCamera( -1, 1, 1, -1, 0, 1 ); 30 | this.scene = new THREE.Scene(); 31 | 32 | this.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), null ); 33 | this.scene.add( this.quad ); 34 | 35 | }; 36 | 37 | THREE.TexturePass.prototype = { 38 | 39 | render: function ( renderer, writeBuffer, readBuffer, delta ) { 40 | 41 | this.quad.material = this.material; 42 | 43 | renderer.render( this.scene, this.camera, readBuffer ); 44 | 45 | } 46 | 47 | }; 48 | -------------------------------------------------------------------------------- /vendors/shader-odango-set/.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | -------------------------------------------------------------------------------- /vendors/shader-odango-set/main.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * my custom shader kit for post processing with three.js 4 | * 5 | * based on three.js shaders 6 | * https://github.com/mrdoob/three.js/tree/master/examples/js/shaders 7 | * 8 | * 9 | * 10 | */ 11 | 12 | module.exports = { 13 | 'copy' : require('./shaders/copy/main'), 14 | 'gray' : require('./shaders/gray/main'), 15 | 'blur' : require('./shaders/blur/main'), 16 | 'normal' : require('./shaders/normal/main'), 17 | 'displayPixel' : require('./shaders/displacePixel/main') 18 | }; -------------------------------------------------------------------------------- /vendors/shader-odango-set/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "shader-odango-kit", 3 | "version": "0.0.1", 4 | "main": "main.js", 5 | "repository": { 6 | "type": "git", 7 | "url": "git@github.com:kenjiSpecial/shader-odango-set.git" 8 | }, 9 | "homepage": "https://github.com/kenjiSpecial/shader-odango-set", 10 | "devDependencies": { 11 | "glslify": "^2.3.1" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /vendors/shader-odango-set/shaders/00common/shader.vert: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main(){ 4 | vUv = uv; 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 6 | } -------------------------------------------------------------------------------- /vendors/shader-odango-set/shaders/blur/main.js: -------------------------------------------------------------------------------- 1 | var glslify = require('glslify'); 2 | 3 | module.exports = { 4 | uniforms: { 5 | "tDiffuse": { type: "t", value: null }, 6 | "uWindow" : { type: "v2", value: null } 7 | }, 8 | vertexShader : glslify('../00common/shader.vert'), 9 | fragmentShader : glslify('./shader.frag') 10 | }; -------------------------------------------------------------------------------- /vendors/shader-odango-set/shaders/blur/shader.frag: -------------------------------------------------------------------------------- 1 | 2 | varying vec2 vUv; 3 | uniform sampler2D tDiffuse; 4 | uniform vec2 uWindow; 5 | 6 | float kernel[9]; 7 | vec2 offset[9]; 8 | 9 | void main(){ 10 | vec4 sum = vec4(0.0); 11 | 12 | float dx = 1.0/uWindow.x; 13 | float dy = 1.0/uWindow.y; 14 | offset[0] = vec2(-dx, -dy); 15 | offset[1] = vec2(0.0, -dy); 16 | offset[2] = vec2(dx, -dy); 17 | 18 | offset[3] = vec2(-dx, 0.0); 19 | offset[4] = vec2(0.0, 0.0); 20 | offset[5] = vec2(dx, 0.0); 21 | 22 | offset[6] = vec2(-dx, dy); 23 | offset[7] = vec2(0.0, dy); 24 | offset[8] = vec2(dx, dy); 25 | 26 | kernel[0] = 1.0/16.0; kernel[1] = 2.0/16.0; kernel[2] = 1.0/16.0; 27 | kernel[3] = 2.0/16.0; kernel[4] = 4.0/16.0; kernel[5] = 2.0/16.0; 28 | kernel[6] = 1.0/16.0; kernel[7] = 2.0/16.0; kernel[8] = 1.0/16.0; 29 | 30 | for(int i = 0; i < 9; i++){ 31 | vec4 tmp = texture2D( tDiffuse, vUv + offset[i]); 32 | sum += tmp * kernel[i]; 33 | } 34 | 35 | gl_FragColor = sum; 36 | } -------------------------------------------------------------------------------- /vendors/shader-odango-set/shaders/common/shader.vert: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main(){ 4 | vUv = uv; 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 6 | } -------------------------------------------------------------------------------- /vendors/shader-odango-set/shaders/copy/main.js: -------------------------------------------------------------------------------- 1 | var glslify = require('glslify') 2 | 3 | module.exports = { 4 | uniforms: { 5 | "tDiffuse": { type: "t", value: null }, 6 | "opacity": { type: "f", value: 1.0 } 7 | }, 8 | vertexShader : glslify('../00common/shader.vert'), 9 | fragmentShader : glslify('./shader.frag') 10 | }; -------------------------------------------------------------------------------- /vendors/shader-odango-set/shaders/copy/shader.frag: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | uniform float opacity; 3 | 4 | uniform sampler2D tDiffuse; 5 | 6 | void main() { 7 | vec4 texel = texture2D( tDiffuse, vUv ); 8 | gl_FragColor = texel * opacity; 9 | } 10 | -------------------------------------------------------------------------------- /vendors/shader-odango-set/shaders/displacePixel/main.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Created by kenjisaito on 11/8/15. 4 | * 5 | * Based on ofxDisplacePixels.h 6 | * 7 | * https://github.com/patriciogonzalezvivo/ofxFX/blob/master/src/operations/ofxDisplacePixels.h 8 | * 9 | * Use a normalMap (tex0) to displace pixels 10 | * 11 | */ 12 | 13 | var glslify = require('glslify'); 14 | 15 | module.exports = { 16 | uniforms: { 17 | "backBuffer" : { type: "t" , value: null }, 18 | "normalTexture" : { type: "t" , value: null }, 19 | "uWindow" : { type: "v2", value: null } 20 | }, 21 | vertexShader : glslify('../00common/shader.vert'), 22 | fragmentShader : glslify('./shader.frag') 23 | }; 24 | 25 | -------------------------------------------------------------------------------- /vendors/shader-odango-set/shaders/gray/main.js: -------------------------------------------------------------------------------- 1 | 2 | // Based on of 3 | // Based on http://www.iquilezles.org/apps/shadertoy/ Postprocessing shader 4 | // 5 | 6 | var glslify = require('glslify') 7 | 8 | module.exports = { 9 | uniforms: { 10 | "tDiffuse": { type: "t", value: null }, 11 | "uWindow" : { type: "v2", value: null } 12 | }, 13 | vertexShader : glslify('../00common/shader.vert'), 14 | fragmentShader : glslify('./shader.frag') 15 | }; -------------------------------------------------------------------------------- /vendors/shader-odango-set/shaders/gray/shader.frag: -------------------------------------------------------------------------------- 1 | 2 | varying vec2 vUv; 3 | uniform sampler2D tDiffuse; 4 | 5 | void main(){ 6 | vec4 texel = texture2D( tDiffuse, vUv ); 7 | float luminance = dot( vec3 (0.2125, 0.7154, 0.0721), vec3(texel)); 8 | gl_FragColor = vec4(luminance, luminance, luminance, texel.a); 9 | } -------------------------------------------------------------------------------- /vendors/shader-odango-set/shaders/normal/main.js: -------------------------------------------------------------------------------- 1 | var glslify = require('glslify') 2 | 3 | module.exports = { 4 | uniforms: { 5 | "tDiffuse": { type: "t", value: null }, 6 | "uWindow": { type: "v2", value: null } 7 | }, 8 | vertexShader : glslify('../00common/shader.vert'), 9 | fragmentShader : glslify('./shader.frag') 10 | }; -------------------------------------------------------------------------------- /vendors/shaders/BasicShader.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author mrdoob / http://www.mrdoob.com 3 | * 4 | * Simple test shader 5 | */ 6 | 7 | THREE.BasicShader = { 8 | 9 | uniforms: {}, 10 | 11 | vertexShader: [ 12 | 13 | "void main() {", 14 | 15 | "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );", 16 | 17 | "}" 18 | 19 | ].join("\n"), 20 | 21 | fragmentShader: [ 22 | 23 | "void main() {", 24 | 25 | "gl_FragColor = vec4( 1.0, 0.0, 0.0, 0.5 );", 26 | 27 | "}" 28 | 29 | ].join("\n") 30 | 31 | }; 32 | -------------------------------------------------------------------------------- /vendors/shaders/BlendShader.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author alteredq / http://alteredqualia.com/ 3 | * 4 | * Blend two textures 5 | */ 6 | 7 | THREE.BlendShader = { 8 | 9 | uniforms: { 10 | 11 | "tDiffuse1": { type: "t", value: null }, 12 | "tDiffuse2": { type: "t", value: null }, 13 | "mixRatio": { type: "f", value: 0.5 }, 14 | "opacity": { type: "f", value: 1.0 } 15 | 16 | }, 17 | 18 | vertexShader: [ 19 | 20 | "varying vec2 vUv;", 21 | 22 | "void main() {", 23 | 24 | "vUv = uv;", 25 | "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );", 26 | 27 | "}" 28 | 29 | ].join("\n"), 30 | 31 | fragmentShader: [ 32 | 33 | "uniform float opacity;", 34 | "uniform float mixRatio;", 35 | 36 | "uniform sampler2D tDiffuse1;", 37 | "uniform sampler2D tDiffuse2;", 38 | 39 | "varying vec2 vUv;", 40 | 41 | "void main() {", 42 | 43 | "vec4 texel1 = texture2D( tDiffuse1, vUv );", 44 | "vec4 texel2 = texture2D( tDiffuse2, vUv );", 45 | "gl_FragColor = opacity * mix( texel1, texel2, mixRatio );", 46 | 47 | "}" 48 | 49 | ].join("\n") 50 | 51 | }; 52 | -------------------------------------------------------------------------------- /vendors/shaders/ColorCorrectionShader.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author alteredq / http://alteredqualia.com/ 3 | * 4 | * Color correction 5 | */ 6 | 7 | THREE.ColorCorrectionShader = { 8 | 9 | uniforms: { 10 | 11 | "tDiffuse": { type: "t", value: null }, 12 | "powRGB": { type: "v3", value: new THREE.Vector3( 2, 2, 2 ) }, 13 | "mulRGB": { type: "v3", value: new THREE.Vector3( 1, 1, 1 ) }, 14 | "addRGB": { type: "v3", value: new THREE.Vector3( 0, 0, 0 ) } 15 | 16 | }, 17 | 18 | vertexShader: [ 19 | 20 | "varying vec2 vUv;", 21 | 22 | "void main() {", 23 | 24 | "vUv = uv;", 25 | 26 | "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );", 27 | 28 | "}" 29 | 30 | ].join("\n"), 31 | 32 | fragmentShader: [ 33 | 34 | "uniform sampler2D tDiffuse;", 35 | "uniform vec3 powRGB;", 36 | "uniform vec3 mulRGB;", 37 | "uniform vec3 addRGB;", 38 | 39 | "varying vec2 vUv;", 40 | 41 | "void main() {", 42 | 43 | "gl_FragColor = texture2D( tDiffuse, vUv );", 44 | "gl_FragColor.rgb = mulRGB * pow( ( gl_FragColor.rgb + addRGB ), powRGB );", 45 | 46 | "}" 47 | 48 | ].join("\n") 49 | 50 | }; 51 | -------------------------------------------------------------------------------- /vendors/shaders/ColorifyShader.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author alteredq / http://alteredqualia.com/ 3 | * 4 | * Colorify shader 5 | */ 6 | 7 | THREE.ColorifyShader = { 8 | 9 | uniforms: { 10 | 11 | "tDiffuse": { type: "t", value: null }, 12 | "color": { type: "c", value: new THREE.Color( 0xffffff ) } 13 | 14 | }, 15 | 16 | vertexShader: [ 17 | 18 | "varying vec2 vUv;", 19 | 20 | "void main() {", 21 | 22 | "vUv = uv;", 23 | "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );", 24 | 25 | "}" 26 | 27 | ].join("\n"), 28 | 29 | fragmentShader: [ 30 | 31 | "uniform vec3 color;", 32 | "uniform sampler2D tDiffuse;", 33 | 34 | "varying vec2 vUv;", 35 | 36 | "void main() {", 37 | 38 | "vec4 texel = texture2D( tDiffuse, vUv );", 39 | 40 | "vec3 luma = vec3( 0.299, 0.587, 0.114 );", 41 | "float v = dot( texel.xyz, luma );", 42 | 43 | "gl_FragColor = vec4( v * color, texel.w );", 44 | 45 | "}" 46 | 47 | ].join("\n") 48 | 49 | }; 50 | -------------------------------------------------------------------------------- /vendors/shaders/CopyShader.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author alteredq / http://alteredqualia.com/ 3 | * 4 | * Full-screen textured quad shader 5 | */ 6 | 7 | THREE.CopyShader = { 8 | 9 | uniforms: { 10 | 11 | "tDiffuse": { type: "t", value: null }, 12 | "opacity": { type: "f", value: 1.0 } 13 | 14 | }, 15 | 16 | vertexShader: [ 17 | 18 | "varying vec2 vUv;", 19 | 20 | "void main() {", 21 | 22 | "vUv = uv;", 23 | "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );", 24 | 25 | "}" 26 | 27 | ].join("\n"), 28 | 29 | fragmentShader: [ 30 | 31 | "uniform float opacity;", 32 | 33 | "uniform sampler2D tDiffuse;", 34 | 35 | "varying vec2 vUv;", 36 | 37 | "void main() {", 38 | 39 | "vec4 texel = texture2D( tDiffuse, vUv );", 40 | "gl_FragColor = opacity * texel;", 41 | 42 | "}" 43 | 44 | ].join("\n") 45 | 46 | }; 47 | -------------------------------------------------------------------------------- /vendors/shaders/DOFMipMapShader.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author alteredq / http://alteredqualia.com/ 3 | * 4 | * Depth-of-field shader using mipmaps 5 | * - from Matt Handley @applmak 6 | * - requires power-of-2 sized render target with enabled mipmaps 7 | */ 8 | 9 | THREE.DOFMipMapShader = { 10 | 11 | uniforms: { 12 | 13 | "tColor": { type: "t", value: null }, 14 | "tDepth": { type: "t", value: null }, 15 | "focus": { type: "f", value: 1.0 }, 16 | "maxblur": { type: "f", value: 1.0 } 17 | 18 | }, 19 | 20 | vertexShader: [ 21 | 22 | "varying vec2 vUv;", 23 | 24 | "void main() {", 25 | 26 | "vUv = uv;", 27 | "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );", 28 | 29 | "}" 30 | 31 | ].join("\n"), 32 | 33 | fragmentShader: [ 34 | 35 | "uniform float focus;", 36 | "uniform float maxblur;", 37 | 38 | "uniform sampler2D tColor;", 39 | "uniform sampler2D tDepth;", 40 | 41 | "varying vec2 vUv;", 42 | 43 | "void main() {", 44 | 45 | "vec4 depth = texture2D( tDepth, vUv );", 46 | 47 | "float factor = depth.x - focus;", 48 | 49 | "vec4 col = texture2D( tColor, vUv, 2.0 * maxblur * abs( focus - depth.x ) );", 50 | 51 | "gl_FragColor = col;", 52 | "gl_FragColor.a = 1.0;", 53 | 54 | "}" 55 | 56 | ].join("\n") 57 | 58 | }; 59 | -------------------------------------------------------------------------------- /vendors/shaders/LuminosityShader.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author alteredq / http://alteredqualia.com/ 3 | * 4 | * Luminosity 5 | * http://en.wikipedia.org/wiki/Luminosity 6 | */ 7 | 8 | THREE.LuminosityShader = { 9 | 10 | uniforms: { 11 | 12 | "tDiffuse": { type: "t", value: null } 13 | 14 | }, 15 | 16 | vertexShader: [ 17 | 18 | "varying vec2 vUv;", 19 | 20 | "void main() {", 21 | 22 | "vUv = uv;", 23 | 24 | "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );", 25 | 26 | "}" 27 | 28 | ].join("\n"), 29 | 30 | fragmentShader: [ 31 | 32 | "uniform sampler2D tDiffuse;", 33 | 34 | "varying vec2 vUv;", 35 | 36 | "void main() {", 37 | 38 | "vec4 texel = texture2D( tDiffuse, vUv );", 39 | 40 | "vec3 luma = vec3( 0.299, 0.587, 0.114 );", 41 | 42 | "float v = dot( texel.xyz, luma );", 43 | 44 | "gl_FragColor = vec4( v, v, v, texel.w );", 45 | 46 | "}" 47 | 48 | ].join("\n") 49 | 50 | }; 51 | -------------------------------------------------------------------------------- /vendors/shaders/MirrorShader.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author felixturner / http://airtight.cc/ 3 | * 4 | * Mirror Shader 5 | * Copies half the input to the other half 6 | * 7 | * side: side of input to mirror (0 = left, 1 = right, 2 = top, 3 = bottom) 8 | */ 9 | 10 | THREE.MirrorShader = { 11 | 12 | uniforms: { 13 | 14 | "tDiffuse": { type: "t", value: null }, 15 | "side": { type: "i", value: 1 } 16 | 17 | }, 18 | 19 | vertexShader: [ 20 | 21 | "varying vec2 vUv;", 22 | 23 | "void main() {", 24 | 25 | "vUv = uv;", 26 | "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );", 27 | 28 | "}" 29 | 30 | ].join("\n"), 31 | 32 | fragmentShader: [ 33 | 34 | "uniform sampler2D tDiffuse;", 35 | "uniform int side;", 36 | 37 | "varying vec2 vUv;", 38 | 39 | "void main() {", 40 | 41 | "vec2 p = vUv;", 42 | "if (side == 0){", 43 | "if (p.x > 0.5) p.x = 1.0 - p.x;", 44 | "}else if (side == 1){", 45 | "if (p.x < 0.5) p.x = 1.0 - p.x;", 46 | "}else if (side == 2){", 47 | "if (p.y < 0.5) p.y = 1.0 - p.y;", 48 | "}else if (side == 3){", 49 | "if (p.y > 0.5) p.y = 1.0 - p.y;", 50 | "} ", 51 | "vec4 color = texture2D(tDiffuse, p);", 52 | "gl_FragColor = color;", 53 | 54 | "}" 55 | 56 | ].join("\n") 57 | 58 | }; 59 | -------------------------------------------------------------------------------- /vendors/shaders/SepiaShader.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author alteredq / http://alteredqualia.com/ 3 | * 4 | * Sepia tone shader 5 | * based on glfx.js sepia shader 6 | * https://github.com/evanw/glfx.js 7 | */ 8 | 9 | THREE.SepiaShader = { 10 | 11 | uniforms: { 12 | 13 | "tDiffuse": { type: "t", value: null }, 14 | "amount": { type: "f", value: 1.0 } 15 | 16 | }, 17 | 18 | vertexShader: [ 19 | 20 | "varying vec2 vUv;", 21 | 22 | "void main() {", 23 | 24 | "vUv = uv;", 25 | "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );", 26 | 27 | "}" 28 | 29 | ].join("\n"), 30 | 31 | fragmentShader: [ 32 | 33 | "uniform float amount;", 34 | 35 | "uniform sampler2D tDiffuse;", 36 | 37 | "varying vec2 vUv;", 38 | 39 | "void main() {", 40 | 41 | "vec4 color = texture2D( tDiffuse, vUv );", 42 | "vec3 c = color.rgb;", 43 | 44 | "color.r = dot( c, vec3( 1.0 - 0.607 * amount, 0.769 * amount, 0.189 * amount ) );", 45 | "color.g = dot( c, vec3( 0.349 * amount, 1.0 - 0.314 * amount, 0.168 * amount ) );", 46 | "color.b = dot( c, vec3( 0.272 * amount, 0.534 * amount, 1.0 - 0.869 * amount ) );", 47 | 48 | "gl_FragColor = vec4( min( vec3( 1.0 ), color.rgb ), color.a );", 49 | 50 | "}" 51 | 52 | ].join("\n") 53 | 54 | }; 55 | -------------------------------------------------------------------------------- /vendors/shaders/TechnicolorShader.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author flimshaw / http://charliehoey.com 3 | * 4 | * Technicolor Shader 5 | * Simulates the look of the two-strip technicolor process popular in early 20th century films. 6 | * More historical info here: http://www.widescreenmuseum.com/oldcolor/technicolor1.htm 7 | * Demo here: http://charliehoey.com/technicolor_shader/shader_test.html 8 | */ 9 | 10 | THREE.TechnicolorShader = { 11 | 12 | uniforms: { 13 | 14 | "tDiffuse": { type: "t", value: null }, 15 | 16 | }, 17 | 18 | vertexShader: [ 19 | 20 | "varying vec2 vUv;", 21 | 22 | "void main() {", 23 | 24 | "vUv = uv;", 25 | "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );", 26 | 27 | "}" 28 | 29 | ].join("\n"), 30 | 31 | fragmentShader: [ 32 | 33 | "uniform sampler2D tDiffuse;", 34 | "varying vec2 vUv;", 35 | 36 | "void main() {", 37 | 38 | "vec4 tex = texture2D( tDiffuse, vec2( vUv.x, vUv.y ) );", 39 | "vec4 newTex = vec4(tex.r, (tex.g + tex.b) * .5, (tex.g + tex.b) * .5, 1.0);", 40 | 41 | "gl_FragColor = newTex;", 42 | 43 | "}" 44 | 45 | ].join("\n") 46 | 47 | }; 48 | -------------------------------------------------------------------------------- /vendors/shaders/UnpackDepthRGBAShader.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author alteredq / http://alteredqualia.com/ 3 | * 4 | * Unpack RGBA depth shader 5 | * - show RGBA encoded depth as monochrome color 6 | */ 7 | 8 | THREE.UnpackDepthRGBAShader = { 9 | 10 | uniforms: { 11 | 12 | "tDiffuse": { type: "t", value: null }, 13 | "opacity": { type: "f", value: 1.0 } 14 | 15 | }, 16 | 17 | vertexShader: [ 18 | 19 | "varying vec2 vUv;", 20 | 21 | "void main() {", 22 | 23 | "vUv = uv;", 24 | "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );", 25 | 26 | "}" 27 | 28 | ].join("\n"), 29 | 30 | fragmentShader: [ 31 | 32 | "uniform float opacity;", 33 | 34 | "uniform sampler2D tDiffuse;", 35 | 36 | "varying vec2 vUv;", 37 | 38 | // RGBA depth 39 | 40 | "float unpackDepth( const in vec4 rgba_depth ) {", 41 | 42 | "const vec4 bit_shift = vec4( 1.0 / ( 256.0 * 256.0 * 256.0 ), 1.0 / ( 256.0 * 256.0 ), 1.0 / 256.0, 1.0 );", 43 | "float depth = dot( rgba_depth, bit_shift );", 44 | "return depth;", 45 | 46 | "}", 47 | 48 | "void main() {", 49 | 50 | "float depth = 1.0 - unpackDepth( texture2D( tDiffuse, vUv ) );", 51 | "gl_FragColor = opacity * vec4( vec3( depth ), 1.0 );", 52 | 53 | "}" 54 | 55 | ].join("\n") 56 | 57 | }; 58 | -------------------------------------------------------------------------------- /vendors/swapRenderer/index.js: -------------------------------------------------------------------------------- 1 | var Implement = require('./implement'); 2 | var _ = require('lodash'); 3 | 4 | module.exports = (function(){ 5 | var SwapRenderer = function(opts){if(this.initialize) this.initialize(opts) }; 6 | 7 | // THREE.EventDispatcher.prototype.apply( SwapRenderer.prototype ); 8 | // Object 9 | 10 | /** property and method **/ 11 | 12 | _.extend(SwapRenderer.prototype, { 13 | initialize : Implement.initialize , 14 | createTexturePassProgram : Implement.createTexturePassProgram, 15 | createSimulationProgram : Implement.createSimulationProgram, 16 | swapUpdate : Implement.swapUpdate, 17 | swap : Implement.swap, 18 | update : Implement.update, 19 | render : Implement.render, 20 | pass : Implement.pass, 21 | out : Implement.out, 22 | reset : Implement.reset, 23 | resetRand : Implement.resetRand, 24 | changeDebugBaseCol : Implement.changeDebugBaseCol, 25 | debugOutput : Implement.debugOutput 26 | }); 27 | 28 | 29 | return SwapRenderer; 30 | 31 | })(); -------------------------------------------------------------------------------- /vendors/swapRenderer/shaders/pass/shader.frag: -------------------------------------------------------------------------------- 1 | uniform sampler2D texture; 2 | uniform vec3 baseCol; 3 | 4 | varying vec2 vUv; 5 | 6 | void main(){ 7 | gl_FragColor = texture2D(texture, vUv) + vec4(baseCol.rgb, 0.0); 8 | } -------------------------------------------------------------------------------- /vendors/swapRenderer/shaders/pass/shader.vert: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | vUv = uv; 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 6 | } -------------------------------------------------------------------------------- /vendors/swapRendererTarget/index.js: -------------------------------------------------------------------------------- 1 | var _ = require('lodash'); 2 | 3 | module.exports = (function(){ 4 | var SwapRendererTarget = function(opts){ 5 | this.width = opts.width; 6 | this.height = opts.height; 7 | 8 | this.front = new THREE.WebGLRenderTarget( this.width, this.height, {minFilter: THREE.NearestFilter, magFilter: THREE.NearestFilter, format: THREE.RGBAFormat, type:THREE.FloatType, stencilBuffer: false}); 9 | this.back = this.front.clone(); 10 | 11 | this.read = this.front; 12 | this.output = this.back; 13 | }; 14 | 15 | THREE.EventDispatcher.prototype.apply( SwapRendererTarget.prototype ); 16 | 17 | _.extend(SwapRendererTarget.prototype, { 18 | swap : function(){ 19 | // if(this.read == this.output) console.log('fuck'); 20 | 21 | if(this.read == this.front){ 22 | this.read = this.back; 23 | this.output = this.front; 24 | }else{ 25 | this.read = this.front; 26 | this.output = this.back; 27 | } 28 | }, 29 | }); 30 | 31 | return SwapRendererTarget; 32 | })(); -------------------------------------------------------------------------------- /vendors/utils.js: -------------------------------------------------------------------------------- 1 | var createCaption = require('vendors/caption'); 2 | 3 | module.exports = { 4 | createCaption : function(opts){ 5 | var title = opts.title; 6 | var caption = opts.caption; 7 | var url = opts.url; 8 | 9 | 10 | var captionTop = opts.top || 50; 11 | var captionLeft = opts.left || 30; 12 | 13 | var wrapper = createCaption(title, caption, url); 14 | wrapper.style.position = "absolute"; 15 | wrapper.style.top = captionTop + 'px'; 16 | wrapper.style.left = captionLeft + 'px'; 17 | 18 | return wrapper; 19 | }, 20 | createStats : function(opts){ 21 | var statsBottom = opts.bottom || 30; 22 | var statsLeft = opts.left || 30; 23 | 24 | var stats = new Stats(); 25 | stats.setMode( 0 ); // 0: fps, 1: ms, 2: mb 26 | 27 | // align top-left 28 | stats.domElement.style.position = 'absolute'; 29 | stats.domElement.style.bottom = statsBottom + 'px'; 30 | stats.domElement.style.left = statsLeft + 'px'; 31 | stats.domElement.style.zIndex= 9999; 32 | 33 | document.body.appendChild( stats.domElement ); 34 | 35 | return stats; 36 | } 37 | } --------------------------------------------------------------------------------