wip #18

packages/react-gl-transition/package.json

@@ -1,12 +1,7 @@
 {
   "name": "react-gl-transition",
   "description": "React component to render a GL Transition in gl-react",
-  "keywords": [
-    "gl-react",
-    "webgl",
-    "react",
-    "react-component"
-  ],
+  "keywords": ["gl-react", "webgl", "react", "react-component"],
   "version": "1.13.0",
   "main": "lib/GLTransition.js",
   "license": "MIT",
@@ -22,7 +17,7 @@
     "babel-preset-stage-1": "^6.24.1"
   },
   "peerDependencies": {
-    "gl-react": "^3.5.0",
+    "gl-react": "^3.8.0",
     "react": "^15.5.4"
   },
   "dependencies": {}

packages/react-gl-transition/src/GLTransition.js

@@ -1,22 +1,47 @@
 //@flow
 import React, { Component } from "react";
-import { Node, connectSize } from "gl-react";
+import { Node, connectSize, Uniform } from "gl-react";
+
+// these functions make a GLSL code that map the texture2D uv to preserve ratio for a given ${r} image ratio.
+// there are different modes:
+const resizeModes: { [_: string]: * } = {
+  cover: (r: string) =>
+    `.5+(uv-.5)*vec2(min(ratio/${r},1.),min(${r}/ratio,1.))`,
+  contain: (r: string) =>
+    `.5+(uv-.5)*vec2(max(ratio/${r},1.),max(${r}/ratio,1.))`,
+  stretch: () => "uv"
+};
+
+const makeFrag = (
+  transitionGlsl: string,
+  resizeMode: string = "cover"
+): string => {
+  const r = resizeModes[resizeMode];
+  if (!r) throw new Error("invalid resizeMode=" + resizeMode);
+  return `\
+precision highp float;varying vec2 uv;uniform sampler2D from, to;uniform float progress, ratio, _fromR, _toR;vec4 getFromColor(vec2 uv){return texture2D(from,${r(
+    "_fromR"
+  )});}vec4 getToColor(vec2 uv){return texture2D(to,${r("_toR")});}
+${transitionGlsl}
+void main(){gl_FragColor=transition(uv);}`;
+};
 
 export default connectSize(
   class GLTransition extends Component {
     props: {
       transition: {
         glsl: string,
-        defaultParams?: Object,
+        defaultParams?: Object
       },
       transitionParams?: Object,
+      resizeMode?: string,
       progress: number,
       // from and to can be any value that are accepted by gl-react for textures.
       from: any,
       to: any,
       // provided by connectSize
       width: number,
-      height: number,
+      height: number
     };
     getUniformsWithProgress(progress: number) {
       const {
@@ -25,7 +50,7 @@ export default connectSize(
         from,
         to,
         width,
-        height,
+        height
       } = this.props;
       return {
         ...defaultParams,
@@ -34,36 +59,21 @@ export default connectSize(
         from,
         to,
         ratio: width / height,
+        _fromR: Uniform.textureSizeRatio(from),
+        _toR: Uniform.textureSizeRatio(to)
       };
     }
     setProgress = (progress: number) => {
       this.refs.node.setDrawProps({
-        uniforms: this.getUniformsWithProgress(progress),
+        uniforms: this.getUniformsWithProgress(progress)
       });
     };
     render() {
-      const { transition: { glsl }, progress } = this.props;
+      const { transition: { glsl }, resizeMode, progress } = this.props;
       return (
         <Node
           ref="node"
-          shader={{
-            frag: `
-    precision highp float;
-    varying vec2 uv;
-    uniform float progress, ratio;
-    uniform sampler2D from, to;
-    vec4 getFromColor (vec2 uv) {
-    return texture2D(from, uv);
-    }
-    vec4 getToColor (vec2 uv) {
-    return texture2D(to, uv);
-    }
-    ${glsl}
-    void main () {
-    float r = ratio;${/* THIS IS A NO OP just so uniform still exists after GL compilation */ ""}
-    gl_FragColor = transition(uv);
-    }`,
-          }}
+          shader={{ frag: makeFrag(glsl, resizeMode) }}
           uniforms={this.getUniformsWithProgress(progress)}
         />
       );