From b11648224061cfc8cf59407af93952013b8b0519 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABtan=20Renaudeau?= <renaudeau.gaetan@gmail.com>
Date: Sat, 26 Dec 2020 12:08:31 +0100
Subject: [PATCH 1/2] Support WebGL2

---
 .../cookbook/src/examples/colordisc/index.js  |  4 ++
 .../src/examples/colordisc/index.source.js    |  4 ++
 .../cookbook/src/examples/helloblue/index.js  | 12 ++--
 .../src/examples/helloblue/index.source.js    | 12 ++--
 .../cookbook/src/examples/hellogl/index.js    | 22 ++++----
 .../src/examples/hellogl/index.source.js      | 22 ++++----
 packages/cookbook/src/examples/sdf1/index.js  | 10 ++--
 .../src/examples/sdf1/index.source.js         | 10 ++--
 packages/gl-react-dom/src/GLViewDOM.js        | 17 +++++-
 packages/gl-react-dom/src/getContext.js       | 14 +++--
 packages/gl-react/package.json                |  2 +-
 packages/gl-react/src/Node.js                 |  3 +-
 packages/gl-react/src/Shaders.js              | 55 +++++++++++++++++--
 packages/tests/package.json                   |  2 +-
 yarn.lock                                     |  8 +--
 15 files changed, 139 insertions(+), 58 deletions(-)

diff --git a/packages/cookbook/src/examples/colordisc/index.js b/packages/cookbook/src/examples/colordisc/index.js
index ff612e7..462cf4f 100755
--- a/packages/cookbook/src/examples/colordisc/index.js
+++ b/packages/cookbook/src/examples/colordisc/index.js
@@ -4,6 +4,10 @@ import { Shaders, Node, GLSL } from "gl-react";
 import { Surface } from "gl-react-dom";
 const shaders = Shaders.create({
   ColoredDisc: {
+    // NB: if you omit to define a #version, you are using WebGL1 which is using ES 1.0.
+    // In that version, things differ a bit: varying, gl_FragColor,...
+    // gl-react is retrocompatible with this version
+    // Many of our next examples are written in WebGL1 (historical reasons)
     frag: GLSL`
 precision highp float;
 varying vec2 uv;
diff --git a/packages/cookbook/src/examples/colordisc/index.source.js b/packages/cookbook/src/examples/colordisc/index.source.js
index bb8e41a..880087b 100644
--- a/packages/cookbook/src/examples/colordisc/index.source.js
+++ b/packages/cookbook/src/examples/colordisc/index.source.js
@@ -4,6 +4,10 @@ import { Shaders, Node, GLSL } from "gl-react";
 import { Surface } from "gl-react-dom";
 const shaders = Shaders.create({
   ColoredDisc: {
+    // NB: if you omit to define a #version, you are using WebGL1 which is using ES 1.0.
+    // In that version, things differ a bit: varying, gl_FragColor,...
+    // gl-react is retrocompatible with this version
+    // Many of our next examples are written in WebGL1 (historical reasons)
     frag: GLSL\`
 precision highp float;
 varying vec2 uv;
diff --git a/packages/cookbook/src/examples/helloblue/index.js b/packages/cookbook/src/examples/helloblue/index.js
index 2b1dbc7..d0d6c7d 100755
--- a/packages/cookbook/src/examples/helloblue/index.js
+++ b/packages/cookbook/src/examples/helloblue/index.js
@@ -6,12 +6,16 @@ import { Surface } from "gl-react-dom";
 const shaders = Shaders.create({
   helloBlue: {
     // uniforms are variables from JS. We pipe blue uniform into blue output color
-    frag: GLSL`
+    frag: GLSL`#version 300 es
 precision highp float;
-varying vec2 uv;
-uniform float blue;
+
+in vec2 uv;
+out vec4 color;
+
+uniform float blue; // <- coming from JS
+
 void main() {
-  gl_FragColor = vec4(uv.x, uv.y, blue, 1.0);
+  color = vec4(uv.x, uv.y, blue, 1.0);
 }`,
   },
 });
diff --git a/packages/cookbook/src/examples/helloblue/index.source.js b/packages/cookbook/src/examples/helloblue/index.source.js
index 8fdd276..bfe4795 100644
--- a/packages/cookbook/src/examples/helloblue/index.source.js
+++ b/packages/cookbook/src/examples/helloblue/index.source.js
@@ -6,12 +6,16 @@ import { Surface } from "gl-react-dom";
 const shaders = Shaders.create({
   helloBlue: {
     // uniforms are variables from JS. We pipe blue uniform into blue output color
-    frag: GLSL\`
+    frag: GLSL\`#version 300 es
 precision highp float;
-varying vec2 uv;
-uniform float blue;
+
+in vec2 uv;
+out vec4 color;
+
+uniform float blue; // <- coming from JS
+
 void main() {
-  gl_FragColor = vec4(uv.x, uv.y, blue, 1.0);
+  color = vec4(uv.x, uv.y, blue, 1.0);
 }\`,
   },
 });
diff --git a/packages/cookbook/src/examples/hellogl/index.js b/packages/cookbook/src/examples/hellogl/index.js
index a6ffc9a..ff361b6 100755
--- a/packages/cookbook/src/examples/hellogl/index.js
+++ b/packages/cookbook/src/examples/hellogl/index.js
@@ -3,21 +3,21 @@ import React, { Component } from "react";
 import { Shaders, Node, GLSL } from "gl-react";
 import { Surface } from "gl-react-dom";
 
-// in gl-react you need to statically define "shaders":
+// gl-react allows to statically define "shaders":
 const shaders = Shaders.create({
   helloGL: {
-    // This is our first fragment shader in GLSL language (OpenGL Shading Language)
-    // (GLSL code gets compiled and run on the GPU)
-    frag: GLSL`
+    // our first fragment shader in GLSL language (OpenGL Shading Language)
+    // it gets compiled and run on the GPU
+    frag: GLSL`#version 300 es
 precision highp float;
-varying vec2 uv;
-void main() {
-  gl_FragColor = vec4(uv.x, uv.y, 0.5, 1.0);
+
+in vec2 uv; // input "uv" vec2 where x and y moves from 0.0 to 1.0 range
+out vec4 color; // output the pixel color using the vec4(r,g,b,a) format
+
+void main() { // the main() function is called FOR EACH PIXELS
+  color = vec4(uv.x, uv.y, 0.5, 1.0);
 }`,
-    // the main() function is called FOR EACH PIXELS
-    // the varying uv is a vec2 where x and y respectively varying from 0.0 to 1.0.
-    // we set in output the pixel color using the vec4(r,g,b,a) format.
-    // see [GLSL_ES_Specification_1.0.17](http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf)
+    // see [-> GLSL ES Specification <-](https://www.khronos.org/registry/OpenGL/specs/es/3.0/GLSL_ES_Specification_3.00.pdf)
   },
 });
 
diff --git a/packages/cookbook/src/examples/hellogl/index.source.js b/packages/cookbook/src/examples/hellogl/index.source.js
index a611cb5..e40748c 100644
--- a/packages/cookbook/src/examples/hellogl/index.source.js
+++ b/packages/cookbook/src/examples/hellogl/index.source.js
@@ -3,21 +3,21 @@ import React, { Component } from "react";
 import { Shaders, Node, GLSL } from "gl-react";
 import { Surface } from "gl-react-dom";
 
-// in gl-react you need to statically define "shaders":
+// gl-react allows to statically define "shaders":
 const shaders = Shaders.create({
   helloGL: {
-    // This is our first fragment shader in GLSL language (OpenGL Shading Language)
-    // (GLSL code gets compiled and run on the GPU)
-    frag: GLSL\`
+    // our first fragment shader in GLSL language (OpenGL Shading Language)
+    // it gets compiled and run on the GPU
+    frag: GLSL\`#version 300 es
 precision highp float;
-varying vec2 uv;
-void main() {
-  gl_FragColor = vec4(uv.x, uv.y, 0.5, 1.0);
+
+in vec2 uv; // input "uv" vec2 where x and y moves from 0.0 to 1.0 range
+out vec4 color; // output the pixel color using the vec4(r,g,b,a) format
+
+void main() { // the main() function is called FOR EACH PIXELS
+  color = vec4(uv.x, uv.y, 0.5, 1.0);
 }\`,
-    // the main() function is called FOR EACH PIXELS
-    // the varying uv is a vec2 where x and y respectively varying from 0.0 to 1.0.
-    // we set in output the pixel color using the vec4(r,g,b,a) format.
-    // see [GLSL_ES_Specification_1.0.17](http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf)
+    // see [-> GLSL ES Specification <-](https://www.khronos.org/registry/OpenGL/specs/es/3.0/GLSL_ES_Specification_3.00.pdf)
   },
 });
 
diff --git a/packages/cookbook/src/examples/sdf1/index.js b/packages/cookbook/src/examples/sdf1/index.js
index 9b7378a..12024ef 100755
--- a/packages/cookbook/src/examples/sdf1/index.js
+++ b/packages/cookbook/src/examples/sdf1/index.js
@@ -6,9 +6,10 @@ import timeLoop from "../../HOC/timeLoop";
 
 const shaders = Shaders.create({
   sdf1: {
-    frag: GLSL`
+    frag: GLSL`#version 300 es
 precision highp float;
-varying vec2 uv;
+in vec2 uv;
+out vec4 fragColor;
 uniform float time;
 
 float smin(float a, float b, float k) {
@@ -75,7 +76,8 @@ void main() {
   float totalDist = 0.0;
   vec2 res;
   vec3 p;
-  for(int i = 0; i < 36; i++) {
+  int limit = 40;
+  for(int i = 0; i < limit; i++) {
     p = origin + direction * totalDist;
     res = scene(p);
     totalDist += res.x;
@@ -89,7 +91,7 @@ void main() {
   vec3 ambient_color = vec3(0.2, 0.45, 0.6);
   vec3 diffuseLit = materialColor * (diffuse * light_color + ambient_color);
   float fogFactor = smoothstep(10.0, 50.0, totalDist);
-  gl_FragColor = vec4(mix(diffuseLit, vec3(0.1), fogFactor), 1.0);
+  fragColor = vec4(mix(diffuseLit, vec3(0.1), fogFactor), 1.0);
 }`,
   },
 });
