add SDF1 example

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "license": "MIT",
   "scripts": {
-    "postinstall": "lerna bootstrap '--nohoist=react-native*' && ./packages/undo-unsupported-symlinks.sh",
+    "postinstall": "lerna bootstrap && ./packages/undo-unsupported-symlinks.sh",
     "watch": "lerna run watch --stream --no-sort",
     "prettier": "prettier --write 'packages/{gl-react,gl-react-dom,gl-react-expo,gl-react-headless,gl-react-native}/src/*.js'",
     "flow": "cd packages/gl-react && flow --quiet",

packages/cookbook-rn-shared/src/examples/index.js

@@ -92,6 +92,9 @@ export const camera={ Main: camera_E, ...camera_m };
 import mergechannels_E from './mergechannels';
 import * as mergechannels_m from './mergechannels/meta';
 export const mergechannels={ Main: mergechannels_E, ...mergechannels_m };
+import sdf1_E from './sdf1';
+import * as sdf1_m from './sdf1/meta';
+export const sdf1={ Main: sdf1_E, ...sdf1_m };
 import demotunnel_E from './demotunnel';
 import * as demotunnel_m from './demotunnel/meta';
 export const demotunnel={ Main: demotunnel_E, ...demotunnel_m };

packages/cookbook-rn-shared/src/examples/index.txt

@@ -29,6 +29,7 @@ golrot
 golrotscu
 camera
 mergechannels
+sdf1
 demotunnel
 demodesert
 demodesertcrt

packages/cookbook-rn-shared/src/examples/sdf1/index.js

@@ -0,0 +1,108 @@
+//@flow
+import React from "react";
+import { Shaders, Node, GLSL, LinearCopy } from "gl-react";
+import getGLReactImplementation from "../../gl-react-implementation";
+const { Surface } = getGLReactImplementation();
+import timeLoop from "../../HOC/timeLoop";
+
+const shaders = Shaders.create({
+  sdf1: {
+    frag: GLSL`
+precision highp float;
+varying vec2 uv;
+uniform float time;
+
+float smin(float a, float b, float k) {
+  float h = clamp( 0.5+0.5*(b-a)/k, 0.0, 1.0 );
+  return mix( b, a, h ) - k*h*(1.0-h);
+}
+float sdSphere(vec3 p, float s) {
+  return length(p) - s;
+}
+float sdTorus(vec3 p, vec2 t) {
+  vec2 q = vec2(length(p.xz)-t.x,p.y);
+  return length(q)-t.y;
+}
+float sdBox(vec3 p, vec3 b) {
+  vec3 d = abs(p) - b;
+  return min(max(d.x,max(d.y,d.z)),0.0) + length(max(d,0.0));
+}
+vec3 opRep(inout vec3 p, vec3 c) {
+  vec3 m = mod(p, c);
+  vec3 id = (p - m) / c;
+  p = m - 0.5 * c;
+  return id;
+}
+
+vec2 scene (vec3 p) {
+  p.x += time;
+  float y = p.y;
+  vec3 id = opRep(p, vec3(2.0, 0.0, 4.0));
+  p.y = y; // FIXME for some reason mod(f, 0.0) don't work as expected
+  p.y += 0.5 + 0.5 * cos(4.3 * (id.x + time) + 1.3 * (id.z + time));
+  float rot = time + cos(30.0 * id.x + 123.4 * id.z);
+  p.xz *= mat2(
+    cos(rot), sin(rot),
+    -sin(rot), cos(rot)
+  );
+  float r = smin(
+    mix(sdSphere(p, 0.7), sdBox(p, vec3(0.7)), 0.5 + 0.5 * cos(time + id.x)),
+    sdTorus(p.xzy - vec3(0.0, 0.7, 0.0), vec2(0.2, 0.08)),
+    0.1
+  );
+  return vec2(r, id.x);
+}
+vec3 normal(vec3 p, float smoothness) {
+  vec3 n;
+  vec2 dn = vec2(smoothness, 0.0);
+  return normalize(vec3(
+    scene(p + dn.xyy).x - scene(p - dn.xyy).x,
+    scene(p + dn.yxy).x - scene(p - dn.yxy).x,
+    scene(p + dn.yyx).x - scene(p - dn.yyx).x));
+}
+
+vec3 hsv2rgb(vec3 c) {
+  vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
+  vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
+  return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
+}
+
+void main() {
+  vec3 direction = normalize(vec3(2.0 * uv - 1.0, 1.0));
+  float rotY = 0.6;
+  direction.zy *= mat2(
+    cos(rotY), sin(rotY),
+    -sin(rotY), cos(rotY)
+  );
+  vec3 origin = vec3(0.0, 3.0, 0.0);
+  float totalDist = 0.0;
+  vec2 res;
+  vec3 p;
+  for(int i = 0; i < 36; i++) {
+    p = origin + direction * totalDist;
+    res = scene(p);
+    totalDist += res.x;
+  }
+  gl_FragColor = vec4(vec3(1.0 / (1.0+totalDist)), 1.0);
+  vec3 nrml = normal(p, 0.002);
+  vec3 materialColor = hsv2rgb(vec3(res.y / 24.0, 0.8, 1.0));
+  vec3 light_dir = normalize(vec3(0.2, 1.0, 0.2));
+  float diffuse = dot(light_dir, nrml);
+  diffuse = diffuse * 0.5 + 0.5;
+  vec3 light_color = vec3(0.9, 0.8, 0.7);
+  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);
+}`
+  }
+});
+
+const SDF1Loop = timeLoop(({ time }: *) =>
+  <Node shader={shaders.sdf1} uniforms={{ time: 0.001 * time }} />
+);
+
+export default ({ width }) =>
+  <Surface style={{ width, height: width }}>
+    <SDF1Loop />
+  </Surface>;

packages/cookbook-rn-shared/src/examples/sdf1/meta.js

@@ -0,0 +1,4 @@
+export const title = "Signed Distance Function (1)";
+export const description = "raymarching + distance estimation function example";
+
+export thumbnail from "../../../images/thumbnails/sdf1.jpg";

packages/cookbook/src/examples/index.js

@@ -37,6 +37,7 @@ webcampersistence
 golwebcam
 mergechannels
 mergechannelsfun
+sdf1
 demotunnel
 demodesert
 demodesertcrt

packages/cookbook/src/examples/sdf1/index.js

@@ -0,0 +1,104 @@
+//@flow
+import React from "react";
+import { Shaders, Node, GLSL } from "gl-react";
+import { Surface } from "gl-react-dom";
+import timeLoop from "../../HOC/timeLoop";
+
+const shaders = Shaders.create({
+  sdf1: {
+    frag: GLSL`
+precision highp float;
+varying vec2 uv;
+uniform float time;
+
+float smin(float a, float b, float k) {
+  float h = clamp( 0.5+0.5*(b-a)/k, 0.0, 1.0 );
+  return mix( b, a, h ) - k*h*(1.0-h);
+}
+float sdSphere(vec3 p, float s) {
+  return length(p) - s;
+}
+float sdTorus(vec3 p, vec2 t) {
+  vec2 q = vec2(length(p.xz)-t.x,p.y);
+  return length(q)-t.y;
+}
+float sdBox(vec3 p, vec3 b) {
+  vec3 d = abs(p) - b;
+  return min(max(d.x,max(d.y,d.z)),0.0) + length(max(d,0.0));
+}
+vec3 opRep(inout vec3 p, vec3 c) {
+  vec3 m = mod(p, c);
+  vec3 id = (p - m) / c;
+  p = m - 0.5 * c;
+  return id;
+}
+
+vec2 scene (vec3 p) {
+  p.x += time;
+  vec3 id = opRep(p, vec3(2.0, 10., 4.0));
+  p.y += 0.5 + 0.5 * cos(4.3 * (id.x + time) + 1.3 * (id.z + time));
+  float rot = time + cos(30.0 * id.x + 123.4 * id.z);
+  p.xz *= mat2(
+    cos(rot), sin(rot),
+    -sin(rot), cos(rot)
+  );
+  float r = smin(
+    mix(sdSphere(p, 0.7), sdBox(p, vec3(0.7)), 0.5 + 0.5 * cos(time + id.x)),
+    sdTorus(p.xzy - vec3(0.0, 0.7, 0.0), vec2(0.2, 0.08)),
+    0.1
+  );
+  return vec2(r, id.x);
+}
+vec3 normal(vec3 p, float smoothness) {
+  vec3 n;
+  vec2 dn = vec2(smoothness, 0.0);
+  return normalize(vec3(
+    scene(p + dn.xyy).x - scene(p - dn.xyy).x,
+    scene(p + dn.yxy).x - scene(p - dn.yxy).x,
+    scene(p + dn.yyx).x - scene(p - dn.yyx).x));
+}
+
+vec3 hsv2rgb(vec3 c) {
+  vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
+  vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
+  return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
+}
+
+void main() {
+  vec3 direction = normalize(vec3(2.0 * uv - 1.0, 1.0));
+  float rotY = 0.6;
+  direction.zy *= mat2(
+    cos(rotY), sin(rotY),
+    -sin(rotY), cos(rotY)
+  );
+  vec3 origin = vec3(0.0, 3.0, 0.0);
+  float totalDist = 0.0;
+  vec2 res;
+  vec3 p;
+  for(int i = 0; i < 36; i++) {
+    p = origin + direction * totalDist;
+    res = scene(p);
+    totalDist += res.x;
+  }
+  vec3 nrml = normal(p, 0.002);
+  vec3 materialColor = hsv2rgb(vec3(res.y / 24.0, 0.8, 1.0));
+  vec3 light_dir = normalize(vec3(0.2, 1.0, 0.2));
+  float diffuse = dot(light_dir, nrml);
+  diffuse = diffuse * 0.5 + 0.5;
+  vec3 light_color = vec3(0.9, 0.8, 0.7);
+  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);
+}`
+  }
+});
+
+const SDF1Loop = timeLoop(({ time }: *) =>
+  <Node shader={shaders.sdf1} uniforms={{ time: 0.001 * time }} />
+);
+
+export default () =>
+  <Surface width={384} height={384}>
+    <SDF1Loop />
+  </Surface>;

packages/cookbook/src/examples/sdf1/index.source.js

@@ -0,0 +1,107 @@
+module.exports=`//@flow
+import React from "react";
+import { Shaders, Node, GLSL } from "gl-react";
+import { Surface } from "gl-react-dom";
+import timeLoop from "../../HOC/timeLoop";
+
+export const shaders = Shaders.create({
+  sdf1: {
+    frag: GLSL\`
+precision highp float;
+varying vec2 uv;
+uniform float time;
+
+float smin(float a, float b, float k) {
+  float h = clamp( 0.5+0.5*(b-a)/k, 0.0, 1.0 );
+  return mix( b, a, h ) - k*h*(1.0-h);
+}
+float sdSphere(vec3 p, float s) {
+  return length(p) - s;
+}
+float sdTorus(vec3 p, vec2 t) {
+  vec2 q = vec2(length(p.xz)-t.x,p.y);
+  return length(q)-t.y;
+}
+float sdBox(vec3 p, vec3 b) {
+  vec3 d = abs(p) - b;
+  return min(max(d.x,max(d.y,d.z)),0.0) + length(max(d,0.0));
+}
+vec3 opRep(inout vec3 p, vec3 c) {
+  vec3 m = mod(p, c);
+  vec3 id = (p - m) / c;
+  p = m - 0.5 * c;
+  return id;
+}
+
+vec2 scene (vec3 p) {
+  p.x += time;
+  vec3 id = opRep(p, vec3(2.0, 0.0, 4.0));
+  p.y += 0.5 + 0.5 * cos(4.3 * (id.x + time) + 1.3 * (id.z + time));
+  float rot = time + cos(30.0 * id.x + 123.4 * id.z);
+  p.xz *= mat2(
+    cos(rot), sin(rot),
+    -sin(rot), cos(rot)
+  );
+  float r = smin(
+    mix(sdSphere(p, 0.7), sdBox(p, vec3(0.7)), 0.5 + 0.5 * cos(time + id.x)),
+    sdTorus(p.xzy - vec3(0.0, 0.7, 0.0), vec2(0.2, 0.08)),
+    0.1
+  );
+  return vec2(r, id.x);
+}
+vec3 normal(vec3 p, float smoothness) {
+  vec3 n;
+  vec2 dn = vec2(smoothness, 0.0);
+  return normalize(vec3(
+    scene(p + dn.xyy).x - scene(p - dn.xyy).x,
+    scene(p + dn.yxy).x - scene(p - dn.yxy).x,
+    scene(p + dn.yyx).x - scene(p - dn.yyx).x));
+}
+
+vec3 hsv2rgb(vec3 c) {
+  vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
+  vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
+  return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
+}
+
+void main() {
+  vec3 direction = normalize(vec3(2.0 * uv - 1.0, 1.0));
+  float rotY = 0.6;
+  direction.zy *= mat2(
+    cos(rotY), sin(rotY),
+    -sin(rotY), cos(rotY)
+  );
+  vec3 origin = vec3(0.0, 3.0, 0.0);
+  float totalDist = 0.0;
+  vec2 res;
+  vec3 p;
+  for(int i = 0; i < 100; i++) {
+    p = origin + direction * totalDist;
+    res = scene(p);
+	  float d = res.x;
+    totalDist += d;
+    if (totalDist > 100.0) break;
+  }
+  vec3 nrml = normal(p, 0.002);
+  vec3 materialColor = hsv2rgb(vec3(res.y / 24.0, 0.8, 1.0));
+  vec3 light_dir = normalize(vec3(0.2, 1.0, 0.2));
+  float diffuse = dot(light_dir, nrml);
+  diffuse = diffuse * 0.5 + 0.5;
+  vec3 light_color = vec3(0.9, 0.8, 0.7);
+  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);
+}\`
+  }
+});
+
+const SDF1Loop = timeLoop(({ time }: *) =>
+  <Node shader={shaders.sdf1} uniforms={{ time: 0.001 * time }} />
+);
+
+export default () =>
+  <Surface width={384} height={384}>
+    <SDF1Loop />
+  </Surface>;
+`

packages/cookbook/src/examples/sdf1/meta.js

@@ -0,0 +1,5 @@
+import markdown from "../../markdown";
+export const title = "Signed Distance Function (1)";
+export const descAfter = markdown`
+see also [xem.github.io/articles/#webgl_quest_2](https://xem.github.io/articles/#webgl_quest_2)
+`;

packages/example-gl-react-camera-effects/package.json

@@ -7,8 +7,8 @@
   "main": "main.js",
   "dependencies": {
     "expo": "17.0.0",
-    "gl-react": "file:../gl-react",
-    "gl-react-expo": "file:../gl-react-expo",
+    "gl-react": "^3.9.0",
+    "gl-react-expo": "^3.9.0",
     "react": "16.0.0-alpha.6",
     "react-native": "github:exponentjs/react-native#sdk-17.0.0"
   }

packages/tests/flow/snapshot.txt

@@ -85,8 +85,8 @@ Error: ../all.test.js:2687
 Error: incorrect.js:19
  19: <Node />;
      ^^^^^^^^ React element `Node`
-396:   props: Props;
-              ^^^^^ property `shader`. Property not found in. See: ../node_modules/gl-react/lib/Node.js.flow:396
+392:   props: Props;
+              ^^^^^ property `shader`. Property not found in. See: ../node_modules/gl-react/lib/Node.js.flow:392
  19: <Node />;
      ^^^^^^^^ props of React element `Node`
 
@@ -95,14 +95,14 @@ Error: incorrect.js:25
      ^^^^^^^^^^^^^ React element `Node`
  25: <Node nope />;
      ^^^^^^^^^^^^^ property `nope`. Property not found in
-396:   props: Props;
-              ^^^^^ object type. See: ../node_modules/gl-react/lib/Node.js.flow:396
+392:   props: Props;
+              ^^^^^ object type. See: ../node_modules/gl-react/lib/Node.js.flow:392
 
 Error: incorrect.js:25
  25: <Node nope />;
      ^^^^^^^^^^^^^ React element `Node`
-396:   props: Props;
-              ^^^^^ property `shader`. Property not found in. See: ../node_modules/gl-react/lib/Node.js.flow:396
+392:   props: Props;
+              ^^^^^ property `shader`. Property not found in. See: ../node_modules/gl-react/lib/Node.js.flow:392
  25: <Node nope />;
      ^^^^^^^^^^^^^ props of React element `Node`
 
@@ -174,8 +174,8 @@ Error: incorrect.js:51
 Error: incorrect.js:52
  52:           <Node />
                ^^^^^^^^ React element `Node`
-396:   props: Props;
-              ^^^^^ property `shader`. Property not found in. See: ../node_modules/gl-react/lib/Node.js.flow:396
+392:   props: Props;
+              ^^^^^ property `shader`. Property not found in. See: ../node_modules/gl-react/lib/Node.js.flow:392
  52:           <Node />
                ^^^^^^^^ props of React element `Node`
 
@@ -184,22 +184,22 @@ Error: incorrect.js:55
                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ React element `Node`
  55:           <Node shaders={shaders.valid} notexists />
                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ property `notexists`. Property not found in
-396:   props: Props;
-              ^^^^^ object type. See: ../node_modules/gl-react/lib/Node.js.flow:396
+392:   props: Props;
+              ^^^^^ object type. See: ../node_modules/gl-react/lib/Node.js.flow:392
 
 Error: incorrect.js:55
  55:           <Node shaders={shaders.valid} notexists />
                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ React element `Node`
  55:           <Node shaders={shaders.valid} notexists />
                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ property `shaders`. Property not found in
-396:   props: Props;
-              ^^^^^ object type. See: ../node_modules/gl-react/lib/Node.js.flow:396
+392:   props: Props;
+              ^^^^^ object type. See: ../node_modules/gl-react/lib/Node.js.flow:392
 
 Error: incorrect.js:55
  55:           <Node shaders={shaders.valid} notexists />
                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ React element `Node`
-396:   props: Props;
-              ^^^^^ property `shader`. Property not found in. See: ../node_modules/gl-react/lib/Node.js.flow:396
+392:   props: Props;
+              ^^^^^ property `shader`. Property not found in. See: ../node_modules/gl-react/lib/Node.js.flow:392
  55:           <Node shaders={shaders.valid} notexists />
                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ props of React element `Node`
 
@@ -226,8 +226,8 @@ Error: incorrect.js:66
 ...:
  79:   />
        -^ property `preload`. Property not found in
-396:   props: Props;
-              ^^^^^ object type. See: ../node_modules/gl-react/lib/Node.js.flow:396
+392:   props: Props;
+              ^^^^^ object type. See: ../node_modules/gl-react/lib/Node.js.flow:392
 
 Error: incorrect.js:66
        v----
@@ -244,8 +244,8 @@ Error: incorrect.js:66
 ...:
  79:   />
        -^ property `visitor`. Property not found in
-396:   props: Props;
-              ^^^^^ object type. See: ../node_modules/gl-react/lib/Node.js.flow:396
+392:   props: Props;
+              ^^^^^ object type. See: ../node_modules/gl-react/lib/Node.js.flow:392
 
 Error: incorrect.js:66
        v----
@@ -284,8 +284,8 @@ Error: incorrect.js:66
 ...:
  79:   />
        -^ props of React element `Node`. This type is incompatible with
-396:   props: Props;
-              ^^^^^ object type. See: ../node_modules/gl-react/lib/Node.js.flow:396
+392:   props: Props;
+              ^^^^^ object type. See: ../node_modules/gl-react/lib/Node.js.flow:392
   Property `height` is incompatible:
      70:     height={false}
                      ^^^^^ boolean. This type is incompatible with
@@ -300,8 +300,8 @@ Error: incorrect.js:66
 ...:
  79:   />
        -^ props of React element `Node`. This type is incompatible with
-396:   props: Props;
-              ^^^^^ object type. See: ../node_modules/gl-react/lib/Node.js.flow:396
+392:   props: Props;
+              ^^^^^ object type. See: ../node_modules/gl-react/lib/Node.js.flow:392
   Property `sync` is incompatible:
      67:     sync={1}
                    ^ number. This type is incompatible with
@@ -316,8 +316,8 @@ Error: incorrect.js:66
 ...:
  79:   />
        -^ props of React element `Node`. This type is incompatible with
-396:   props: Props;
-              ^^^^^ object type. See: ../node_modules/gl-react/lib/Node.js.flow:396
+392:   props: Props;
+              ^^^^^ object type. See: ../node_modules/gl-react/lib/Node.js.flow:392
   Property `width` is incompatible:
      69:     width={false}
                     ^^^^^ boolean. This type is incompatible with

packages/undo-unsupported-symlinks.sh

@@ -12,7 +12,7 @@ cd -
 
 cd cookbook-expo
 rm -f node_modules/gl-react node_modules/gl-react-expo node_modules/cookbook-rn-shared
-npm i ../gl-react ../gl-react-expo ../cookbook-rn-shared
+npm i ../gl-react ../gl-react-expo ../cookbook-rn-shared react react-native expo prop-types
 cd -
 
 cd example-gl-react-camera-effects