Implement supports for ndarray textures – #14

gre · Sep 21, 2015 · ddbd0b1 · ddbd0b1
1 parent d40a122
commit ddbd0b1
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 16 deletions.
diff --git a/Examples/Tests/index.js b/Examples/Tests/index.js
@@ -7,6 +7,9 @@ const HelloGL = require("./HelloGL");
 const Display2 = require("./Display2");
 const { Surface, Text } = require("react-canvas");
 const GL = require("gl-react");
+const ndarray = require("ndarray");
+
+/* eslint-disable no-console */
 
 GL.Shaders.list().map(id => {
   console.log(`Shader '${GL.Shaders.getName(id)}' -> ${id}`);
@@ -23,7 +26,7 @@ class Demo extends React.Component {
     this.onLoad = this.onLoad.bind(this);
     this.onProgress = this.onProgress.bind(this);
   }
-  onLoad (e) {
+  onLoad () {
     console.log("LOADED");
   }
   onProgress (p) {
@@ -62,7 +65,8 @@ class Demo extends React.Component {
         {txt}
       </Layer>;
 
-    return <Display2 width={600} height={600} vertical preload onLoad={this.onLoad} onProgress={this.onProgress}>
+    return <div>
+      <Display2 width={600} height={600} vertical preload onLoad={this.onLoad} onProgress={this.onProgress}>
         <Display2 width={600} height={300}>
         <Add width={300} height={300}>
           {txt}
@@ -79,9 +83,26 @@ class Demo extends React.Component {
         </Display2>
       </Display2>
       {txt}
-    </Display2>;
-
-
+    </Display2>
+    <Display2 width={100} height={200} vertical>
+      <Display2 width={100} height={100} vertical>
+      {ndarray(new Float64Array([
+        1, 0, 0, 1,
+        0, 1, 0, 1,
+        0, 0, 1, 1
+      ]), [3, 1, 4])}
+      {{
+        disableLinearInterpolation: true,
+        array: ndarray(new Float64Array([
+          1, 0, 0, 1,
+          0, 1, 0, 1,
+          0, 0, 1, 1
+        ]), [3, 1, 4])
+      }}
+    </Display2>
+      {require("baboon-image")}
+    </Display2>
+    </div>;
   }
 }
 

diff --git a/Examples/Tests/package.json b/Examples/Tests/package.json
@@ -23,6 +23,8 @@
     "uglify-js": "^2.4.24"
   },
   "dependencies": {
+    "baboon-image": "^2.0.0",
+    "ndarray": "^1.0.18",
     "gl-react": "file:../..",
     "glsl-fast-gaussian-blur": "^1.0.2",
     "react": "^0.13.3",

diff --git a/src/GLCanvas.js b/src/GLCanvas.js
@@ -60,6 +60,7 @@ class GLCanvas extends Component {
     this._shaders = {};
     this._fbos = {};
     this._contentTextures = [];
+    this._standaloneTextures = [];
     if (props.imagesToPreload.length > 0) {
       this._preloading = [];
     }
@@ -128,6 +129,7 @@ class GLCanvas extends Component {
   componentWillUnmount () {
     // Destroy everything to avoid leaks.
     this._contentTextures.forEach(t => t.dispose());
+    this._standaloneTextures.forEach(t => t.dispose());
     [
       this._shaders,
       this._images,
@@ -203,10 +205,12 @@ class GLCanvas extends Component {
     // old values
     const prevShaders = this._shaders;
     const prevImages = this._images;
+    const prevStandaloneTextures = this._standaloneTextures;
 
     // new values (mutated from traverseTree)
     const shaders = {}; // shaders cache (per Shader ID)
     const images = {}; // images cache (per src)
+    const standaloneTextures = [];
 
     // traverseTree compute renderData from the data.
     // frameIndex is the framebuffer index of a node. (root is -1)
@@ -262,21 +266,35 @@ class GLCanvas extends Component {
 
           case "image":
             const val = value.value;
-            const src = val.uri;
-            invariant(src && typeof src === "string", "Shader '%s': An image src is defined for uniform '%s'", shader.name, uniformName);
-            let image;
-            if (src in images) {
-              image = images[src];
+            if (!val) {
+              const emptyTexture = createTexture(gl, [ 2, 2 ]); // empty texture
+              textures[uniformName] = emptyTexture;
+              standaloneTextures.push(emptyTexture);
             }
-            else if (src in prevImages) {
-              image = images[src] = prevImages[src];
+            else if ("uri" in val) {
+              const src = val.uri;
+              invariant(src && typeof src === "string", "Shader '%s': An image src is defined for uniform '%s'", shader.name, uniformName);
+              let image;
+              if (src in images) {
+                image = images[src];
+              }
+              else if (src in prevImages) {
+                image = images[src] = prevImages[src];
+              }
+              else {
+                image = new GLImage(gl, onImageLoad);
+                images[src] = image;
+              }
+              image.src = src; // Always set the image src. GLImage internally won't do anything if it doesn't change
+              textures[uniformName] = image.getTexture(); // GLImage will compute and cache a gl-texture2d instance
             }
             else {
-              image = new GLImage(gl, onImageLoad);
-              images[src] = image;
+              const tex = createTexture(gl, val.array ? val.array : val);
+              if (!val.disableLinearInterpolation)
+                tex.minFilter = tex.magFilter = gl.LINEAR;
+              textures[uniformName] = tex;
+              standaloneTextures.push(tex);
             }
-            image.src = src; // Always set the image src. GLImage internally won't do anything if it doesn't change
-            textures[uniformName] = image.getTexture(); // GLImage will compute and cache a gl-texture2d instance
             break;
 
           default:
@@ -300,9 +318,11 @@ class GLCanvas extends Component {
     // Destroy previous states that have disappeared
     diffDispose(shaders, prevShaders);
     diffDispose(images, prevImages);
+    prevStandaloneTextures.forEach(t => t.dispose());
 
     this._shaders = shaders;
     this._images = images;
+    this._standaloneTextures = standaloneTextures;
 
     this._needsSyncData = false;
     this.requestDraw();