improve logs, fix image issue, add Simple example, start docs

- fix issue when setUniforms is called before setShader

Examples/AdvancedEffects/package.json

@@ -9,9 +9,5 @@
     "gl-react-native": "../..",
     "glsl-transitions": "^2015.8.17",
     "react-native": "^0.9.0"
-  },
-  "devDependencies": {
-    "eslint": "^1.1.0",
-    "eslint-plugin-react": "^3.2.3"
   }
 }

Examples/Simple/.flowconfig

+[ignore]
+
+# We fork some components by platform.
+.*/*.web.js
+.*/*.android.js
+
+# Some modules have their own node_modules with overlap
+.*/node_modules/node-haste/.*
+
+# Ignore react-tools where there are overlaps, but don't ignore anything that
+# react-native relies on
+.*/node_modules/react-tools/src/React.js
+.*/node_modules/react-tools/src/renderers/shared/reconciler/ReactInstanceHandles.js
+.*/node_modules/react-tools/src/renderers/shared/event/EventPropagators.js
+.*/node_modules/react-tools/src/renderers/shared/event/eventPlugins/ResponderEventPlugin.js
+.*/node_modules/react-tools/src/renderers/shared/event/eventPlugins/ResponderSyntheticEvent.js
+.*/node_modules/react-tools/src/renderers/shared/event/eventPlugins/ResponderTouchHistoryStore.js
+.*/node_modules/react-tools/src/shared/vendor/core/ExecutionEnvironment.js
+
+
+# Ignore commoner tests
+.*/node_modules/commoner/test/.*
+
+# See https://github.com/facebook/flow/issues/442
+.*/react-tools/node_modules/commoner/lib/reader.js
+
+# Ignore jest
+.*/react-native/node_modules/jest-cli/.*
+
+[include]
+
+[libs]
+node_modules/react-native/Libraries/react-native/react-native-interface.js
+
+[options]
+module.system=haste
+
+suppress_type=$FlowIssue
+suppress_type=$FlowFixMe
+suppress_type=$FixMe
+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(1[0-3]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(1[0-3]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
+
+[version]
+0.13.1

Examples/Simple/.gitignore

+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+project.xcworkspace
+
+# node.js
+#
+node_modules/
+npm-debug.log

Examples/Simple/.npmignore

+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+
+# node.js
+#
+node_modules/
+npm-debug.log

Examples/Simple/HelloGL.js

+const React = require("react-native");
+const GL = require("gl-react-native");
+
+const shaders = GL.Shaders.create({
+  helloGL: {
+    frag: `
+precision highp float;
+varying vec2 uv; // This variable vary in all pixel position (normalized from vec2(0.0,0.0) to vec2(1.0,1.0))
+
+void main () { // This function is called FOR EACH PIXEL
+  gl_FragColor = vec4(uv.x, uv.y, 0.5, 1.0); // red vary over X, green vary over Y, blue is 50%, alpha is 100%.
+}
+    `
+  }
+});
+
+class HelloGL extends React.Component {
+  render () {
+    const { width, height } = this.props;
+    return <GL.View
+      shader={shaders.helloGL}
+      width={width}
+      height={height}
+    />;
+  }
+}
+
+module.exports = HelloGL;

Examples/Simple/Sepia.js

+const React = require("react-native");
+const GL = require("gl-react-native");
+
+const shaders = GL.Shaders.create({
+  sepia: {
+    frag: `
+precision highp float;
+varying vec2 uv;
+uniform sampler2D image;
+uniform float factor;
+
+const vec3 sepia = vec3(0.44, 0.26, 0.08);
+
+void main () {
+  vec4 c = texture2D(image, uv);
+  gl_FragColor = vec4(mix(c.rgb, sepia, factor), c.a);
+}
+    `
+  }
+});
+
+class Sepia extends React.Component {
+  render () {
+    const { width, height, factor, image } = this.props;
+    return <GL.View
+      shader={shaders.sepia}
+      width={width}
+      height={height}
+      uniforms={{ factor, image }}
+    />;
+  }
+}
+
+module.exports = Sepia;

Examples/Simple/Simple.xcodeproj/xcshareddata/xcschemes/Simple.xcscheme

+<?xml version="1.0" encoding="UTF-8"?>
+<Scheme
+   LastUpgradeVersion = "0620"
+   version = "1.3">
+   <BuildAction
+      parallelizeBuildables = "YES"
+      buildImplicitDependencies = "YES">
+      <BuildActionEntries>
+         <BuildActionEntry
+            buildForTesting = "YES"
+            buildForRunning = "YES"
+            buildForProfiling = "YES"
+            buildForArchiving = "YES"
+            buildForAnalyzing = "YES">
+            <BuildableReference
+               BuildableIdentifier = "primary"
+               BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
+               BuildableName = "Simple.app"
+               BlueprintName = "Simple"
+               ReferencedContainer = "container:Simple.xcodeproj">
+            </BuildableReference>
+         </BuildActionEntry>
+         <BuildActionEntry
+            buildForTesting = "YES"
+            buildForRunning = "YES"
+            buildForProfiling = "NO"
+            buildForArchiving = "NO"
+            buildForAnalyzing = "YES">
+            <BuildableReference
+               BuildableIdentifier = "primary"
+               BlueprintIdentifier = "00E356ED1AD99517003FC87E"
+               BuildableName = "SimpleTests.xctest"
+               BlueprintName = "SimpleTests"
+               ReferencedContainer = "container:Simple.xcodeproj">
+            </BuildableReference>
+         </BuildActionEntry>
+      </BuildActionEntries>
+   </BuildAction>
+   <TestAction
+      selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
+      selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
+      shouldUseLaunchSchemeArgsEnv = "YES"
+      buildConfiguration = "Debug">
+      <Testables>
+         <TestableReference
+            skipped = "NO">
+            <BuildableReference
+               BuildableIdentifier = "primary"
+               BlueprintIdentifier = "00E356ED1AD99517003FC87E"
+               BuildableName = "SimpleTests.xctest"
+               BlueprintName = "SimpleTests"
+               ReferencedContainer = "container:Simple.xcodeproj">
+            </BuildableReference>
+         </TestableReference>
+      </Testables>
+      <MacroExpansion>
+         <BuildableReference
+            BuildableIdentifier = "primary"
+            BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
+            BuildableName = "Simple.app"
+            BlueprintName = "Simple"
+            ReferencedContainer = "container:Simple.xcodeproj">
+         </BuildableReference>
+      </MacroExpansion>
+   </TestAction>
+   <LaunchAction
+      selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
+      selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
+      launchStyle = "0"
+      useCustomWorkingDirectory = "NO"
+      buildConfiguration = "Debug"
+      ignoresPersistentStateOnLaunch = "NO"
+      debugDocumentVersioning = "YES"
+      allowLocationSimulation = "YES">
+      <BuildableProductRunnable
+         runnableDebuggingMode = "0">
+         <BuildableReference
+            BuildableIdentifier = "primary"
+            BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
+            BuildableName = "Simple.app"
+            BlueprintName = "Simple"
+            ReferencedContainer = "container:Simple.xcodeproj">
+         </BuildableReference>
+      </BuildableProductRunnable>
+      <AdditionalOptions>
+      </AdditionalOptions>
+   </LaunchAction>
+   <ProfileAction
+      shouldUseLaunchSchemeArgsEnv = "YES"
+      savedToolIdentifier = ""
+      useCustomWorkingDirectory = "NO"
+      buildConfiguration = "Release"
+      debugDocumentVersioning = "YES">
+      <BuildableProductRunnable
+         runnableDebuggingMode = "0">
+         <BuildableReference
+            BuildableIdentifier = "primary"
+            BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
+            BuildableName = "Simple.app"
+            BlueprintName = "Simple"
+            ReferencedContainer = "container:Simple.xcodeproj">
+         </BuildableReference>
+      </BuildableProductRunnable>
+   </ProfileAction>
+   <AnalyzeAction
+      buildConfiguration = "Debug">
+   </AnalyzeAction>
+   <ArchiveAction
+      buildConfiguration = "Release"
+      revealArchiveInOrganizer = "YES">
+   </ArchiveAction>
+</Scheme>

Examples/Simple/SimpleTests/Info.plist

+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>CFBundleDevelopmentRegion</key>
+	<string>en</string>
+	<key>CFBundleExecutable</key>
+	<string>$(EXECUTABLE_NAME)</string>
+	<key>CFBundleIdentifier</key>
+	<string>org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)</string>
+	<key>CFBundleInfoDictionaryVersion</key>
+	<string>6.0</string>
+	<key>CFBundleName</key>
+	<string>$(PRODUCT_NAME)</string>
+	<key>CFBundlePackageType</key>
+	<string>BNDL</string>
+	<key>CFBundleShortVersionString</key>
+	<string>1.0</string>
+	<key>CFBundleSignature</key>
+	<string>????</string>
+	<key>CFBundleVersion</key>
+	<string>1</string>
+</dict>
+</plist>

Examples/Simple/SimpleTests/SimpleTests.m

+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+#import <UIKit/UIKit.h>
+#import <XCTest/XCTest.h>
+
+#import "RCTAssert.h"
+#import "RCTRedBox.h"
+#import "RCTRootView.h"
+
+#define TIMEOUT_SECONDS 240
+#define TEXT_TO_LOOK_FOR @"Welcome to React Native!"
+
+@interface SimpleTests : XCTestCase
+
+@end
+
+@implementation SimpleTests
+
+
+- (BOOL)findSubviewInView:(UIView *)view matching:(BOOL(^)(UIView *view))test
+{
+  if (test(view)) {
+    return YES;
+  }
+  for (UIView *subview in [view subviews]) {
+    if ([self findSubviewInView:subview matching:test]) {
+      return YES;
+    }
+  }
+  return NO;
+}
+
+- (void)testRendersWelcomeScreen {
+  UIViewController *vc = [[[[UIApplication sharedApplication] delegate] window] rootViewController];
+  NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS];
+  BOOL foundElement = NO;
+  NSString *redboxError = nil;
+
+  while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) {
+    [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]];
+    [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]];
+
+    redboxError = [[RCTRedBox sharedInstance] currentErrorMessage];
+
+    foundElement = [self findSubviewInView:vc.view matching:^BOOL(UIView *view) {
+      if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) {
+        return YES;
+      }
+      return NO;
+    }];
+  }
+
+  XCTAssertNil(redboxError, @"RedBox error: %@", redboxError);
+  XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS);
+}
+
+
+@end

Examples/Simple/iOS/AppDelegate.h

+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+#import <UIKit/UIKit.h>
+
+@interface AppDelegate : UIResponder <UIApplicationDelegate>
+
+@property (nonatomic, strong) UIWindow *window;
+
+@end

Examples/Simple/iOS/AppDelegate.m

+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+#import "AppDelegate.h"
+
+#import "RCTRootView.h"
+
+@implementation AppDelegate
+
+- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
+{
+  NSURL *jsCodeLocation;
+
+  /**
+   * Loading JavaScript code - uncomment the one you want.
+   *
+   * OPTION 1
+   * Load from development server. Start the server from the repository root:
+   *
+   * $ npm start
+   *
+   * To run on device, change `localhost` to the IP address of your computer
+   * (you can get this by typing `ifconfig` into the terminal and selecting the
+   * `inet` value under `en0:`) and make sure your computer and iOS device are
+   * on the same Wi-Fi network.
+   */
+
+  jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];
+
+  /**
+   * OPTION 2
+   * Load from pre-bundled file on disk. To re-generate the static bundle
+   * from the root of your project directory, run
+   *
+   * $ react-native bundle --minify
+   *
+   * see http://facebook.github.io/react-native/docs/runningondevice.html
+   */
+
+//   jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
+
+  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
+                                                      moduleName:@"Simple"
+                                                   launchOptions:launchOptions];
+
+  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
+  UIViewController *rootViewController = [[UIViewController alloc] init];
+  rootViewController.view = rootView;
+  self.window.rootViewController = rootViewController;
+  [self.window makeKeyAndVisible];
+  return YES;
+}
+
+@end

Examples/Simple/iOS/Base.lproj/LaunchScreen.xib

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="7702" systemVersion="14D136" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES">
+    <dependencies>
+        <deployment identifier="iOS"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="7701"/>
+        <capability name="Constraints with non-1.0 multipliers" minToolsVersion="5.1"/>
+    </dependencies>
+    <objects>
+        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
+        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
+        <view contentMode="scaleToFill" id="iN0-l3-epB">
+            <rect key="frame" x="0.0" y="0.0" width="480" height="480"/>
+            <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
+            <subviews>
+                <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Powered by React Native" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumFontSize="9" translatesAutoresizingMaskIntoConstraints="NO" id="8ie-xW-0ye">
+                    <rect key="frame" x="20" y="439" width="441" height="21"/>
+                    <fontDescription key="fontDescription" type="system" pointSize="17"/>
+                    <color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
+                    <nil key="highlightedColor"/>
+                </label>
+                <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Simple" textAlignment="center" lineBreakMode="middleTruncation" baselineAdjustment="alignBaselines" minimumFontSize="18" translatesAutoresizingMaskIntoConstraints="NO" id="kId-c2-rCX">
+                    <rect key="frame" x="20" y="140" width="441" height="43"/>
+                    <fontDescription key="fontDescription" type="boldSystem" pointSize="36"/>
+                    <color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
+                    <nil key="highlightedColor"/>
+                </label>
+            </subviews>
+            <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="calibratedWhite"/>
+            <constraints>
+                <constraint firstItem="kId-c2-rCX" firstAttribute="centerY" secondItem="iN0-l3-epB" secondAttribute="bottom" multiplier="1/3" constant="1" id="5cJ-9S-tgC"/>
+                <constraint firstAttribute="centerX" secondItem="kId-c2-rCX" secondAttribute="centerX" id="Koa-jz-hwk"/>
+                <constraint firstAttribute="bottom" secondItem="8ie-xW-0ye" secondAttribute="bottom" constant="20" id="Kzo-t9-V3l"/>
+                <constraint firstItem="8ie-xW-0ye" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leading" constant="20" symbolic="YES" id="MfP-vx-nX0"/>
+                <constraint firstAttribute="centerX" secondItem="8ie-xW-0ye" secondAttribute="centerX" id="ZEH-qu-HZ9"/>
+                <constraint firstItem="kId-c2-rCX" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leading" constant="20" symbolic="YES" id="fvb-Df-36g"/>
+            </constraints>
+            <nil key="simulatedStatusBarMetrics"/>
+            <freeformSimulatedSizeMetrics key="simulatedDestinationMetrics"/>
+            <point key="canvasLocation" x="548" y="455"/>
+        </view>
+    </objects>
+</document>

Examples/Simple/iOS/Images.xcassets/AppIcon.appiconset/Contents.json

+{
+  "images" : [
+    {
+      "idiom" : "iphone",
+      "size" : "29x29",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "iphone",
+      "size" : "29x29",
+      "scale" : "3x"
+    },
+    {
+      "idiom" : "iphone",
+      "size" : "40x40",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "iphone",
+      "size" : "40x40",
+      "scale" : "3x"
+    },
+    {
+      "idiom" : "iphone",
+      "size" : "60x60",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "iphone",
+      "size" : "60x60",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
\ No newline at end of file

Examples/Simple/iOS/Info.plist

+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>CFBundleDevelopmentRegion</key>
+	<string>en</string>
+	<key>CFBundleExecutable</key>
+	<string>$(EXECUTABLE_NAME)</string>
+	<key>CFBundleIdentifier</key>
+	<string>org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)</string>
+	<key>CFBundleInfoDictionaryVersion</key>
+	<string>6.0</string>
+	<key>CFBundleName</key>
+	<string>$(PRODUCT_NAME)</string>
+	<key>CFBundlePackageType</key>
+	<string>APPL</string>
+	<key>CFBundleShortVersionString</key>
+	<string>1.0</string>
+	<key>CFBundleSignature</key>
+	<string>????</string>
+	<key>CFBundleVersion</key>
+	<string>1</string>
+	<key>LSRequiresIPhoneOS</key>
+	<true/>
+	<key>NSAppTransportSecurity</key>
+	<dict>
+		<key>NSAllowsArbitraryLoads</key>
+		<true/>
+	</dict>
+	<key>NSLocationWhenInUseUsageDescription</key>
+	<string></string>
+	<key>UILaunchStoryboardName</key>
+	<string>LaunchScreen</string>
+	<key>UIRequiredDeviceCapabilities</key>
+	<array>
+		<string>armv7</string>
+	</array>
+	<key>UISupportedInterfaceOrientations</key>
+	<array>
+		<string>UIInterfaceOrientationPortrait</string>
+	</array>
+	<key>UIViewControllerBasedStatusBarAppearance</key>
+	<false/>
+</dict>
+</plist>

Examples/Simple/iOS/main.jsbundle

+// Offline JS
+// To re-generate the offline bundle, run this from the root of your project:
+//
+// $ react-native bundle --minify
+//
+// See http://facebook.github.io/react-native/docs/runningondevice.html for more details.
+
+throw new Error('Offline JS file is empty. See iOS/main.jsbundle for instructions');

Examples/Simple/iOS/main.m

+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+#import <UIKit/UIKit.h>
+
+#import "AppDelegate.h"
+
+int main(int argc, char * argv[]) {
+  @autoreleasepool {
+    return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));
+  }
+}

Examples/Simple/index.ios.js

+const React = require("react-native");
+const {
+  AppRegistry,
+  StyleSheet,
+  Text,
+  View,
+  ScrollView,
+} = React;
+
+const HelloGL = require("./HelloGL");
+const Sepia = require("./Sepia");
+
+const Simple = React.createClass({
+  render: function() {
+    return <ScrollView style={styles.container}>
+      <Text style={styles.title}>
+        Welcome to GL React Native!
+      </Text>
+      <View style={styles.demos}>
+        <Text style={styles.demoTitle}>1. Hello GL</Text>
+        <View style={styles.demo}>
+          <HelloGL width={256} height={144} />
+        </View>
+
+        <Text style={styles.demoTitle}>2. Sepia on an Image</Text>
+        <View style={styles.demo}>
+          <Sepia
+            width={256}
+            height={144}
+            factor={0.6}
+            image={{ uri: "http://i.imgur.com/qVxHrkY.jpg" }} />
+        </View>
+      </View>
+    </ScrollView>;
+  }
+});
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#fff",
+  },
+  title: {
+    fontSize: 20,
+    textAlign: "center",
+    margin: 5,
+    marginBottom: 20,
+    fontWeight: "bold"
+  },
+  demos: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  demoTitle: {
+    fontSize: 20,
+    margin: 5,
+    fontStyle: "italic"
+  },
+});
+
+AppRegistry.registerComponent("Simple", () => Simple);