diff --git a/packages/cookbook/src/examples/sdf1/index.source.js b/packages/cookbook/src/examples/sdf1/index.source.js
index 0e96eb0..e98c083 100644
--- a/packages/cookbook/src/examples/sdf1/index.source.js
+++ b/packages/cookbook/src/examples/sdf1/index.source.js
@@ -6,9 +6,10 @@ import timeLoop from "../../HOC/timeLoop";
 
 const shaders = Shaders.create({
   sdf1: {
-    frag: GLSL\`
+    frag: GLSL\`#version 300 es
 precision highp float;
-varying vec2 uv;
+in vec2 uv;
+out vec4 fragColor;
 uniform float time;
 
 float smin(float a, float b, float k) {
@@ -75,7 +76,8 @@ void main() {
   float totalDist = 0.0;
   vec2 res;
   vec3 p;
-  for(int i = 0; i < 36; i++) {
+  int limit = 40;
+  for(int i = 0; i < limit; i++) {
     p = origin + direction * totalDist;
     res = scene(p);
     totalDist += res.x;
@@ -89,7 +91,7 @@ void main() {
   vec3 ambient_color = vec3(0.2, 0.45, 0.6);
   vec3 diffuseLit = materialColor * (diffuse * light_color + ambient_color);
   float fogFactor = smoothstep(10.0, 50.0, totalDist);
-  gl_FragColor = vec4(mix(diffuseLit, vec3(0.1), fogFactor), 1.0);
+  fragColor = vec4(mix(diffuseLit, vec3(0.1), fogFactor), 1.0);
 }\`,
   },
 });
diff --git a/packages/gl-react-dom/src/GLViewDOM.js b/packages/gl-react-dom/src/GLViewDOM.js
index 5874b62..65e6f46 100755
--- a/packages/gl-react-dom/src/GLViewDOM.js
+++ b/packages/gl-react-dom/src/GLViewDOM.js
@@ -31,6 +31,7 @@ const propTypes = {
   height: PropTypes.number.isRequired,
   style: PropTypes.object,
   pixelRatio: PropTypes.number,
+  version: PropTypes.string,
 };
 
 class ErrorDebug extends Component {
@@ -82,6 +83,7 @@ export default class GLViewDOM extends Component<
     height: number,
     style?: any,
     debug?: number,
+    version?: string,
   },
   {
     error: ?Error,
@@ -127,7 +129,15 @@ export default class GLViewDOM extends Component<
 
   render() {
     const { error } = this.state;
-    let { width, height, pixelRatio, style, debug, ...rest } = this.props;
+    let {
+      width,
+      height,
+      pixelRatio,
+      style,
+      debug,
+      version,
+      ...rest
+    } = this.props;
     if (!pixelRatio)
       pixelRatio = Number(
         (typeof window === "object" && window.devicePixelRatio) || 1
@@ -160,12 +170,13 @@ export default class GLViewDOM extends Component<
   }
 
   _createContext() {
-    const { webglContextAttributes, debug } = this.props;
+    const { webglContextAttributes, debug, version } = this.props;
     const gl: ?WebGLRenderingContext = getContext(
       this.canvas,
       debug
         ? { ...webglContextAttributes, preserveDrawingBuffer: true }
-        : webglContextAttributes
+        : webglContextAttributes,
+      version || "webgl2"
     );
     this.webglContextAttributes = webglContextAttributes || {};
     return gl;
diff --git a/packages/gl-react-dom/src/getContext.js b/packages/gl-react-dom/src/getContext.js
index e111ebb..2541a44 100755
--- a/packages/gl-react-dom/src/getContext.js
+++ b/packages/gl-react-dom/src/getContext.js
@@ -1,4 +1,10 @@
-export default (canvas: HTMLCanvasElement, opts: any) =>
-  canvas.getContext("webgl", opts) ||
-  canvas.getContext("webgl-experimental", opts) ||
-  canvas.getContext("experimental-webgl", opts);
+export default (
+  canvas: HTMLCanvasElement,
+  opts: any,
+  version: "webgl" | "webgl2"
+) =>
+  version === "webgl2"
+    ? canvas.getContext("webgl2", opts)
+    : canvas.getContext("webgl", opts) ||
+      canvas.getContext("webgl-experimental", opts) ||
+      canvas.getContext("experimental-webgl", opts);
diff --git a/packages/gl-react/package.json b/packages/gl-react/package.json
index 9656245..b8bb1e3 100644
--- a/packages/gl-react/package.json
+++ b/packages/gl-react/package.json
@@ -34,7 +34,7 @@
     "prop-types": "^15.7.2",
     "typedarray-pool": "^1.2.0",
     "webgltexture-loader": "1.0.0",
-    "webgltexture-loader-ndarray": "1.1.0"
+    "webgltexture-loader-ndarray": "1.1.1"
   },
   "scripts": {
     "build": "cd ../.. && export PATH=$(npm bin):$PATH && cd - && rm -rf gl-react.js && browserify lib/index.js -t [ browserify-shim ] --standalone GLReact > gl-react.js"
diff --git a/packages/gl-react/src/Node.js b/packages/gl-react/src/Node.js
index 80e3959..6ca0c78 100755
--- a/packages/gl-react/src/Node.js
+++ b/packages/gl-react/src/Node.js
@@ -765,7 +765,8 @@ export default class Node extends Component<Props, *> {
     }
 
     const shaderInfo = shaderDefinitionToShaderInfo(
-      ensureShaderDefinition(shaderProp, " in " + nodeName)
+      ensureShaderDefinition(shaderProp, " in " + nodeName),
+      nodeName
     );
     const latestShaderInfo = this._latestShaderInfo;
     let shader = this._shader;
diff --git a/packages/gl-react/src/Shaders.js b/packages/gl-react/src/Shaders.js
index 93a8b25..ced8ada 100755
--- a/packages/gl-react/src/Shaders.js
+++ b/packages/gl-react/src/Shaders.js
@@ -66,13 +66,22 @@ const shaderResults: ShaderIdentifierMap<ShaderInfo> = {};
 
 const genShaderId = ((i) => () => (++i).toString())(0);
 
-const staticVert = GLSL`
+const staticVerts = {
+  "100": GLSL`
 attribute vec2 _p;
 varying vec2 uv;
 void main() {
 gl_Position = vec4(_p,0.0,1.0);
 uv = vec2(0.5, 0.5) * (_p+vec2(1.0, 1.0));
-}`;
+}`,
+  "300 es": GLSL`#version 300 es
+in vec2 _p;
+out vec2 uv;
+void main() {
+gl_Position = vec4(_p,0.0,1.0);
+uv = vec2(0.5, 0.5) * (_p+vec2(1.0, 1.0));
+}`,
+};
 
 export function isShaderIdentifier(shaderIdentifier: mixed): boolean {
   return (
@@ -94,12 +103,46 @@ export function ensureShaderDefinition(
   return definition;
 }
 
+const versionDef = "#version";
+function inferGLSLVersion(glsl) {
+  const i = glsl.indexOf("\n");
+  const line1 = i > -1 ? glsl.slice(0, i) : glsl;
+  if (line1.startsWith(versionDef)) {
+    return line1.slice(versionDef.length + 1);
+  }
+  return "100";
+}
+
+const addGLSLName = (glsl: string, name: ?string) =>
+  !name ? glsl : glsl + "\n#define SHADER_NAME " + name + "\n";
+
 export function shaderDefinitionToShaderInfo(
-  definition: ShaderDefinition
+  { frag, vert }: ShaderDefinition,
+  name: string
 ): ShaderInfo {
+  frag = frag.trim();
+  const version = inferGLSLVersion(frag);
+  if (vert) {
+    vert = vert.trim();
+    const vertVersion = inferGLSLVersion(vert);
+    if (version !== vertVersion) {
+      throw new Error("GLSL shader vert and frag version must match");
+    }
+  } else {
+    vert = staticVerts[version];
+    if (!vert) {
+      throw new Error(
+        "gl-react: could not find static vertex shader for GLSL version '" +
+          version +
+          "'"
+      );
+    }
+  }
+  frag = addGLSLName(frag, name);
+  vert = addGLSLName(vert, name);
   return {
-    frag: definition.frag,
-    vert: definition.vert || staticVert, // FIXME this is somewhat experimental for now, vert implement needs to expect a _p attribute
+    frag,
+    vert,
   };
 }
 
@@ -137,7 +180,7 @@ const Shaders = (global.__glReactShaders = global.__glReactShaders || {
       shaderDefinitions[id] = definition;
       shaderNames[id] = k;
       sheet[k] = shaderId;
-      const result = shaderDefinitionToShaderInfo(definition);
+      const result = shaderDefinitionToShaderInfo(definition, k);
       shaderResults[id] = result;
     });
     return sheet;
diff --git a/packages/tests/package.json b/packages/tests/package.json
index 167602b..42ad368 100755
--- a/packages/tests/package.json
+++ b/packages/tests/package.json
@@ -25,6 +25,6 @@
     "react": "^17.0.1",
     "react-test-renderer": "^17.0.1",
     "webgltexture-loader": "1.0.0",
-    "webgltexture-loader-ndarray": "1.1.0"
+    "webgltexture-loader-ndarray": "1.1.1"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 6d8f016..0aa2354 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -16291,10 +16291,10 @@ webgltexture-loader-expo@1.0.0:
   dependencies:
     webgltexture-loader "^1.0.0"
 
-webgltexture-loader-ndarray@1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/webgltexture-loader-ndarray/-/webgltexture-loader-ndarray-1.1.0.tgz#20869150e79dfb6190cbd6bedafacda262e29a5e"
-  integrity sha512-t9Q4x5do5feHjMOJLCg8UdQVx1eInnWXvgAqaL9NJJSL5pzI59Ynx3ZZSw3QqGxj15iRbYij7vK8BCIDyp5EZA==
+webgltexture-loader-ndarray@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/webgltexture-loader-ndarray/-/webgltexture-loader-ndarray-1.1.1.tgz#6e9bd5ac3ad4d09ea8d90aea33bd683ab709ab28"
+  integrity sha512-jz2Wa/mupBomP/JYkbzwDFqEFNIgwliw+CXzQaMSZQup1jyGVAaprbYCus+46rVWepCnb+DWiNV/WUPC/iCj2w==
   dependencies:
     ndarray "^1.0.19"
     ndarray-ops "^1.2.2"

From 545b38e801c61859f2dc50d22ac4cf8979338846 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABtan=20Renaudeau?= <renaudeau.gaetan@gmail.com>
Date: Sat, 26 Dec 2020 16:39:16 +0100
Subject: [PATCH 2/2] update cookbook-rn-shared to confirm ES 3.0 works there
 too

---
 examples/cookbook-expo/package.json           |  4 +--
 examples/cookbook-expo/yarn.lock              | 26 +++++++++----------
 .../examples/hellogl/index.js                 |  7 ++---
 3 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/examples/cookbook-expo/package.json b/examples/cookbook-expo/package.json
index 1189cf2..5e3bcf4 100644
--- a/examples/cookbook-expo/package.json
+++ b/examples/cookbook-expo/package.json
@@ -19,8 +19,8 @@
     "expo-camera": "^9.1.1",
     "expo-gl": "^9.2.0",
     "expo-permissions": "^10.0.0",
-    "gl-react": "^4.1.0",
-    "gl-react-expo": "^4.1.0",
+    "gl-react": "5.0.0-alpha.4",
+    "gl-react-expo": "5.0.0-alpha.4",
     "gl-transitions": "^1.43.0",
     "ndarray": "^1.0.19",
     "raf": "^3.4.1",
diff --git a/examples/cookbook-expo/yarn.lock b/examples/cookbook-expo/yarn.lock
index b27f6e3..2195c61 100644
--- a/examples/cookbook-expo/yarn.lock
+++ b/examples/cookbook-expo/yarn.lock
@@ -2953,18 +2953,18 @@ gl-format-compiler-error@^1.0.2:
     glsl-shader-name "^1.0.0"
     sprintf-js "^1.0.3"
 
-gl-react-expo@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/gl-react-expo/-/gl-react-expo-4.1.0.tgz#0f3b13fae7fe490bc72fcf59c894605293da642d"
-  integrity sha512-3Q4LOBGYsNNqpLkwUsUlRrFCNLUqjVsVPKE3c6pLABfkNxyBacbDK3mg3T8XOD7jp+Vsp/Ic9McjICMsYHANJw==
+gl-react-expo@5.0.0-alpha.4:
+  version "5.0.0-alpha.4"
+  resolved "https://registry.yarnpkg.com/gl-react-expo/-/gl-react-expo-5.0.0-alpha.4.tgz#4e1805b201bc841ceaad8a384ae04b4c8266c72d"
+  integrity sha512-2HDXwt4/nGZPMG5dsUpy6kHHuE+NfJAr2hW5pAEdRBlQJ77FctxLY1TgSMnTLFuAMAW2WYSxsiVHtQUJinWaOw==
   dependencies:
     invariant "^2.2.4"
     webgltexture-loader-expo "1.0.0"
 
-gl-react@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/gl-react/-/gl-react-4.1.0.tgz#b7623555a4c3ba92a1ccbbb122c28c46231cd863"
-  integrity sha512-hTvxQHN2wxLfbA4c6mRcMdXWjA0/8UY2Sxn5eNre0DOrcauBj/+vMeAMbL2+zwE1BfVYnraE4cvKJTIzFIeBLw==
+gl-react@5.0.0-alpha.4:
+  version "5.0.0-alpha.4"
+  resolved "https://registry.yarnpkg.com/gl-react/-/gl-react-5.0.0-alpha.4.tgz#41205f5f934f115965450e25658073b89ad97e79"
+  integrity sha512-x8IHYV8pmjlAv32l0Ahu2+37xt8vKibSxsbleYDpyZaFk7wNxvxyMtuZnTfcX4E/+BEtPTqWvrycYa2JFJdgEA==
   dependencies:
     gl-shader "^4.2.1"
     invariant "^2.2.4"
@@ -2972,7 +2972,7 @@ gl-react@^4.1.0:
     prop-types "^15.7.2"
     typedarray-pool "^1.2.0"
     webgltexture-loader "1.0.0"
-    webgltexture-loader-ndarray "1.1.0"
+    webgltexture-loader-ndarray "1.1.1"
 
 gl-shader@^4.2.1:
   version "4.2.1"
@@ -5826,10 +5826,10 @@ webgltexture-loader-expo@1.0.0:
   dependencies:
     webgltexture-loader "^1.0.0"
 
-webgltexture-loader-ndarray@1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/webgltexture-loader-ndarray/-/webgltexture-loader-ndarray-1.1.0.tgz#20869150e79dfb6190cbd6bedafacda262e29a5e"
-  integrity sha512-t9Q4x5do5feHjMOJLCg8UdQVx1eInnWXvgAqaL9NJJSL5pzI59Ynx3ZZSw3QqGxj15iRbYij7vK8BCIDyp5EZA==
+webgltexture-loader-ndarray@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/webgltexture-loader-ndarray/-/webgltexture-loader-ndarray-1.1.1.tgz#6e9bd5ac3ad4d09ea8d90aea33bd683ab709ab28"
+  integrity sha512-jz2Wa/mupBomP/JYkbzwDFqEFNIgwliw+CXzQaMSZQup1jyGVAaprbYCus+46rVWepCnb+DWiNV/WUPC/iCj2w==
   dependencies:
     ndarray "^1.0.19"
     ndarray-ops "^1.2.2"
diff --git a/examples/cookbook-rn-shared/examples/hellogl/index.js b/examples/cookbook-rn-shared/examples/hellogl/index.js
index afb9b92..582e90e 100644
--- a/examples/cookbook-rn-shared/examples/hellogl/index.js
+++ b/examples/cookbook-rn-shared/examples/hellogl/index.js
@@ -7,11 +7,12 @@ const shaders = Shaders.create({
   helloGL: {
     // This is our first fragment shader in GLSL language (OpenGL Shading Language)
     // (GLSL code gets compiled and run on the GPU)
-    frag: GLSL`
+    frag: GLSL`#version 300 es
 precision highp float;
-varying vec2 uv;
+in vec2 uv;
+out vec4 color;
 void main() {
-  gl_FragColor = vec4(uv.x, uv.y, 0.5, 1.0);
+  color = vec4(uv.x, uv.y, 0.5, 1.0);
 }`,
     // the main() function is called FOR EACH PIXELS
     // the varying uv is a vec2 where x and y respectively varying from 0.0 to 1.0.