gl-react-native needs react-native-webgl dep, no longer native code

Fixes #131 Fixes #133 Fixes #146
gre · Aug 24, 2017 · 9ffa792 · 9ffa792
1 parent 8809d98
commit 9ffa792
Show file tree

Hide file tree

Showing 50 changed files with 204 additions and 4,806 deletions.
diff --git a/packages/cookbook-expo/inject-gl-react-implementation.js b/packages/cookbook-expo/inject-gl-react-implementation.js
@@ -1,10 +1,17 @@
 import Expo from "expo";
-import Image from "gl-react-expo/lib/Image";
 import { Surface } from "gl-react-expo";
 import { setRuntime } from "cookbook-rn-shared/lib/gl-react-implementation";
 setRuntime({
   name: "gl-react-expo",
   EXGLView: Expo.GLView,
   Surface,
-  Image,
+  endFrame: gl => gl.endFrameEXP(),
+  loadThreeJSTexture: (gl, src, texture) => {
+    let image = new Image();
+    image.onload = function() {
+      texture.image = image;
+      texture.needsUpdate = true;
+    };
+    image.src = src;
+  }
 });
diff --git a/packages/cookbook-rn-shared/package.json b/packages/cookbook-rn-shared/package.json
@@ -21,6 +21,6 @@
     "react-gl-transition": "^1.9.0",
     "react-motion": "^0.5.0",
     "seedrandom": "github:gre/seedrandom#released",
-    "three": "0.84.0"
+    "three": "0.85.0"
   }
 }
diff --git a/packages/cookbook-rn-shared/src/examples/three/demo.js b/packages/cookbook-rn-shared/src/examples/three/demo.js
@@ -1,6 +1,6 @@
 //@flow
 import getGLReactImplementation from "../../gl-react-implementation";
-const { Image } = getGLReactImplementation();
+const { Image, endFrame, loadThreeJSTexture } = getGLReactImplementation();
 const THREE = require("three");
 global.THREE = THREE;
 require("three/examples/js/renderers/Projector");
@@ -18,9 +18,9 @@ export default (gl: WebGLRenderingContext, initialProps: *) => {
       style: {},
       addEventListener: () => {},
       removeEventListener: () => {},
-      clientHeight: height,
+      clientHeight: height
     },
-    context: gl,
+    context: gl
   });
   renderer.setSize(width, height);
   renderer.setClearColor(0x000000, 1);
