upgrading the pixiJS demo adding a slider effect like https://tympanu…

…s.net/codrops/2019/12/16/scroll-refraction-and-shader-effects-in-three-js-and-react/

package.json

@@ -74,6 +74,7 @@
     "github-release-notes": "0.17.2",
     "gsap": "^2.1.3",
     "honeycomb-grid": "^3.1.7",
+    "lerp": "^1.0.3",
     "lint-staged": "^8.1.0",
     "lodash.camelcase": "^4.3.0",
     "pixi-projection": "^0.3.11",

stories/babylonjs/Integrations/pixi-demo/VaporWave.js

@@ -0,0 +1,47 @@
+
+import React, { useEffect } from 'react';
+import { Vector2, Mesh } from '@babylonjs/core';
+import { useBabylonScene } from '../../../../dist/react-babylonjs';
+import './shaders';
+let customProceduralTexture = null;
+let time = 0;
+
+const onCustomProceduralTextureCreated = (cpt) => {
+  customProceduralTexture = cpt; // assigning to reflection/refraction of mirrorball
+}
+
+const VaporWave = (props) => {
+    const scene = useBabylonScene();
+    useEffect(() => {
+        const observable = scene.onBeforeRenderObservable.add((scene) => {
+          if (scene !== null && customProceduralTexture !== null) {
+            time += scene.getEngine().getDeltaTime();
+            customProceduralTexture.setFloat("time", time);
+          }
+        })
+        return () => {
+          scene.onBeforeRenderObservable.remove(observable);
+        }
+      })
+
+    return (<>
+    <plane
+        name='vaporWareSunset'
+        width={20}
+        height={20}
+        billboardMode={Mesh.BILLBOARDMODE_ALL}>
+        <standardMaterial name='shaderMat'>
+        <customProceduralTexture
+            name='vaporWaveTexture'
+            texturePath="vaporWave"
+            size={512}
+            onCreated={onCustomProceduralTextureCreated}
+            assignTo='diffuseTexture'
+            setVector2={["resolution", new Vector2(1, 1)]}
+        />
+        </standardMaterial>
+    </plane>
+    </>)
+}
+
+export default VaporWave

stories/babylonjs/Integrations/pixi-demo/block.js

@@ -0,0 +1,64 @@
+import React, { createContext, useRef, useContext } from "react"
+import { useBeforeRender } from '../../../../dist/react-babylonjs'
+import { Vector3, } from '@babylonjs/core';
+import lerp from "lerp"
+import state from "./store"
+
+const offsetContext = createContext(0)
+
+function Block({ children, offset, factor, ...props }) {
+  const { offset: parentOffset, sectionHeight } = useBlock()
+  offset = offset !== undefined ? offset : parentOffset
+  const ref = useRef()
+  useBeforeRender((scene) => {
+    if(ref.current && ref.current.hostInstance.position){
+        const curY = ref.current.hostInstance.position.y;
+        const curTop = state.top.current;
+        ref.current.hostInstance.position.y = lerp(curY, (curTop / state.zoom) * factor, 0.1);
+    }
+  });
+
+  return (
+    <offsetContext.Provider value={offset}>
+      <transformNode {...props} name={`transformNode${Math.random()}`} position={new Vector3(0, -sectionHeight * offset * factor, 0)}>
+        <transformNode  name={`tweenNode-${Math.random()}`} ref={ref}>{children}</transformNode>
+      </transformNode>
+    </offsetContext.Provider>
+  )
+}
+
+function useBlock() {
+  const { sections, pages, zoom } = state
+  const viewPortSize = {
+      width: window.innerWidth,
+      height: window.innerHeight,
+  }
+  const size = viewPortSize;
+  const viewport = viewPortSize;
+  const offset = useContext(offsetContext)
+  const viewportWidth = viewport.width
+  const viewportHeight = viewport.height
+  const canvasWidth = viewportWidth / zoom
+  const canvasHeight = viewportHeight / zoom
+  const mobile = size.width < 700
+  const margin = canvasWidth * (mobile ? 0.2 : 0.1)
+  const contentMaxWidth = canvasWidth * (mobile ? 0.8 : 0.6)
+  const sectionHeight = canvasHeight * ((pages - 1) / (sections - 1))
+  const offsetFactor = (offset + 1.0) / sections
+
+  return {
+    viewport,
+    offset,
+    viewportWidth,
+    viewportHeight,
+    canvasWidth,
+    canvasHeight,
+    mobile,
+    margin,
+    contentMaxWidth,
+    sectionHeight,
+    offsetFactor
+  }
+}
+
+export { Block, useBlock }

stories/babylonjs/Integrations/shaders/index.js → stories/babylonjs/Integrations/pixi-demo/shaders/index.js

@@ -1,8 +1,7 @@
 import {Effect} from "@babylonjs/core";
 // register shader toy fragment example
-// https://www.shadertoy.com/view/4l2XWh
-Effect.ShadersStore.shaderToyPixelShader = `
-            uniform float time;
+Effect.ShadersStore.vaporWavePixelShader = `
+uniform float time;
             uniform vec2 mousePos;
             uniform vec2 resolution;
             varying vec2 vUV;
