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
Hide 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 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>
);
} }
} }
......
example/src/AdvancedEffects/Transition.js
View file @ 49dea67f
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" }
);
example/src/AdvancedEffects/Vignette.js
View file @ 49dea67f
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>
);
} }
} }
......
example/src/Simple/index.js
View file @ 49dea67f
import React, {Component} from "react"; import React, { Component } from "react";
import { import {
StyleSheet, StyleSheet,
Text, Text,
...@@ -7,7 +7,7 @@ import { ...@@ -7,7 +7,7 @@ import {
TextInput, TextInput,
TouchableOpacity, TouchableOpacity,
Slider, Slider,
Switch, Switch
} from "react-native"; } from "react-native";
import { Surface } from "gl-react-native"; import { Surface } from "gl-react-native";
...@@ -19,47 +19,54 @@ import HueRotate from "./HueRotate"; ...@@ -19,47 +19,54 @@ import HueRotate from "./HueRotate";
import PieProgress from "./PieProgress"; import PieProgress from "./PieProgress";
import OneFingerResponse from "./OneFingerResponse"; import OneFingerResponse from "./OneFingerResponse";
import AnimatedHelloGL from "./AnimatedHelloGL"; import AnimatedHelloGL from "./AnimatedHelloGL";
import {Blur} from "gl-react-blur"; import { Blur } from "gl-react-blur";
import Button from "./Button"; import Button from "./Button";
class Demo extends Component { class Demo extends Component {
render () { render() {
const { title, children } = this.props; const { title, children } = this.props;
return <View> return (
<Text style={styles.demoTitle}>{title}</Text> <View>
<View style={styles.demo}> <Text style={styles.demoTitle}>
{children} {title}
</Text>
<View style={styles.demo}>
{children}
</View>
</View> </View>
</View>; );
} }
} }
class Demos extends Component { class Demos extends Component {
render () { render() {
const { children, onChange, value } = this.props; const { children, onChange, value } = this.props;
return <View> return (
<View style={styles.nav}> <View>
{React.Children.map(children, (demo, i) => <View style={styles.nav}>
<Text {React.Children.map(children, (demo, i) =>
style={{ flex: 1, padding: 10 }} <Text
textStyle={{ style={{ flex: 1, padding: 10 }}
textAlign: "center", textStyle={{
color: i!==value ? "#123" : "#69c", textAlign: "center",
fontWeight: "bold" color: i !== value ? "#123" : "#69c",
}} fontWeight: "bold"
onPress={() => onChange(i)}> }}
{""+(i+1)} onPress={() => onChange(i)}
</Text>)} >
{"" + (i + 1)}
</Text>
)}
</View>
<View style={styles.demos}>
{children[value]}
</View>
</View> </View>
<View style={styles.demos}> );
{children[value]}
</View>
</View>;
} }
} }
class Simple extends Component { class Simple extends Component {
state = { state = {
current: 0, current: 0,
saturationFactor: 1, saturationFactor: 1,
...@@ -74,22 +81,22 @@ class Simple extends Component { ...@@ -74,22 +81,22 @@ class Simple extends Component {
captureConfig: null captureConfig: null
}; };
onCapture1 = () => { onCapture1 = () => {
const captureConfig = { const captureConfig = {
quality: Math.round((Math.random() * 100))/100, quality: Math.round(Math.random() * 100) / 100,
type: Math.random() < 0.5 ? "jpg": "png", type: Math.random() < 0.5 ? "jpg" : "png",
format: Math.random() < 0.5 ? "base64" : "file" format: Math.random() < 0.5 ? "base64" : "file"
}; };
if (captureConfig.format === "file") { if (captureConfig.format === "file") {
captureConfig.filePath = RNFS.DocumentDirectoryPath+"/hellogl_capture.png"; captureConfig.filePath =
RNFS.DocumentDirectoryPath + "/hellogl_capture.png";
} }
this.refs.helloGL this.refs.helloGL
.captureFrame(captureConfig) .captureFrame(captureConfig)
.then(captured => this.setState({ captured, captureConfig })); .then(captured => this.setState({ captured, captureConfig }));
}; };
render () { render() {
const { const {
current, current,
saturationFactor, saturationFactor,
...@@ -104,158 +111,211 @@ class Simple extends Component { ...@@ -104,158 +111,211 @@ class Simple extends Component {
captureConfig captureConfig
} = this.state; } = this.state;
return <View style={styles.container}> return (
<View style={styles.container}>
<Demos onChange={current => this.setState({ current })} value={current}> <Demos onChange={current => this.setState({ current })} value={current}>
<Demo id={1} title="1. Hello GL"> <Demo id={1} title="1. Hello GL">
<Surface width={256} height={171} ref="helloGL"> <Surface width={256} height={171} ref="helloGL">
<HelloGL /> <HelloGL />
</Surface> </Surface>
<View style={{ marginTop: 20, flexDirection: "row" }}> <View style={{ marginTop: 20, flexDirection: "row" }}>
<Button onPress={this.onCapture1}> <Button onPress={this.onCapture1}>captureFrame()</Button>
captureFrame() {captured &&
</Button> <Image
{captured && source={{ uri: captured }}
<Image source={{ uri: captured }} style={{ marginLeft: 20, width: 51, height: 34 }}
style={{ marginLeft: 20, width: 51, height: 34 }} />}
/> }
</View>
{captureConfig &&
<View style={{ paddingTop: 20, alignItems: "center", flexDirection: "row", justifyContent: "space-between" }}>
<Text style={{ fontSize: 10 }}>
format={captureConfig.format}
</Text>
<Text style={{ fontSize: 10 }}>
type={captureConfig.type}
</Text>
<Text style={{ fontSize: 10 }}>
quality={captureConfig.quality+""}
</Text>
</View> </View>
} {captureConfig &&
{captured && <View
<Text numberOfLines={1} style={{ marginTop: 10, fontSize: 10, color: "#aaa" }}> style={{
{captured.slice(0, 100)} paddingTop: 20,
</Text> } alignItems: "center",
</Demo> flexDirection: "row",
justifyContent: "space-between"
}}
>
<Text style={{ fontSize: 10 }}>
format={captureConfig.format}
</Text>
<Text style={{ fontSize: 10 }}>
type={captureConfig.type}
</Text>
<Text style={{ fontSize: 10 }}>
quality={captureConfig.quality + ""}
</Text>
</View>}
{captured &&
<Text
numberOfLines={1}
style={{ marginTop: 10, fontSize: 10, color: "#aaa" }}
>
{captured.slice(0, 100)}
</Text>}
</Demo>
<Demo id={2} title="2. Saturate an Image"> <Demo id={2} title="2. Saturate an Image">
<Surface width={256} height={171}> <Surface width={256} height={171}>
<Saturation <Saturation
factor={saturationFactor} factor={saturationFactor}
image={{ uri: "https://i.imgur.com/iPKTONG.jpg" }} image={{ uri: "https://i.imgur.com/iPKTONG.jpg" }}
/>
</Surface>
<Slider
maximumValue={8}
onValueChange={saturationFactor =>
this.setState({ saturationFactor })}
/> />
</Surface> </Demo>
<Slider
maximumValue={8}
onValueChange ={saturationFactor => this.setState({ saturationFactor })}
/>
</Demo>
<Demo id={3} current={current} title="3. Hue Rotate on Text+Image"> <Demo id={3} current={current} title="3. Hue Rotate on Text+Image">
<Surface autoRedraw width={256} height={180}> <Surface autoRedraw width={256} height={180}>
<HueRotate hue={hue}> <HueRotate hue={hue}>
<View key="hue" style={{ width: 256, height: 180 }}> <View key="hue" style={{ width: 256, height: 180 }}>
<Image style={{ width: 256, height: 244 }} source={{ uri: "https://i.imgur.com/qVxHrkY.jpg" }}/> <Image
<Text style={styles.demoText1}>Throw me to the wolves</Text> style={{ width: 256, height: 244 }}
<Text style={styles.demoText2}>{text}</Text> source={{ uri: "https://i.imgur.com/qVxHrkY.jpg" }}
</View> />
</HueRotate> <Text style={styles.demoText1}>Throw me to the wolves</Text>
</Surface> <Text style={styles.demoText2}>
<Slider {text}
maximumValue={2 * Math.PI} </Text>
onValueChange={hue => this.setState({ hue })} </View>
/> </HueRotate>
<TextInput </Surface>
style={{ height: 40, borderColor: "#aaa", borderWidth: 1 }} <Slider
onChangeText={text => this.setState({ text })} maximumValue={2 * Math.PI}
value={text} onValueChange={hue => this.setState({ hue })}
/> />
</Demo> <TextInput
style={{ height: 40, borderColor: "#aaa", borderWidth: 1 }}
onChangeText={text => this.setState({ text })}
value={text}
/>
</Demo>
<Demo id={4} current={current} title="4. Progress Indicator"> <Demo id={4} current={current} title="4. Progress Indicator">
<View style={{ position: "relative", width: 256, height: 180 }}> <View style={{ position: "relative", width: 256, height: 180 }}>
<TouchableOpacity> <TouchableOpacity>
<Image source={{ uri: "https://i.imgur.com/qM9BHCy.jpg" }} <Image
source={{ uri: "https://i.imgur.com/qM9BHCy.jpg" }}
style={{
width: 256,
height: 180,
position: "absolute",
top: 0,
left: 0
}}
/>
</TouchableOpacity>
<View
pointerEvents="box-none"
style={{ style={{
width: 256,
height: 180,
position: "absolute", position: "absolute",
top: 0, top: 0,
left: 0 left: 0,
backgroundColor: "transparent"
}} }}
/> >
</TouchableOpacity> <Surface
<View pointerEvents="box-none" style={{ position: "absolute", top: 0, left: 0, backgroundColor: "transparent" }}> width={256}
<Surface width={256} height={180} backgroundColor="transparent" eventsThrough> height={180}
<PieProgress progress={progress} /> backgroundColor="transparent"
</Surface> setZOrderOnTop
eventsThrough
>
<PieProgress progress={progress} />
</Surface>
</View>
</View> </View>
</View> <Slider
<Slider maximumValue={1}
maximumValue={1} onValueChange={progress => this.setState({ progress })}
onValueChange={progress => this.setState({ progress })} />
/> </Demo>
</Demo>
<Demo id={5} current={current} title="5. Touch Responsive">
<OneFingerResponse
width={256}
height={180}
/>
</Demo>
<Demo id={6} current={current} title="6. Animation"> <Demo id={5} current={current} title="5. Touch Responsive">
<AnimatedHelloGL <OneFingerResponse width={256} height={180} />
width={256} </Demo>
height={180}
/>
</Demo>
<Demo id={7} current={current} title="7. Blur"> <Demo id={6} current={current} title="6. Animation">
<Surface preload width={256} height={180}> <AnimatedHelloGL width={256} height={180} />
<Blur factor={factor * 2} passes={4}> </Demo>
https://i.imgur.com/3On9QEu.jpg
</Blur>
</Surface>
<Slider
maximumValue={2}
onValueChange={factor => this.setState({ factor })} />
</Demo>
<Demo id={8} current={current} title="8. Blur+Hue over UI"> <Demo id={7} current={current} title="7. Blur">
<Surface <Surface preload width={256} height={180}>
width={256} <Blur factor={factor * 2} passes={4}>
height={160} https://i.imgur.com/3On9QEu.jpg
autoRedraw
eventsThrough
visibleContent>
<HueRotate hue={-switch1 + 2 * switch2 + 4 * switch3}>
<Blur factor={factor}>
<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>
</View>
</Blur> </Blur>
</HueRotate> </Surface>
</Surface> <Slider
<Text>Note: This is highly experimental and not yet performant enough.</Text> maximumValue={2}
</Demo> onValueChange={factor => this.setState({ factor })}
/>
</Demo>
<Demo id={9} current={current} title="9. Texture from array"> <Demo id={8} current={current} title="8. Blur+Hue over UI">
<Text>Not Supported Yet</Text> <Surface
</Demo> width={256}
height={160}
autoRedraw
eventsThrough
visibleContent
>
<HueRotate hue={-switch1 + 2 * switch2 + 4 * switch3}>
<Blur factor={factor}>
<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>
</View>
</Blur>
</HueRotate>
</Surface>
<Text>
Note: This is highly experimental and not yet performant enough.
</Text>
</Demo>
</Demos> <Demo id={9} current={current} title="9. Texture from array">
</View>; <Text>Not Supported Yet</Text>
</Demo>
</Demos>
</View>
);
} }
} }
...@@ -263,7 +323,7 @@ const styles = StyleSheet.create({ ...@@ -263,7 +323,7 @@ const styles = StyleSheet.create({
container: { container: {
flex: 1, flex: 1,
backgroundColor: "#F9F9F9", backgroundColor: "#F9F9F9",
paddingTop: 50, paddingTop: 50
}, },
nav: { nav: {
flexDirection: "row", flexDirection: "row",
...@@ -274,7 +334,7 @@ const styles = StyleSheet.create({ ...@@ -274,7 +334,7 @@ const styles = StyleSheet.create({
justifyContent: "center", justifyContent: "center",
marginLeft: 40, marginLeft: 40,
width: 276, width: 276,
marginBottom: 40, marginBottom: 40
}, },
demoTitle: { demoTitle: {
marginBottom: 16, marginBottom: 16,
...@@ -282,11 +342,11 @@ const styles = StyleSheet.create({ ...@@ -282,11 +342,11 @@ const styles = StyleSheet.create({
alignSelf: "flex-start", alignSelf: "flex-start",
color: "#999", color: "#999",
fontWeight: "300", fontWeight: "300",
fontSize: 20, fontSize: 20
}, },
demo: { demo: {
marginBottom: 64, marginBottom: 64,
marginLeft: 20, marginLeft: 20
}, },
demoText1: { demoText1: {
position: "absolute", position: "absolute",
...@@ -311,7 +371,7 @@ const styles = StyleSheet.create({ ...@@ -311,7 +371,7 @@ const styles = StyleSheet.create({
fontWeight: "300", fontWeight: "300",
fontSize: 32, fontSize: 32,
letterSpacing: -1 letterSpacing: -1
}, }
}); });
module.exports = Simple; module.exports = Simple;
example/src/Tests/index.js
View file @ 49dea67f
import React from "react"; import React from "react";
import {Text, View, ScrollView, Image} from "react-native"; import { Text, View, ScrollView, Image } from "react-native";
import {Surface} from "gl-react-native"; import { Surface } from "gl-react-native";
import {Blur} from "gl-react-blur"; import { Blur } from "gl-react-blur";
import Add from "./Add"; import Add from "./Add";
import Multiply from "./Multiply"; import Multiply from "./Multiply";
import Layer from "./Layer"; import Layer from "./Layer";
...@@ -16,142 +16,203 @@ import Dimensions from "Dimensions"; ...@@ -16,142 +16,203 @@ import Dimensions from "Dimensions";
const { width: viewportW, height: viewportH } = Dimensions.get("window"); const { width: viewportW, height: viewportH } = Dimensions.get("window");
class Tests extends React.Component { class Tests extends React.Component {
constructor(props) {
constructor (props) {
super(props); super(props);
this.onLoad = this.onLoad.bind(this); this.onLoad = this.onLoad.bind(this);
this.onProgress = this.onProgress.bind(this); this.onProgress = this.onProgress.bind(this);
} }
onLoad () { onLoad() {
console.log("LOADED"); console.log("LOADED");
} }
onProgress ({nativeEvent: { progress, loaded, total }}) { onProgress({ nativeEvent: { progress, loaded, total } }) {
console.log("PROGRESS", progress, loaded, total); console.log("PROGRESS", progress, loaded, total);
} }
render () { render() {
const debugSize = viewportW / 4; const debugSize = viewportW / 4;
const helloGL = const helloGL = <HelloGL width={64} height={64} />;
<HelloGL width={64} height={64} />;
const txt = const txt = (
<View key="txt" style={{ width: 400, height: 400, position: "relative", backgroundColor: "transparent" }}> <View
{[0,1,2,3].map(i => <Text key={i} style={{ key="txt"
position: "absolute", style={{
top: 20+100*i,
left: 0,
width: 400, width: 400,
height: 100, height: 400,
textAlign: "center", position: "relative",
color: ["#f00", "#0f0", "#00f", "#fff"][i], backgroundColor: "transparent"
fontSize: 40 }}
}}> >
Hello World {i} {[0, 1, 2, 3].map(i =>
</Text>)} <Text
</View>; key={i}
style={{
position: "absolute",
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>
);
const img = "https://i.imgur.com/zJIxPEo.jpg"; const img = "https://i.imgur.com/zJIxPEo.jpg";
const blurredImage = const blurredImage = (
<Blur factor={4} passes={6} width={200} height={200}> <Blur factor={4} passes={6} width={200} height={200}>
{img} {img}
</Blur>; </Blur>
);
const blurredImageOverText = const blurredImageOverText = (
<Layer> <Layer>
{blurredImage} {blurredImage}
{txt} {txt}
</Layer>; </Layer>
);
return <ScrollView style={{ backgroundColor: "#000", flex: 1 }}>
return (
<Surface width={viewportW} height={viewportW} preload onLoad={this.onLoad} onProgress={this.onProgress}> <ScrollView style={{ backgroundColor: "#000", flex: 1 }}>
<Display2> <Surface
<Add width={viewportW/2} height={viewportH/2}> width={viewportW}
{txt} height={viewportW}
{helloGL} preload
</Add> onLoad={this.onLoad}
<Display2 width={viewportW/2} height={viewportH/2} vertical> onProgress={this.onProgress}
<Blur factor={1} passes={4} width={viewportW/2} height={viewportH/4}> >
<Multiply> <Display2>
{blurredImageOverText} <Add width={viewportW / 2} height={viewportH / 2}>
{helloGL} {txt}
</Multiply> {helloGL}
</Blur> </Add>
{blurredImage} <Display2 width={viewportW / 2} height={viewportH / 2} vertical>
<Blur
factor={1}
passes={4}
width={viewportW / 2}
height={viewportH / 4}
>
<Multiply>
{blurredImageOverText}
{helloGL}
</Multiply>
</Blur>
{blurredImage}
</Display2>
</Display2> </Display2>
</Display2> </Surface>
</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} />
</NativeLayer>
<NativeLayer width={debugSize} height={debugSize}> <View style={{ flexDirection: "row", flexWrap: "wrap" }}>
<Image key={0} source={{ uri: "https://i.imgur.com/S22HNaU.png" }} width={debugSize} height={debugSize} /> <NativeLayer width={debugSize} height={debugSize}>
<Surface width={debugSize} height={debugSize} backgroundColor="transparent"> <Image
<Copy last> key={0}
<Copy> 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"
setZOrderOnTop
>
<Copy last>
<Copy> <Copy>
<Copy> <Copy>
https://i.imgur.com/mp79p5T.png <Copy>https://i.imgur.com/mp79p5T.png</Copy>
</Copy> </Copy>
</Copy> </Copy>
</Copy> </Copy>
</Copy> </Surface>
</Surface> </NativeLayer>
</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"
setZOrderOnTop
>
<Layer>
https://i.imgur.com/mp79p5T.png
<TransparentNonPremultiplied>
<HelloGL />
</TransparentNonPremultiplied>
</Layer>
</Surface>
</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"
setZOrderOnTop
>
<Layer>
https://i.imgur.com/mp79p5T.png
<TransparentNonPremultiplied>
<Copy>
<TransparentNonPremultiplied>
<Copy>https://i.imgur.com/S22HNaU.png</Copy>
</TransparentNonPremultiplied>
</Copy>
</TransparentNonPremultiplied>
</Layer>
</Surface>
</NativeLayer>
<NativeLayer width={debugSize} height={debugSize}> <Surface width={debugSize} height={debugSize}>
<Image source={{ uri: "https://i.imgur.com/S22HNaU.png" }} width={debugSize} height={debugSize} /> <HelloGL width={2} height={2} pixelRatio={1} />
<Surface width={debugSize} height={debugSize} backgroundColor="transparent">
<Layer>
https://i.imgur.com/mp79p5T.png
<TransparentNonPremultiplied>
<HelloGL />
</TransparentNonPremultiplied>
</Layer>
</Surface> </Surface>
</NativeLayer>
<NativeLayer width={debugSize} height={debugSize}> <Surface
<Image source={{ uri: "https://i.imgur.com/S22HNaU.png" }} width={debugSize} height={debugSize} /> style={{ borderRadius: 50 }}
<Surface width={debugSize} height={debugSize} backgroundColor="transparent"> width={debugSize}
<Layer> height={debugSize}
https://i.imgur.com/mp79p5T.png >
<TransparentNonPremultiplied> <HelloGL />
<Copy>
<TransparentNonPremultiplied>
<Copy>
https://i.imgur.com/S22HNaU.png
</Copy>
</TransparentNonPremultiplied>
</Copy>
</TransparentNonPremultiplied>
</Layer>
</Surface> </Surface>
</NativeLayer>
<Surface width={debugSize} height={debugSize}>
<HelloGL width={2} height={2} pixelRatio={1} />
</Surface>
<Surface style={{ borderRadius: 50 }} width={debugSize} height={debugSize}> <Surface style={{ margin: 4 }} width={300} height={300}>
<HelloGL /> <Blur passes={6} factor={2}>
</Surface> https://i.imgur.com/rkiglmm.jpg
</Blur>
<Surface style={{ margin: 4 }} width={300} height={300}> </Surface>
<Blur passes={6} factor={2}> </View>
https://i.imgur.com/rkiglmm.jpg </ScrollView>
</Blur> );
</Surface>
</View>
</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