@@ -48,7 +48,7 @@ export default (gl: WebGLRenderingContext, initialProps: *) => {
       loadTexture(require("../../../images/skybox/py.jpg")), // top
       loadTexture(require("../../../images/skybox/ny.jpg")), // bottom
       loadTexture(require("../../../images/skybox/pz.jpg")), // back
-      loadTexture(require("../../../images/skybox/nz.jpg")), // front
+      loadTexture(require("../../../images/skybox/nz.jpg")) // front
     ];
     mesh = new THREE.Mesh(
       new THREE.BoxGeometry(300, 300, 300, 7, 7, 7),
@@ -68,7 +68,7 @@ export default (gl: WebGLRenderingContext, initialProps: *) => {
 
     let material = new THREE.MeshBasicMaterial({
       vertexColors: THREE.FaceColors,
-      overdraw: 0.5,
+      overdraw: 0.5
     });
 
     cube = new THREE.Mesh(geometry, material);
@@ -84,12 +84,7 @@ export default (gl: WebGLRenderingContext, initialProps: *) => {
   function loadTexture(src) {
     let texture = new THREE.Texture();
     let material = new THREE.MeshBasicMaterial({ map: texture, overdraw: 0.5 });
-    let image = new Image();
-    image.onload = function() {
-      texture.image = image;
-      texture.needsUpdate = true;
-    };
-    image.src = src;
+    loadThreeJSTexture(gl, src, texture, renderer);
     return material;
   }
   function animate() {
@@ -110,7 +105,7 @@ export default (gl: WebGLRenderingContext, initialProps: *) => {
     camera.lookAt(target);
     renderer.render(scene, camera);
     gl.flush();
-    gl.endFrameEXP();
+    endFrame(gl);
   }
 
   return {
@@ -132,6 +127,6 @@ export default (gl: WebGLRenderingContext, initialProps: *) => {
     },
     dispose() {
       cancelAnimationFrame(requestId);
-    },
+    }
   };
 };
diff --git a/packages/cookbook-rn-shared/yarn.lock b/packages/cookbook-rn-shared/yarn.lock
@@ -871,9 +871,9 @@ symbol-observable@^1.0.3:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.4.tgz#29bf615d4aa7121bdd898b22d4b3f9bc4e2aa03d"
 
-three@0.84.0:
-  version "0.84.0"
-  resolved "https://registry.yarnpkg.com/three/-/three-0.84.0.tgz#95be85a55a0fa002aa625ed559130957dcffd918"
+three@0.85.0:
+  version "0.85.0"
+  resolved "https://registry.yarnpkg.com/three/-/three-0.85.0.tgz#2efb33e8a449778fb8c71ac959e41bb81ef087d7"
 
 to-fast-properties@^1.0.1:
   version "1.0.3"

diff --git a/packages/cookbook-rn/inject-gl-react-implementation.js b/packages/cookbook-rn/inject-gl-react-implementation.js
@@ -1,10 +1,20 @@
-import EXGLView from "gl-react-native/lib/EXGLView";
-import Image from "gl-react-native/lib/Image";
+import { WebGLView } from "react-native-webgl";
 import { Surface } from "gl-react-native";
 import { setRuntime } from "cookbook-rn-shared/lib/gl-react-implementation";
 setRuntime({
   name: "gl-react-native",
-  EXGLView,
+  EXGLView: WebGLView,
   Surface,
-  Image,
+  endFrame: gl => gl.getExtension("RN").endFrame(),
+  loadThreeJSTexture: (gl, src, texture, renderer) => {
+    var properties = renderer.properties.get(texture);
+    gl
+      .getExtension("RN")
+      .loadTexture({ yflip: true, image: src })
+      .then(({ texture }) => {
+        properties.__webglTexture = texture;
+        properties.__webglInit = true;
+        texture.needsUpdate = true;
+      });
+  }
 });
diff --git a/packages/cookbook-rn/ios/cookbookrn.xcodeproj/project.pbxproj b/packages/cookbook-rn/ios/cookbookrn.xcodeproj/project.pbxproj
@@ -20,7 +20,7 @@
 		13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
 		13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
 		146834051AC3E58100842450 /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 146834041AC3E56700842450 /* libReact.a */; };
-		34F9AA6C1E65FD1700F77661 /* libRNGL.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 34F9AA6B1E65FD1200F77661 /* libRNGL.a */; };
+		348EACD41F4F0E680097765C /* libRNWebGL.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 348EACD31F4F0E590097765C /* libRNWebGL.a */; };
 		5E9157361DD0AC6A00FF2AA8 /* libRCTAnimation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5E9157331DD0AC6500FF2AA8 /* libRCTAnimation.a */; };
 		832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832341B51AAA6A8300B99B32 /* libRCTText.a */; };
 /* End PBXBuildFile section */
@@ -82,6 +82,13 @@
 			remoteGlobalIDString = 83CBBA2E1A601D0E00E9B192;
 			remoteInfo = React;
 		};
+		348EACD21F4F0E590097765C /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = 348EACCD1F4F0E590097765C /* RNWebGL.xcodeproj */;
+			proxyType = 2;
+			remoteGlobalIDString = 4107012F1ACB723B00C6AA39;
+			remoteInfo = RNWebGL;
+		};
 		34C8B0111F23440A000165A3 /* PBXContainerItemProxy */ = {
 			isa = PBXContainerItemProxy;
 			containerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */;
@@ -110,13 +117,6 @@
 			remoteGlobalIDString = 3D383D621EBD27B9005632C8;
 			remoteInfo = "double-conversion-tvOS";
 		};
-		34F9AA6A1E65FD1200F77661 /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = 34F9AA4D1E65FD1100F77661 /* RNGL.xcodeproj */;
-			proxyType = 2;
-			remoteGlobalIDString = 4107012F1ACB723B00C6AA39;
-			remoteInfo = RNGL;
-		};
 		3DAD3E831DF850E9000B6D8A /* PBXContainerItemProxy */ = {
 			isa = PBXContainerItemProxy;
 			containerPortal = 00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */;
@@ -257,7 +257,7 @@
 		13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = cookbookrn/Info.plist; sourceTree = "<group>"; };
 		13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = cookbookrn/main.m; sourceTree = "<group>"; };
 		146833FF1AC3E56700842450 /* React.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = React.xcodeproj; path = "../node_modules/react-native/React/React.xcodeproj"; sourceTree = "<group>"; };
-		34F9AA4D1E65FD1100F77661 /* RNGL.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RNGL.xcodeproj; path = "../node_modules/gl-react-native/ios/RNGL.xcodeproj"; sourceTree = "<group>"; };
+		348EACCD1F4F0E590097765C /* RNWebGL.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RNWebGL.xcodeproj; path = "../node_modules/react-native-webgl/ios/RNWebGL.xcodeproj"; sourceTree = "<group>"; };
 		5E91572D1DD0AC6500FF2AA8 /* RCTAnimation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTAnimation.xcodeproj; path = "../node_modules/react-native/Libraries/NativeAnimation/RCTAnimation.xcodeproj"; sourceTree = "<group>"; };
 		78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTLinking.xcodeproj; path = "../node_modules/react-native/Libraries/LinkingIOS/RCTLinking.xcodeproj"; sourceTree = "<group>"; };
 		832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = "../node_modules/react-native/Libraries/Text/RCTText.xcodeproj"; sourceTree = "<group>"; };
@@ -268,7 +268,7 @@
 			isa = PBXFrameworksBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
-				34F9AA6C1E65FD1700F77661 /* libRNGL.a in Frameworks */,
+				348EACD41F4F0E680097765C /* libRNWebGL.a in Frameworks */,
 				146834051AC3E58100842450 /* libReact.a in Frameworks */,
 				5E9157361DD0AC6A00FF2AA8 /* libRCTAnimation.a in Frameworks */,
 				00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */,