@@ -170,4 +169,138 @@ Effect.ShadersStore.shaderToyPixelShader = `
                 }
                 gl_FragColor = vec4(color, 1);
             }
-`;
+`;
+
+Effect.ShadersStore.seaCloudsPixelShader = `
+uniform float time;
+uniform vec2 mousePos;
+uniform vec2 resolution;
+varying vec2 vUV;
+            
+  float hash( float n ) {
+    return fract(sin(n)*43758.5453);
+  }
+  
+  float noise( in vec3 x ) {
+    vec3 p = floor(x);
+    vec3 f = fract(x);
+    f = f*f*(3.0-2.0*f);
+    float n = p.x + p.y*57.0 + 113.0*p.z;
+    return mix(mix(mix( hash(n+  0.0), hash(n+  1.0),f.x),
+                   mix( hash(n+ 57.0), hash(n+ 58.0),f.x),f.y),
+               mix(mix( hash(n+113.0), hash(n+114.0),f.x),
+                   mix( hash(n+170.0), hash(n+171.0),f.x),f.y),f.z);
+  }
+  
+  vec4 map( in vec3 p ) {
+    float d = 0.2 - p.y;
+    vec3 q = p - vec3(1.0,0.1,0.0)*time;
+    float f;
+    f  = 0.5000*noise( q ); q = q*2.02;
+    f += 0.2500*noise( q ); q = q*2.03;
+    f += 0.1250*noise( q ); q = q*2.01;
+    f += 0.0625*noise( q );
+    d += 3.0 * f;
+    d = clamp( d, 0.0, 1.0 );
+    vec4 res = vec4( d );
+    res.xyz = mix( 1.15*vec3(1.0,0.95,0.8), vec3(0.7,0.7,0.7), res.x );
+    return res;
+  }
+  
+  vec3 sundir = vec3(-1.0,0.0,0.0);
+  
+  vec4 raymarch( in vec3 ro, in vec3 rd ) {
+    vec4 sum = vec4(0, 0, 0, 0);
+    float t = 0.0;
+    for(int i=0; i<64; i++) {
+      if( sum.a > 0.99 ) continue;
+
+      vec3 pos = ro + t*rd;
+      vec4 col = map( pos );
+		
+      #if 1
+        float dif =  clamp((col.w - map(pos+0.3*sundir).w)/0.6, 0.0, 1.0 );
+        vec3 lin = vec3(0.65,0.68,0.7)*1.35 + 0.45*vec3(0.7, 0.5, 0.3)*dif;
+        col.xyz *= lin;
+      #endif
+		
+      col.a *= 0.35;
+      col.rgb *= col.a;
+      sum = sum + col*(1.0 - sum.a);	
+
+      #if 0
+        t += 0.1;
+      #else
+        t += max(0.1,0.025*t);
+      #endif
+    }
+
+    sum.xyz /= (0.001+sum.w);
+    return clamp( sum, 0.0, 1.0 );
+  }
+  
+  void main(void) {
+    vec2 q = gl_FragCoord.xy / resolution.xy;
+    vec2 p = -1.0 + 2.0*q;
+    p.x *= resolution.x/ resolution.y;
+    vec2 mo = -1.0 + 2.0*mousePos.xy / resolution.xy;
+    
+    // camera
+    vec3 ro = 2.0*normalize(vec3(cos(2.75-3.0*mo.x), 0.7+(mo.y+1.0), sin(2.75-3.0*mo.x)));
+    vec3 ta = vec3(0.0, 1.0, 0.0);
+    vec3 ww = normalize( ta - ro);
+    vec3 uu = normalize(cross( vec3(0.0,1.0,0.0), ww ));
+    vec3 vv = normalize(cross(ww,uu));
+    vec3 rd = normalize( p.x*uu + p.y*vv + 1.5*ww );
+
+	
+    vec4 res = raymarch( ro, rd );
+
+    float sun = clamp( dot(sundir,rd), 0.0, 1.0 );
+    vec3 col = vec3(0.6,0.71,0.75) - rd.y*0.2*vec3(1.0,0.5,1.0) + 0.15*0.5;
+    col += 0.2*vec3(1.0,.6,0.1)*pow( sun, 8.0 );
+    col *= 0.95;
+    col = mix( col, res.xyz, res.w );
+    col += 0.1*vec3(1.0,0.4,0.2)*pow( sun, 3.0 );
+  
+    gl_FragColor = vec4( col, 1.0 );
+  }
+`;
+
+
+Effect.ShadersStore.shaderShiftRGBVertexShader = `
+attribute vec3 position;
+attribute vec3 normal;
+attribute vec2 uv;
+uniform mat4 worldViewProjection;
+uniform mat4 projection;
+uniform float scale;
+uniform float shift;
+varying vec2 vUV;
+        
+void main() {
+vec3 pos = position;
+pos.y = pos.y + ((sin(uv.x * 3.1415926535897932384626433832795) * shift * 5.0) * 0.125);
+vUV = uv;
+gl_Position = worldViewProjection * vec4(pos,1.);
+}`;
+
+Effect.ShadersStore.shaderShiftRGBPixelShader = `
+      uniform sampler2D textureSampler;
+      uniform float hasTexture;
+      uniform float shift;
+      uniform float scale;
+      uniform float opacity;
+      uniform vec3 color;
+      varying vec2 vUV;
+      void main() {
+        float angle = 1.55;
+        vec2 p = (vUV - vec2(0.5, 0.5)) * (1.0 - scale) + vec2(0.5, 0.5);
+        vec2 offset = shift / 4.0 * vec2(cos(angle), sin(angle));
+        vec4 cr = texture2D(textureSampler, p + offset);
+        vec4 cga = texture2D(textureSampler, p);
+        vec4 cb = texture2D(textureSampler, p - offset);
+        if (hasTexture == 1.0) gl_FragColor = vec4(cr.r, cga.g, cb.b, cga.a);
+        else gl_FragColor = vec4(color, opacity);
+      }
+`;