Examples/Simple/package.json

+{
+  "name": "Simple",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "start": "node_modules/react-native/packager/packager.sh"
+  },
+  "dependencies": {
+    "gl-react-native": "file:../..",
+    "react-native": "^0.9.0"
+  }
+}

README.md

@@ -2,31 +2,43 @@
 
 `gl-react-native` implements OpenGL bindings for react-native.
 
-It lets you implements complex effects on top of images and components
+It lets you implement complex effects on top of images and components
 and in the Virtual DOM descriptive paradigm.
 
-More technically, `gl-react-native` allows you to write a fragment shader that renders either: in a standalone way, using images, or over any UI content.
+More technically, `gl-react-native` allows you to write a fragment shader that covers a View. This shader can render: some graphics/demos, any effects over images, any effects over any UI content.
 
 A React version also exists: [`gl-react`](http://github.com/ProjectSeptemberInc/gl-react).
 
+## Focus
+
+- **Virtual DOM and immutable** paradigm: OpenGL is a low level imperative and mutable API. This library takes the best of it to expose it in a immutable and descriptive way.
+- **Performance**
+- **Developer experience**: the application does not crash if developer make mistakes, it uses React Native error message to display GLSL errors and help him developing the effects with Live Reload support.
+- **Uniform bindings**: The library implements binding from the JavaScript objects to the OpenGL GLSL language types (bool, int, float, vec2, vec3, vec4, mat2, mat3, mat4, sampler2D...)
+- **Support for images** as texture uniform.
+- **Support for UIView rasterisation** as a texture uniform.
+
 
 ## Installation
 
-a few steps are required to install gl-react-native:
+a few steps are required to install `gl-react-native`:
 
-### install the dependency from your React Native application.
+**Install the dependency from your React Native application:**
 
 ```
 npm i --save gl-react-native
 ```
 
-### Configure your React Native Application
+**Configure your React Native Application:**
 
 ![](docs/install-steps.png)
 
 
-## Credits / Inspiration
+## Influence / Credits
 
 - [stack.gl](http://stack.gl/) approach
 - [GLSL.io](http://glsl.io/) and [Diaporama](https://github.com/gre/diaporama)
 - Source code of [React Native](https://github.com/facebook/react-native)
+
+
+## Documentation

RNGL/GLShader.h

@@ -11,7 +11,7 @@
 /**
  * Create a new shader with a vertex and fragment
  */
-- (instancetype)initWithContext: (EAGLContext*)context withVert:(NSString *)vert withFrag:(NSString *)frag;
+- (instancetype)initWithContext: (EAGLContext*)context withName:(NSString *)name withVert:(NSString *)vert withFrag:(NSString *)frag;
 
 /**
  * Bind the shader program as the current one

RNGL/GLShader.m

@@ -12,6 +12,7 @@
  */
 @implementation GLShader
 {
+  NSString *_name;
   EAGLContext *_context; // Context related to this shader
   GLuint program; // Program of the shader
   GLuint buffer; // the buffer currently contains 2 static triangles covering the surface
@@ -20,10 +21,11 @@
   NSDictionary *_uniformLocations; // The uniform locations cache
 }
 
-- (instancetype)initWithContext: (EAGLContext*)context withVert:(NSString *)vert withFrag:(NSString *)frag
+- (instancetype)initWithContext: (EAGLContext*)context withName:(NSString *)name withVert:(NSString *)vert withFrag:(NSString *)frag
 {
   self = [super init];
   if (self) {
+    _name = name;
     _context = context;
     _vert = vert;
     _frag = frag;
@@ -41,7 +43,7 @@
 - (bool) ensureContext
 {
   if (![EAGLContext setCurrentContext:_context]) {
-    RCTLogError(@"Failed to set current OpenGL context");
+    RCTLogError(@"Shader '%@': Failed to set current OpenGL context", _name);
     return false;
   }
   return true;
@@ -51,7 +53,7 @@
 {
   if (![self ensureContext]) return;
   if ( glIsProgram(program) != GL_TRUE ){
-    RCTLogError(@"not a program!");
+    RCTLogError(@"Shader '%@': not a program!", _name);
     return;
   }
   glUseProgram(program);
@@ -63,7 +65,7 @@
 - (void) setUniform: (NSString *)name withValue:(id)value
 {
   if ([_uniformLocations objectForKey:name] == nil) {
-    RCTLogError(@"uniform '%@' does not exist", name);
+    RCTLogError(@"Shader '%@': uniform '%@' does not exist", _name, name);
     return;
   }
   GLint location = [_uniformLocations[name] intValue];
@@ -74,7 +76,7 @@
     case GL_FLOAT: {
       NSNumber *v = [RCTConvert NSNumber:value];
       if (!v) {
-        RCTLogError(@"uniform '%@' should be a float", name);
+        RCTLogError(@"Shader '%@': uniform '%@' should be a float", _name, name);
         return;
       }
       glUniform1f(location, [v floatValue]);
@@ -84,7 +86,7 @@
     case GL_INT: {
       NSNumber *v = [RCTConvert NSNumber:value];
       if (!v) {
-        RCTLogError(@"uniform '%@' should be a int", name);
+        RCTLogError(@"Shader '%@': uniform '%@' should be a int", _name, name);
         return;
       }
       glUniform1i(location, [v intValue]);
@@ -100,14 +102,14 @@
     case GL_FLOAT_VEC2: {
       NSArray *v = [RCTConvert NSArray:value];
       if (!v || [v count]!=2) {
-        RCTLogError(@"uniform '%@' should be an array of 2 numbers", name);
+        RCTLogError(@"Shader '%@': uniform '%@' should be an array of 2 numbers", _name, name);
         return;
       }
       GLfloat arr[2];
       for (int i=0; i<2; i++) {
         NSNumber *n = [RCTConvert NSNumber: v[i]];
         if (!n) {
-          RCTLogError(@"uniform '%@' array should only contains numbers", name);
+          RCTLogError(@"Shader '%@': uniform '%@' array should only contains numbers", _name, name);
           return;
         }
         arr[i] = [n floatValue];
@@ -119,14 +121,14 @@
     case GL_FLOAT_VEC3: {
       NSArray *v = [RCTConvert NSArray:value];
       if (!v || [v count]!=3) {
-        RCTLogError(@"uniform '%@' should be an array of 3 numbers", name);
+        RCTLogError(@"Shader '%@': uniform '%@' should be an array of 3 numbers", _name, name);
         return;
       }
       GLfloat arr[3];
       for (int i=0; i<3; i++) {
         NSNumber *n = [RCTConvert NSNumber: v[i]];
         if (!n) {
-          RCTLogError(@"uniform '%@' array should only contains numbers", name);
+          RCTLogError(@"Shader '%@': uniform '%@' array should only contains numbers", _name, name);
           return;
         }
         arr[i] = [n floatValue];
@@ -138,14 +140,14 @@
     case GL_FLOAT_VEC4: {
       NSArray *v = [RCTConvert NSArray:value];
       if (!v || [v count]!=4) {
-        RCTLogError(@"uniform '%@' should be an array of 4 numbers", name);
+        RCTLogError(@"Shader '%@': uniform '%@' should be an array of 4 numbers", _name, name);
         return;
       }
       GLfloat arr[4];
       for (int i=0; i<4; i++) {
         NSNumber *n = [RCTConvert NSNumber: v[i]];
         if (!n) {
-          RCTLogError(@"uniform '%@' array should only contains numbers", name);
+          RCTLogError(@"Shader '%@': uniform '%@' array should only contains numbers", _name, name);
           return;
         }
         arr[i] = [n floatValue];
@@ -158,14 +160,14 @@
     case GL_INT_VEC2: {
       NSArray *v = [RCTConvert NSArray:value];
       if (!v || [v count]!=2) {
-        RCTLogError(@"uniform '%@' should be an array of 2 numbers", name);
+        RCTLogError(@"Shader '%@': uniform '%@' should be an array of 2 numbers", _name, name);
         return;
       }
       GLint arr[2];
       for (int i=0; i<2; i++) {
         NSNumber *n = [RCTConvert NSNumber: v[i]];
         if (!n) {
-          RCTLogError(@"uniform '%@' array should only contains numbers", name);
+          RCTLogError(@"Shader '%@': uniform '%@' array should only contains numbers", _name, name);
           return;
         }
         arr[i] = [n intValue];
@@ -178,14 +180,14 @@
     case GL_INT_VEC3: {
       NSArray *v = [RCTConvert NSArray:value];
       if (!v || [v count]!=3) {
-        RCTLogError(@"uniform '%@' should be an array of 3 numbers", name);
+        RCTLogError(@"Shader '%@': uniform '%@' should be an array of 3 numbers", _name, name);
         return;
       }
       GLint arr[3];
       for (int i=0; i<3; i++) {
         NSNumber *n = [RCTConvert NSNumber: v[i]];
         if (!n) {
-          RCTLogError(@"uniform '%@' array should only contains numbers", name);
+          RCTLogError(@"Shader '%@': uniform '%@' array should only contains numbers", _name, name);
           return;
         }
         arr[i] = [n intValue];
@@ -198,14 +200,14 @@
     case GL_INT_VEC4: {
       NSArray *v = [RCTConvert NSArray:value];
       if (!v || [v count]!=4) {
-        RCTLogError(@"uniform '%@' should be an array of 4 numbers", name);
+        RCTLogError(@"Shader '%@': uniform '%@' should be an array of 4 numbers", _name, name);
         return;
       }
       GLint arr[4];
       for (int i=0; i<4; i++) {
         NSNumber *n = [RCTConvert NSNumber: v[i]];
         if (!n) {
-          RCTLogError(@"uniform '%@' array should only contains numbers", name);
+          RCTLogError(@"Shader '%@': uniform '%@' array should only contains numbers", _name, name);
           return;
         }
         arr[i] = [n intValue];
@@ -217,14 +219,14 @@
     case GL_FLOAT_MAT2: {
       NSArray *v = [RCTConvert NSArray:value];
       if (!v || [v count]!=4) {
-        RCTLogError(@"uniform '%@' should be an array of 4 numbers (matrix)", name);
+        RCTLogError(@"Shader '%@': uniform '%@' should be an array of 4 numbers (matrix)", _name, name);
         return;
       }
       GLfloat arr[4];
       for (int i=0; i<4; i++) {
         NSNumber *n = [RCTConvert NSNumber: v[i]];
         if (!n) {
-          RCTLogError(@"uniform '%@' array should only contains numbers", name);
+          RCTLogError(@"Shader '%@': uniform '%@' array should only contains numbers", _name, name);
           return;
         }
         arr[i] = [n floatValue];
@@ -236,14 +238,14 @@
     case GL_FLOAT_MAT3: {
       NSArray *v = [RCTConvert NSArray:value];
       if (!v || [v count]!=9) {
-        RCTLogError(@"uniform '%@' should be an array of 9 numbers (matrix)", name);
+        RCTLogError(@"Shader '%@': uniform '%@' should be an array of 9 numbers (matrix)", _name, name);
         return;
       }
       GLfloat arr[9];
       for (int i=0; i<9; i++) {
         NSNumber *n = [RCTConvert NSNumber: v[i]];
         if (!n) {
-          RCTLogError(@"uniform '%@' array should only contains numbers", name);
+          RCTLogError(@"Shader '%@': uniform '%@' array should only contains numbers", _name, name);
           return;
         }
         arr[i] = [n floatValue];
@@ -255,14 +257,14 @@
     case GL_FLOAT_MAT4: {
       NSArray *v = [RCTConvert NSArray:value];
       if (!v || [v count]!=16) {
-        RCTLogError(@"uniform '%@' should be an array of 16 numbers (matrix)", name);
+        RCTLogError(@"Shader '%@': uniform '%@' should be an array of 16 numbers (matrix)", _name, name);
         return;
       }
       GLfloat arr[16];
       for (int i=0; i<16; i++) {
         NSNumber *n = [RCTConvert NSNumber: v[i]];
         if (!n) {
-          RCTLogError(@"uniform '%@' array should only contains numbers", name);
+          RCTLogError(@"Shader '%@': uniform '%@' array should only contains numbers", _name, name);
           return;
         }
         arr[i] = [n floatValue];
@@ -279,7 +281,7 @@
     }
 
     default:
-      RCTLogError(@"uniform '%@': unsupported type %i", name, type);
+      RCTLogError(@"Shader '%@': uniform '%@': unsupported type %i", _name, name, type);
   }
 }
 
@@ -292,7 +294,7 @@
     GLchar messages[256];
     glGetProgramInfoLog(program, sizeof(messages), 0, &messages[0]);
     NSString *messageString = [NSString stringWithUTF8String:messages];
-    RCTLogError(@"GL: Validation failed %@", messageString);
+    RCTLogError(@"Shader '%@': Validation failed %@", _name, messageString);
   }
 }
 
@@ -325,10 +327,10 @@
   glEnable(GL_BLEND);
   glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
 
-  GLuint vertex = compileShader(_vert, GL_VERTEX_SHADER);
+  GLuint vertex = compileShader(_name, _vert, GL_VERTEX_SHADER);
   if (vertex == -1) return;
 
-  GLuint fragment = compileShader(_frag, GL_FRAGMENT_SHADER);
+  GLuint fragment = compileShader(_name, _frag, GL_FRAGMENT_SHADER);
   if (fragment == -1) return;
 
   program = glCreateProgram();
@@ -342,7 +344,7 @@
     GLchar messages[256];
     glGetProgramInfoLog(program, sizeof(messages), 0, &messages[0]);
     NSString *messageString = [NSString stringWithUTF8String:messages];
-    RCTLogError(@"GL: Linking failed %@", messageString);
+    RCTLogError(@"Shader '%@': Linking failed %@", _name, messageString);
     return;
   }
 

RNGL/GLShadersRegistry.m

@@ -37,9 +37,13 @@ RCT_EXPORT_MODULE();
 
 static NSString* fullViewportVert = @"attribute vec2 position;varying vec2 uv;void main() {gl_Position = vec4(position,0.0,1.0);uv = vec2(0.5, 0.5) * (position+vec2(1.0, 1.0));}";
 
-RCT_EXPORT_METHOD(register:(nonnull NSNumber *)id withConfig:(NSDictionary *)config) {
+RCT_EXPORT_METHOD(register:(nonnull NSNumber *)id withConfig:(NSDictionary *)config withName:(NSString *)name) {
   NSString *frag = [RCTConvert NSString:config[@"frag"]];
-  GLShader *shader = [[GLShader alloc] initWithContext:_context withVert:fullViewportVert withFrag:frag];
+  if (!frag) {
+    RCTLogError(@"Shader '%@': missing frag field", name);
+    return;
+  }
+  GLShader *shader = [[GLShader alloc] initWithContext:_context withName:name withVert:fullViewportVert withFrag:frag];
   _shaders[id] = shader;
 }
 

RNGL/GLUtils.h

 #import <GLKit/GLKit.h>
 #import "ImageData.h"
 
-GLuint compileShader (NSString* shaderString, GLenum shaderType);
+GLuint compileShader (NSString *shaderName, NSString *shaderString, GLenum shaderType);
 
 ImageData* genPixelsEmpty (int width, int height);
 ImageData* genPixelsRandom (int width, int height);

RNGL/GLUtils.m

@@ -2,7 +2,7 @@
 #import "GLUtils.h"
 #import "RCTLog.h"
 
-GLuint compileShader (NSString* shaderString, GLenum shaderType) {
+GLuint compileShader (NSString* shaderName, NSString* shaderString, GLenum shaderType) {
   
   GLuint shaderHandle = glCreateShader(shaderType);
   
@@ -18,7 +18,7 @@ GLuint compileShader (NSString* shaderString, GLenum shaderType) {
     GLchar messages[256];
     glGetShaderInfoLog(shaderHandle, sizeof(messages), 0, &messages[0]);
     NSString *messageString = [NSString stringWithUTF8String:messages];
-    RCTLogError(@"GL: Shader Failed to compile: %@", messageString);
+    RCTLogError(@"Shader '%@' failed to compile: %@", shaderName, messageString);
     return -1;
   }
   

RNGL/GLView.m

@@ -69,8 +69,8 @@ RCT_NOT_IMPLEMENTED(-init)
   _textures = textures;
   _textureUnits = textureUnits;
   
-  // use the shader's context (currently it is the same for all shaders)
-  [self setContext:glShader.context];
+  [self setContext:glShader.context]; // use the shader's context (currently it is the same for all shaders)
+  [self setUniforms:_uniforms]; // Ensure uniforms are not set before
   [self setNeedsDisplay];
 }
 

book.json

+{
+  "structure": {
+    "summary": "docs/README.md"
+  }
+}

docs/README.md

+# Summary
+
+* [The API](api/README.md)
+  * [GL.Shaders.create](api/Shaders.create.md)
+  * [GL.View](api/View.md)
+  * [GL.Target](api/Target.md)
+* Examples
+  * [Hello World](examples/1.md)
+  * [Effects over Image](examples/2.md)
+  * [Effects over anything](examples/3.md)
+  * [Animation](examples/4.md)
+  * [Touch responsive](examples/5.md)
+  * [Upload Indicator](examples/6.md)

docs/api/README.md

+# The API

docs/examples/1.md

+

index.js

@@ -19,7 +19,7 @@ const Shaders = {
       invariant(typeof shader === "object" && typeof shader.frag === "string",
       "invalid shader given to Shaders.create(). A valid shader is a { frag: String }");
       const id = _uid ++;
-      GLShadersRegistry.register(id, shader);
+      GLShadersRegistry.register(id, shader, key);
       result[key] = id;
     }
     return result;

package.json

@@ -19,5 +19,9 @@
   "dependencies": {
     "invariant": "^2.1.0",
     "react-native": "^0.9.0"
+  },
+  "devDependencies": {
+    "eslint": "^1.1.0",
+    "eslint-plugin-react": "^3.2.3"
   }
 }