Skip to content

Instantly share code, notes, and snippets.

@athaeryn
Forked from bberak/Bunny.js
Created October 30, 2018 04:30
Show Gist options
  • Save athaeryn/0c81ed0cb7f7af29925f555488b09dfb to your computer and use it in GitHub Desktop.
Save athaeryn/0c81ed0cb7f7af29925f555488b09dfb to your computer and use it in GitHub Desktop.
How to use regl in React or React Native
import React, { PureComponent } from "react";
import { StyleSheet } from "react-native";
import ReglView from "./ReglView";
import mat4 from "gl-mat4";
import bunny from "bunny";
export default class Bunny extends PureComponent {
drawCommand = regl => {
return regl({
vert: `
precision mediump float;
attribute vec3 position;
uniform mat4 model, view, projection;
void main() {
gl_Position = projection * view * model * vec4(position, 1);
}`,
frag: `
precision mediump float;
void main() {
gl_FragColor = vec4(1, 1, 1, 1);
}`,
// this converts the vertices of the mesh into the position attribute
attributes: {
position: bunny.positions
},
// and this converts the faces of the mesh into elements
elements: bunny.cells,
uniforms: {
model: mat4.identity([]),
view: (_, { angle }) => {
return mat4.lookAt(
[],
[30 * Math.cos(angle), 2.5, 30 * Math.sin(angle)],
[0, 2.5, 0],
[0, 1, 0]
);
},
projection: ({ viewportWidth, viewportHeight }) =>
mat4.perspective(
[],
Math.PI / 4,
viewportWidth / viewportHeight,
0.01,
1000
)
}
});
};
clearCommand = regl => {
return props => {
regl.clear({
depth: 1,
color: [0, 0, 0, 1]
});
};
};
render() {
return (
<ReglView
style={StyleSheet.absoluteFill}
drawCommand={this.drawCommand}
clearCommand={this.clearCommand}
{...this.props}
/>
);
}
}
import React, { PureComponent } from "react";
import { WebGLView } from "react-native-webgl";
import REGL from "regl";
export default class ReglView extends PureComponent {
constructor() {
super();
this.state = {};
}
onContextCreate = gl => {
const regl = REGL(gl);
const rngl = gl.getExtension("RN");
const clear = this.props.clearCommand(regl, rngl);
const draw = this.props.drawCommand(regl, rngl);
this.setState({
frame: props => {
clear(props);
draw(props);
rngl.endFrame();
}
});
};
render() {
if (this.state.frame) this.state.frame(this.props);
return (
<WebGLView
style={this.props.style}
onContextCreate={this.onContextCreate}
/>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment