Skip to content

G
gl-react-native-v2
Commit 49dea67f authored by Gaëtan Renaudeau's avatar Gaëtan Renaudeau
Browse files
Options

update some examples

parent 785d7df1
Show whitespace changes
Inline Side-by-side
Showing with 468 additions and 333 deletions
example/src/AdvancedEffects/Banner.js
View file @ 49dea67f
import React from "react";
import GL from "gl-react";
import {Surface} from "gl-react-native";
import { Surface } from "gl-react-native";
const shaders = GL.Shaders.create({
banner: {
frag: `
......@@ -25,13 +25,20 @@ void main( void ) {
});
class Banner extends React.Component {
render () {
render() {
const { width, height, time } = this.props;
return <Surface width={width} height={height} backgroundColor="transparent"
return (
<Surface
width={width}
height={height}
backgroundColor="transparent"
setZOrderOnTop
onLoad={() => console.log("Banner onLoad")}
onProgress={e => console.log("Banner onProgress", e.nativeEvent)}>
onProgress={e => console.log("Banner onProgress", e.nativeEvent)}
>
<GL.Node shader={shaders.banner} uniforms={{ time }} />
</Surface>;
</Surface>
);
}
}
......
example/src/AdvancedEffects/Transition.js
View file @ 49dea67f
import {PixelRatio} from "react-native";
import { PixelRatio } from "react-native";
import React from "react";
import GL from "gl-react";
module.exports = GL.createComponent(
({ width, height, shader, progress, from, to, uniforms }) => {
const scale = PixelRatio.get();
return <GL.Node
return (
<GL.Node
preload
shader={shader}
width={width}
height={height}
backgroundColor="transparent"
setZOrderOnTop
uniforms={{
progress,
from,
to,
...uniforms,
resolution: [ width * scale, height * scale ]
resolution: [width * scale, height * scale]
}}
/>;
/>
);
},
{ displayName: "Transition" });
{ displayName: "Transition" }
);
example/src/AdvancedEffects/Vignette.js
View file @ 49dea67f
import React from "react";
import GL from "gl-react";
import {Surface} from "gl-react-native";
import { Surface } from "gl-react-native";
const shaders = GL.Shaders.create({
imageVignette: {
......@@ -38,46 +38,49 @@ void main() {
}
});
class Vignette extends React.Component {
constructor (props) {
constructor(props) {
super(props);
this.onResponderMove = this.onResponderMove.bind(this);
this.state = {
finger: [0.5, 0.5]
};
}
onResponderMove (evt) {
onResponderMove(evt) {
const { width, height } = this.props;
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 { finger } = this.state;
return <Surface
return (
<Surface
width={width}
height={height}
backgroundColor="transparent"
setZOrderOnTop
preload
onStartShouldSetResponder={() => true}
onMoveShouldSetResponder={() => true}
onLoad={() => console.log("Vignette onLoad")}
onProgress={e => console.log("Vignette onProgress", e.nativeEvent)}
onResponderMove={this.onResponderMove}>
onResponderMove={this.onResponderMove}
>
<GL.Node
shader={shaders.imageVignette}
uniforms={{
time: time,
freq: 10 + 2 * Math.sin(0.7*time),
freq: 10 + 2 * Math.sin(0.7 * time),
texture: source,
amp: 0.05 + Math.max(0, 0.03*Math.cos(time)),
amp: 0.05 + Math.max(0, 0.03 * Math.cos(time)),
moving: 0,
finger: finger
}}
/>
</Surface>;
</Surface>
);
}
}
......
example/src/Simple/index.js
View file @ 49dea67f
import React, {Component} from "react";
import React, { Component } from "react";
import {
StyleSheet,
Text,
......@@ -7,7 +7,7 @@ import {
TextInput,
TouchableOpacity,
Slider,
Switch,
Switch
} from "react-native";
import { Surface } from "gl-react-native";
......@@ -19,47 +19,54 @@ import HueRotate from "./HueRotate";
import PieProgress from "./PieProgress";
import OneFingerResponse from "./OneFingerResponse";
import AnimatedHelloGL from "./AnimatedHelloGL";
import {Blur} from "gl-react-blur";
import { Blur } from "gl-react-blur";
import Button from "./Button";
class Demo extends Component {
render () {
render() {
const { title, children } = this.props;
return <View>
<Text style={styles.demoTitle}>{title}</Text>
return (
<View>
<Text style={styles.demoTitle}>
{title}
</Text>
<View style={styles.demo}>
{children}
</View>
</View>;
</View>
);
}
}
class Demos extends Component {
render () {
render() {
const { children, onChange, value } = this.props;
return <View>
return (
<View>
<View style={styles.nav}>
{React.Children.map(children, (demo, i) =>
<Text
style={{ flex: 1, padding: 10 }}
textStyle={{
textAlign: "center",
color: i!==value ? "#123" : "#69c",
color: i !== value ? "#123" : "#69c",
fontWeight: "bold"
}}
onPress={() => onChange(i)}>
{""+(i+1)}
</Text>)}
onPress={() => onChange(i)}
>
{"" + (i + 1)}
</Text>
)}
</View>
<View style={styles.demos}>
{children[value]}
</View>
</View>;
</View>
);
}
}
class Simple extends Component {
state = {
current: 0,
saturationFactor: 1,
......@@ -74,22 +81,22 @@ class Simple extends Component {
captureConfig: null
};
onCapture1 = () => {
const captureConfig = {
quality: Math.round((Math.random() * 100))/100,
type: Math.random() < 0.5 ? "jpg": "png",
quality: Math.round(Math.random() * 100) / 100,
type: Math.random() < 0.5 ? "jpg" : "png",
format: Math.random() < 0.5 ? "base64" : "file"
};
if (captureConfig.format === "file") {
captureConfig.filePath = RNFS.DocumentDirectoryPath+"/hellogl_capture.png";
captureConfig.filePath =
RNFS.DocumentDirectoryPath + "/hellogl_capture.png";
}
this.refs.helloGL
.captureFrame(captureConfig)
.then(captured => this.setState({ captured, captureConfig }));
};
render () {
render() {
const {
current,
saturationFactor,
......@@ -104,24 +111,30 @@ class Simple extends Component {
captureConfig
} = this.state;
return <View style={styles.container}>
return (
<View style={styles.container}>
<Demos onChange={current => this.setState({ current })} value={current}>
<Demo id={1} title="1. Hello GL">
<Surface width={256} height={171} ref="helloGL">
<HelloGL />
</Surface>
<View style={{ marginTop: 20, flexDirection: "row" }}>
<Button onPress={this.onCapture1}>
captureFrame()
</Button>
<Button onPress={this.onCapture1}>captureFrame()</Button>
{captured &&
<Image source={{ uri: captured }}
<Image
source={{ uri: captured }}
style={{ marginLeft: 20, width: 51, height: 34 }}
/> }
/>}
</View>
{captureConfig &&
<View style={{ paddingTop: 20, alignItems: "center", flexDirection: "row", justifyContent: "space-between" }}>
<View
style={{
paddingTop: 20,
alignItems: "center",
flexDirection: "row",
justifyContent: "space-between"
}}
>
<Text style={{ fontSize: 10 }}>
format={captureConfig.format}
</Text>
......@@ -129,14 +142,16 @@ class Simple extends Component {
type={captureConfig.type}
</Text>
<Text style={{ fontSize: 10 }}>
quality={captureConfig.quality+""}
quality={captureConfig.quality + ""}
</Text>
</View>
}
</View>}
{captured &&
<Text numberOfLines={1} style={{ marginTop: 10, fontSize: 10, color: "#aaa" }}>
<Text
numberOfLines={1}
style={{ marginTop: 10, fontSize: 10, color: "#aaa" }}
>
{captured.slice(0, 100)}
</Text> }
</Text>}
</Demo>
<Demo id={2} title="2. Saturate an Image">
......@@ -148,7 +163,8 @@ class Simple extends Component {
</Surface>
<Slider
maximumValue={8}
onValueChange ={saturationFactor => this.setState({ saturationFactor })}
onValueChange={saturationFactor =>
this.setState({ saturationFactor })}
/>
</Demo>
......@@ -156,9 +172,14 @@ class Simple extends Component {
<Surface autoRedraw width={256} height={180}>
<HueRotate hue={hue}>
<View key="hue" style={{ width: 256, height: 180 }}>
<Image style={{ width: 256, height: 244 }} source={{ uri: "https://i.imgur.com/qVxHrkY.jpg" }}/>
<Image
style={{ width: 256, height: 244 }}
source={{ uri: "https://i.imgur.com/qVxHrkY.jpg" }}
/>
<Text style={styles.demoText1}>Throw me to the wolves</Text>
<Text style={styles.demoText2}>{text}</Text>
<Text style={styles.demoText2}>
{text}
</Text>
</View>
</HueRotate>
</Surface>
......@@ -176,7 +197,8 @@ class Simple extends Component {
<Demo id={4} current={current} title="4. Progress Indicator">
<View style={{ position: "relative", width: 256, height: 180 }}>
<TouchableOpacity>
<Image source={{ uri: "https://i.imgur.com/qM9BHCy.jpg" }}
<Image
source={{ uri: "https://i.imgur.com/qM9BHCy.jpg" }}
style={{
width: 256,
height: 180,
......@@ -186,8 +208,22 @@ class Simple extends Component {
}}
/>
</TouchableOpacity>
<View pointerEvents="box-none" style={{ position: "absolute", top: 0, left: 0, backgroundColor: "transparent" }}>
<Surface width={256} height={180} backgroundColor="transparent" eventsThrough>
<View
pointerEvents="box-none"
style={{
position: "absolute",
top: 0,
left: 0,
backgroundColor: "transparent"
}}
>
<Surface
width={256}
height={180}
backgroundColor="transparent"
setZOrderOnTop
eventsThrough
>
<PieProgress progress={progress} />
</Surface>
</View>
......@@ -199,17 +235,11 @@ class Simple extends Component {
</Demo>
<Demo id={5} current={current} title="5. Touch Responsive">
<OneFingerResponse
width={256}
height={180}
/>
<OneFingerResponse width={256} height={180} />
</Demo>
<Demo id={6} current={current} title="6. Animation">
<AnimatedHelloGL
width={256}
height={180}
/>
<AnimatedHelloGL width={256} height={180} />
</Demo>
<Demo id={7} current={current} title="7. Blur">
......@@ -220,7 +250,8 @@ class Simple extends Component {
</Surface>
<Slider
maximumValue={2}
onValueChange={factor => this.setState({ factor })} />
onValueChange={factor => this.setState({ factor })}
/>
</Demo>
<Demo id={8} current={current} title="8. Blur+Hue over UI">
......@@ -229,33 +260,62 @@ class Simple extends Component {
height={160}
autoRedraw
eventsThrough
visibleContent>
visibleContent
>
<HueRotate hue={-switch1 + 2 * switch2 + 4 * switch3}>
<Blur factor={factor}>
<View key="blur" style={{ width: 256, height: 160, padding: 10, backgroundColor: "#f9f9f9" }}>
<View
key="blur"
style={{
width: 256,
height: 160,
padding: 10,
backgroundColor: "#f9f9f9"
}}
>
<Slider
style={{ height: 80 }}
maximumValue={1}
onValueChange={factor => this.setState({ factor })}
/>
<View style={{ height: 60, flexDirection: "row", alignItems: "center" }}>
<Switch style={{flex:1}} value={switch1} onValueChange={(switch1) => this.setState({ switch1 })} />
<Switch style={{flex:1}} value={switch2} onValueChange={(switch2) => this.setState({ switch2 })} />
<Switch style={{flex:1}} value={switch3} onValueChange={(switch3) => this.setState({ switch3 })} />
<View
style={{
height: 60,
flexDirection: "row",
alignItems: "center"
}}
>
<Switch
style={{ flex: 1 }}
value={switch1}
onValueChange={switch1 => this.setState({ switch1 })}
/>
<Switch
style={{ flex: 1 }}
value={switch2}
onValueChange={switch2 => this.setState({ switch2 })}
/>
<Switch
style={{ flex: 1 }}
value={switch3}
onValueChange={switch3 => this.setState({ switch3 })}
/>
</View>
</View>
</Blur>
</HueRotate>
</Surface>
<Text>Note: This is highly experimental and not yet performant enough.</Text>
<Text>
Note: This is highly experimental and not yet performant enough.
</Text>
</Demo>
<Demo id={9} current={current} title="9. Texture from array">
<Text>Not Supported Yet</Text>
</Demo>
</Demos>
</View>;
</View>
);
}
}
......@@ -263,7 +323,7 @@ const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#F9F9F9",
paddingTop: 50,
paddingTop: 50
},
nav: {
flexDirection: "row",
......@@ -274,7 +334,7 @@ const styles = StyleSheet.create({
justifyContent: "center",
marginLeft: 40,
width: 276,
marginBottom: 40,
marginBottom: 40
},
demoTitle: {
marginBottom: 16,
......@@ -282,11 +342,11 @@ const styles = StyleSheet.create({
alignSelf: "flex-start",
color: "#999",
fontWeight: "300",
fontSize: 20,
fontSize: 20
},
demo: {
marginBottom: 64,
marginLeft: 20,
marginLeft: 20
},
demoText1: {
position: "absolute",
......@@ -311,7 +371,7 @@ const styles = StyleSheet.create({
fontWeight: "300",
fontSize: 32,
letterSpacing: -1
},
}
});
module.exports = Simple;
example/src/Tests/index.js
View file @ 49dea67f
import React from "react";
import {Text, View, ScrollView, Image} from "react-native";
import {Surface} from "gl-react-native";
import {Blur} from "gl-react-blur";
import { Text, View, ScrollView, Image } from "react-native";
import { Surface } from "gl-react-native";
import { Blur } from "gl-react-blur";
import Add from "./Add";
import Multiply from "./Multiply";
import Layer from "./Layer";
......@@ -16,63 +16,88 @@ import Dimensions from "Dimensions";
const { width: viewportW, height: viewportH } = Dimensions.get("window");
class Tests extends React.Component {
constructor (props) {
constructor(props) {
super(props);
this.onLoad = this.onLoad.bind(this);
this.onProgress = this.onProgress.bind(this);
}
onLoad () {
onLoad() {
console.log("LOADED");
}
onProgress ({nativeEvent: { progress, loaded, total }}) {
onProgress({ nativeEvent: { progress, loaded, total } }) {
console.log("PROGRESS", progress, loaded, total);
}
render () {
render() {
const debugSize = viewportW / 4;
const helloGL =
<HelloGL width={64} height={64} />;
const helloGL = <HelloGL width={64} height={64} />;
const txt =
<View key="txt" style={{ width: 400, height: 400, position: "relative", backgroundColor: "transparent" }}>
{[0,1,2,3].map(i => <Text key={i} style={{
const txt = (
<View
key="txt"
style={{
width: 400,
height: 400,
position: "relative",
backgroundColor: "transparent"
}}
>
{[0, 1, 2, 3].map(i =>
<Text
key={i}
style={{
position: "absolute",
top: 20+100*i,
top: 20 + 100 * i,
left: 0,
width: 400,
height: 100,
textAlign: "center",
color: ["#f00", "#0f0", "#00f", "#fff"][i],
fontSize: 40
}}>
}}
>
Hello World {i}
</Text>)}
</View>;
</Text>
)}
</View>
);
const img = "https://i.imgur.com/zJIxPEo.jpg";
const blurredImage =
const blurredImage = (
<Blur factor={4} passes={6} width={200} height={200}>
{img}
</Blur>;
</Blur>
);
const blurredImageOverText =
const blurredImageOverText = (
<Layer>
{blurredImage}
{txt}
</Layer>;
return <ScrollView style={{ backgroundColor: "#000", flex: 1 }}>
<Surface width={viewportW} height={viewportW} preload onLoad={this.onLoad} onProgress={this.onProgress}>
</Layer>
);
return (
<ScrollView style={{ backgroundColor: "#000", flex: 1 }}>
<Surface
width={viewportW}
height={viewportW}
preload
onLoad={this.onLoad}
onProgress={this.onProgress}
>
<Display2>
<Add width={viewportW/2} height={viewportH/2}>
<Add width={viewportW / 2} height={viewportH / 2}>
{txt}
{helloGL}
</Add>
<Display2 width={viewportW/2} height={viewportH/2} vertical>
<Blur factor={1} passes={4} width={viewportW/2} height={viewportH/4}>
<Display2 width={viewportW / 2} height={viewportH / 2} vertical>
<Blur
factor={1}
passes={4}
width={viewportW / 2}
height={viewportH / 4}
>
<Multiply>
{blurredImageOverText}
{helloGL}
......@@ -84,21 +109,38 @@ class Tests extends React.Component {
</Surface>
<View style={{ flexDirection: "row", flexWrap: "wrap" }}>
<NativeLayer width={debugSize} height={debugSize}>
<Image key={0} source={{ uri: "https://i.imgur.com/S22HNaU.png" }} width={debugSize} height={debugSize} />
<Image key={1} source={{ uri: "https://i.imgur.com/mp79p5T.png" }} width={debugSize} height={debugSize} />
<Image
key={0}
source={{ uri: "https://i.imgur.com/S22HNaU.png" }}
width={debugSize}
height={debugSize}
/>
<Image
key={1}
source={{ uri: "https://i.imgur.com/mp79p5T.png" }}
width={debugSize}
height={debugSize}
/>
</NativeLayer>
<NativeLayer width={debugSize} height={debugSize}>
<Image key={0} source={{ uri: "https://i.imgur.com/S22HNaU.png" }} width={debugSize} height={debugSize} />
<Surface width={debugSize} height={debugSize} backgroundColor="transparent">
<Image
key={0}
source={{ uri: "https://i.imgur.com/S22HNaU.png" }}
width={debugSize}
height={debugSize}
/>
<Surface
width={debugSize}
height={debugSize}
backgroundColor="transparent"
setZOrderOnTop
>
<Copy last>
<Copy>
<Copy>
<Copy>
https://i.imgur.com/mp79p5T.png
</Copy>
<Copy>https://i.imgur.com/mp79p5T.png</Copy>
</Copy>
</Copy>
</Copy>
......@@ -106,8 +148,17 @@ class Tests extends React.Component {
</NativeLayer>
<NativeLayer width={debugSize} height={debugSize}>
<Image source={{ uri: "https://i.imgur.com/S22HNaU.png" }} width={debugSize} height={debugSize} />
<Surface width={debugSize} height={debugSize} backgroundColor="transparent">
<Image
source={{ uri: "https://i.imgur.com/S22HNaU.png" }}
width={debugSize}
height={debugSize}
/>
<Surface
width={debugSize}
height={debugSize}
backgroundColor="transparent"
setZOrderOnTop
>
<Layer>
https://i.imgur.com/mp79p5T.png
<TransparentNonPremultiplied>
......@@ -118,16 +169,23 @@ class Tests extends React.Component {
</NativeLayer>
<NativeLayer width={debugSize} height={debugSize}>
<Image source={{ uri: "https://i.imgur.com/S22HNaU.png" }} width={debugSize} height={debugSize} />
<Surface width={debugSize} height={debugSize} backgroundColor="transparent">
<Image
source={{ uri: "https://i.imgur.com/S22HNaU.png" }}
width={debugSize}
height={debugSize}
/>
<Surface
width={debugSize}
height={debugSize}
backgroundColor="transparent"
setZOrderOnTop
>
<Layer>
https://i.imgur.com/mp79p5T.png
<TransparentNonPremultiplied>
<Copy>
<TransparentNonPremultiplied>
<Copy>
https://i.imgur.com/S22HNaU.png
</Copy>
<Copy>https://i.imgur.com/S22HNaU.png</Copy>
</TransparentNonPremultiplied>
</Copy>
</TransparentNonPremultiplied>
......@@ -139,7 +197,11 @@ class Tests extends React.Component {
<HelloGL width={2} height={2} pixelRatio={1} />
</Surface>
<Surface style={{ borderRadius: 50 }} width={debugSize} height={debugSize}>
<Surface
style={{ borderRadius: 50 }}
width={debugSize}
height={debugSize}
>
<HelloGL />
</Surface>
......@@ -148,10 +210,9 @@ class Tests extends React.Component {
https://i.imgur.com/rkiglmm.jpg
</Blur>
</Surface>
</View>
</ScrollView>;
</ScrollView>
);
}
}
......
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