@@ -396,10 +396,10 @@
 			name = Products;
 			sourceTree = "<group>";
 		};
-		34F9AA4E1E65FD1100F77661 /* Products */ = {
+		348EACCE1F4F0E590097765C /* Products */ = {
 			isa = PBXGroup;
 			children = (
-				34F9AA6B1E65FD1200F77661 /* libRNGL.a */,
+				348EACD31F4F0E590097765C /* libRNWebGL.a */,
 			);
 			name = Products;
 			sourceTree = "<group>";
@@ -425,7 +425,7 @@
 		832341AE1AAA6A7D00B99B32 /* Libraries */ = {
 			isa = PBXGroup;
 			children = (
-				34F9AA4D1E65FD1100F77661 /* RNGL.xcodeproj */,
+				348EACCD1F4F0E590097765C /* RNWebGL.xcodeproj */,
 				5E91572D1DD0AC6500FF2AA8 /* RCTAnimation.xcodeproj */,
 				146833FF1AC3E56700842450 /* React.xcodeproj */,
 				00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */,
@@ -563,8 +563,8 @@
 					ProjectRef = 146833FF1AC3E56700842450 /* React.xcodeproj */;
 				},
 				{
-					ProductGroup = 34F9AA4E1E65FD1100F77661 /* Products */;
-					ProjectRef = 34F9AA4D1E65FD1100F77661 /* RNGL.xcodeproj */;
+					ProductGroup = 348EACCE1F4F0E590097765C /* Products */;
+					ProjectRef = 348EACCD1F4F0E590097765C /* RNWebGL.xcodeproj */;
 				},
 			);
 			projectRoot = "";
@@ -631,6 +631,13 @@
 			remoteRef = 146834031AC3E56700842450 /* PBXContainerItemProxy */;
 			sourceTree = BUILT_PRODUCTS_DIR;
 		};
+		348EACD31F4F0E590097765C /* libRNWebGL.a */ = {
+			isa = PBXReferenceProxy;
+			fileType = archive.ar;
+			path = libRNWebGL.a;
+			remoteRef = 348EACD21F4F0E590097765C /* PBXContainerItemProxy */;
+			sourceTree = BUILT_PRODUCTS_DIR;
+		};
 		34C8B0121F23440A000165A3 /* libthird-party.a */ = {
 			isa = PBXReferenceProxy;
 			fileType = archive.ar;
@@ -659,13 +666,6 @@
 			remoteRef = 34C8B0171F23440A000165A3 /* PBXContainerItemProxy */;
 			sourceTree = BUILT_PRODUCTS_DIR;
 		};
-		34F9AA6B1E65FD1200F77661 /* libRNGL.a */ = {
-			isa = PBXReferenceProxy;
-			fileType = archive.ar;
-			path = libRNGL.a;
-			remoteRef = 34F9AA6A1E65FD1200F77661 /* PBXContainerItemProxy */;
-			sourceTree = BUILT_PRODUCTS_DIR;
-		};
 		3DAD3E841DF850E9000B6D8A /* libRCTImage-tvOS.a */ = {
 			isa = PBXReferenceProxy;
 			fileType = archive.ar;

diff --git a/packages/cookbook-rn/package.json b/packages/cookbook-rn/package.json
@@ -12,7 +12,8 @@
     "gl-react-native": "^3.10.0",
     "prop-types": "^15.5.8",
     "react": "16.0.0-alpha.12",
-    "react-native": "~0.46.4"
+    "react-native": "0.47.2",
+    "react-native-webgl": "0.x"
   },
   "devDependencies": {
     "babel-preset-react-native": "~1.9.1",