jamespantalones · July 21, 2017 21:53 · Jul 21, 2017 · Jul 21, 2017 · Jul 21, 2017
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015"]
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/.jshintrc b/.jshintrc
@@ -0,0 +1,4 @@
+{
+  "esversion":6,
+  "asi": true
+}
diff --git a/bundle.js b/bundle.js
diff --git a/index.html b/index.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+    <title>Monkey Shader</title>
+    <style>
+      html,
+      body {
+        width: 100%;
+        margin: 0;
+        padding: 0;
+      }
+    </style>
+  </head>
+
+  <body>
+    <script src="bundle.js"></script>
+  </body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,75 @@
+const THREE = require('three')
+const shader = require('./shader')
+
+
+let renderer = null
+let scene = null
+let camera = null
+let mesh = null
+let material = null
+
+let w = window.innerWidth
+let h = window.innerHeight
+let time = 0.0
+let scroll = 0.0
+
+
+function render(){
+
+  time += 0.001
+
+  material.uniforms.u_time.value = time
+  material.uniforms.u_scroll.value = window.pageYOffset / (document.documentElement.scrollHeight - h)
+
+  renderer.render(scene, camera)
+
+  requestAnimationFrame( render )
+}
+
+
+function start(){
+  renderer = new THREE.WebGLRenderer()
+  renderer.setSize(w,h)
+
+  renderer.domElement.style.position = 'fixed'
+  renderer.domElement.style.top = 0
+  renderer.domElement.style.left = 0
+
+  document.body.appendChild(renderer.domElement)
+  document.body.style.height = '5000px'
+
+  scene = new THREE.Scene()
+
+  camera = new THREE.PerspectiveCamera(75, w / h, 0.1, 1000)
+
+  const geometry = new THREE.PlaneGeometry(32,32,1)
+
+  const loader = new THREE.TextureLoader()
+
+  material = new THREE.ShaderMaterial({
+    uniforms: shader.uniforms,
+    vertexShader: shader.vertexShader,
+    fragmentShader: shader.fragmentShader
+  })
+
+
+  material.uniforms.u_resolution.value = new THREE.Vector2(w,h)
+
+  loader.load(
+    'monkey.png',
+    texture => {
+      //texture.wrapS = texture.wrapT = THREE.RepeatWrapping
+      material.uniforms.u_texture.value = texture
+    }
+  )
+
+  mesh = new THREE.Mesh(geometry, material)
+  scene.add(mesh)
+
+  camera.position.z = 5
+
+  render()
+}
+
+
+start()
diff --git a/monkey.png b/monkey.png
diff --git a/monkey2.jpg b/monkey2.jpg
diff --git a/package.json b/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "scroll-shader",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev": "budo index.js:bundle.js --live -t [babelify --presets [es2015]]",
+    "build": "browserify index.js -o bundle.js -t [babelify --presets [es2015]]"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "babel-preset-es2015": "^6.24.1",
+    "babelify": "^7.3.0",
+    "budo": "^10.0.3"
+  },
+  "dependencies": {
+    "three": "^0.86.0"
+  }
+}
diff --git a/shader.js b/shader.js
@@ -0,0 +1,77 @@
+const THREE = require('three')
+
+
+const shader = {
+  uniforms: {
+    u_texture: {type: 't', value: null},
+    u_mouse: {type: 'v2', value: new THREE.Vector2()},
+    u_resolution: {type: 'v2', value: new THREE.Vector2()},
+    u_aspect: {type: '1f', value: window.innerWidth / window.innerHeight},
+    u_time: {type: '1f', value: 0.0},
+    u_scroll: {type: '1f', value: 0.0},
+    u_velocity: {type: '1f', value: 0.0}
+  },
+
+  vertexShader: `
+    precision mediump float;
+
+    varying vec2 vUv;
+
+    void main(){
+      vUv = uv;
+      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+    }
+  `,
+
+  fragmentShader: `
+
+    varying vec2 vUv;
+
+    #define TWO_PI 6.2831853072
+    #define PI 3.14159265359
+
+    uniform float u_time;
+    uniform vec2 u_resolution;
+    uniform float u_scroll;
+    uniform float u_aspect;
+    uniform float u_velocity;
+    uniform sampler2D u_texture;
+
+    const float timescale = 0.1;
+    const float twist = 0.5;
+
+    vec2 rotate(vec2 v, float angle){
+      float c = cos(angle);
+      float s = sin(angle);
+      return v * mat2(c, -s, s, c);
+    }
+
+      float nsin(float value){
+        return sin(value * TWO_PI) * 0.5 + 0.5;
+      }
+
+
+    void main(){
+
+      float time = u_time * timescale;
+      vec2 center = vec2(sin(TWO_PI * u_time * 0.2), cos(TWO_PI * u_time * 0.2)) * nsin(u_time * 0.3) * 0.5;
+      vec2 tx = (gl_FragCoord.xy / u_resolution.xy - 0.5 - center) * vec2(u_aspect, 1.0);
+      float len = 1.0 - length(tx);
+      float zoom = 1.0 + u_scroll - len * 3.0 * (1.0 - u_scroll) + len * u_velocity * 10.0;
+
+      vec4 imgColor = texture2D(
+        u_texture,
+        rotate(
+          (tx + center) * vec2(1.0, -1.0) * zoom,
+          twist * TWO_PI * nsin(len + u_time) * u_scroll + u_time
+        ) + 0.5
+      );
+
+
+      //gl_FragColor = texture2D(u_texture, vUv);
+      gl_FragColor = imgColor;
+    }
+  `
+}
+
+module.exports = shader