Commit 49dea67f authored by Gaëtan Renaudeau's avatar Gaëtan Renaudeau

update some examples

parent 785d7df1
import React from "react"; import React from "react";
import GL from "gl-react"; import GL from "gl-react";
import {Surface} from "gl-react-native"; import { Surface } from "gl-react-native";
const shaders = GL.Shaders.create({ const shaders = GL.Shaders.create({
banner: { banner: {
frag: ` frag: `
...@@ -25,13 +25,20 @@ void main( void ) { ...@@ -25,13 +25,20 @@ void main( void ) {
}); });
class Banner extends React.Component { class Banner extends React.Component {
render () { render() {
const { width, height, time } = this.props; const { width, height, time } = this.props;
return <Surface width={width} height={height} backgroundColor="transparent" return (
onLoad={() => console.log("Banner onLoad")} <Surface
onProgress={e => console.log("Banner onProgress", e.nativeEvent)}> width={width}
<GL.Node shader={shaders.banner} uniforms={{ time }} /> height={height}
</Surface>; backgroundColor="transparent"
setZOrderOnTop
onLoad={() => console.log("Banner onLoad")}
onProgress={e => console.log("Banner onProgress", e.nativeEvent)}
>
<GL.Node shader={shaders.banner} uniforms={{ time }} />
</Surface>
);
} }
} }
......
import {PixelRatio} from "react-native"; import { PixelRatio } from "react-native";
import React from "react"; import React from "react";
import GL from "gl-react"; import GL from "gl-react";
module.exports = GL.createComponent( module.exports = GL.createComponent(
({ width, height, shader, progress, from, to, uniforms }) => { ({ width, height, shader, progress, from, to, uniforms }) => {
const scale = PixelRatio.get(); const scale = PixelRatio.get();
return <GL.Node return (
preload <GL.Node
shader={shader} preload
width={width} shader={shader}
height={height} width={width}
backgroundColor="transparent" height={height}
uniforms={{ backgroundColor="transparent"
progress, setZOrderOnTop
from, uniforms={{
to, progress,
...uniforms, from,
resolution: [ width * scale, height * scale ] to,
}} ...uniforms,
/>; resolution: [width * scale, height * scale]
}}
/>
);
}, },
{ displayName: "Transition" }); { displayName: "Transition" }
);
import React from "react"; import React from "react";
import GL from "gl-react"; import GL from "gl-react";
import {Surface} from "gl-react-native"; import { Surface } from "gl-react-native";
const shaders = GL.Shaders.create({ const shaders = GL.Shaders.create({
imageVignette: { imageVignette: {
...@@ -38,46 +38,49 @@ void main() { ...@@ -38,46 +38,49 @@ void main() {
} }
}); });
class Vignette extends React.Component { class Vignette extends React.Component {
constructor (props) { constructor(props) {
super(props); super(props);
this.onResponderMove = this.onResponderMove.bind(this); this.onResponderMove = this.onResponderMove.bind(this);
this.state = { this.state = {
finger: [0.5, 0.5] finger: [0.5, 0.5]
}; };
} }
onResponderMove (evt) { onResponderMove(evt) {
const { width, height } = this.props; const { width, height } = this.props;
const { locationX, locationY } = evt.nativeEvent; const { locationX, locationY } = evt.nativeEvent;
this.setState({ finger: [locationX/width, 1-locationY/height] }); this.setState({ finger: [locationX / width, 1 - locationY / height] });
} }
render () { render() {
const { width, height, time, source } = this.props; const { width, height, time, source } = this.props;
const { finger } = this.state; const { finger } = this.state;
return <Surface return (
width={width} <Surface
height={height} width={width}
backgroundColor="transparent" height={height}
preload backgroundColor="transparent"
onStartShouldSetResponder={() => true} setZOrderOnTop
onMoveShouldSetResponder={() => true} preload
onLoad={() => console.log("Vignette onLoad")} onStartShouldSetResponder={() => true}
onProgress={e => console.log("Vignette onProgress", e.nativeEvent)} onMoveShouldSetResponder={() => true}
onResponderMove={this.onResponderMove}> onLoad={() => console.log("Vignette onLoad")}
<GL.Node onProgress={e => console.log("Vignette onProgress", e.nativeEvent)}
shader={shaders.imageVignette} onResponderMove={this.onResponderMove}
uniforms={{ >
time: time, <GL.Node
freq: 10 + 2 * Math.sin(0.7*time), shader={shaders.imageVignette}
texture: source, uniforms={{
amp: 0.05 + Math.max(0, 0.03*Math.cos(time)), time: time,
moving: 0, freq: 10 + 2 * Math.sin(0.7 * time),
finger: finger texture: source,
}} amp: 0.05 + Math.max(0, 0.03 * Math.cos(time)),
/> moving: 0,
</Surface>; finger: finger
}}
/>
</Surface>
);
} }
} }
......
This diff is collapsed.
This diff is collapsed.
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment