archive-gh-me/gl-react
1
0
Fork 0
mirror of https://github.com/gre/gl-react.git synced 2026-01-18 16:16:59 +00:00
Code Issues Projects Releases Wiki Activity

add an example using Three.js

Browse Source
This commit is contained in:
Gaëtan Renaudeau 2017-03-14 12:14:42 +01:00
parent 1e05b27d04
commit 18af63aac8
22 changed files with 284 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -60,7 +60,7 @@ import the correct implementation,
```js
import {Surface} from "gl-react-dom"; // for React DOM
import {Surface} from "gl-react-exponrnt"; // for React Native via Exponent GLView
import {Surface} from "gl-react-exponent"; // for React Native via Exponent GLView
import {Surface} from "gl-react-native"; // for React Native
import {Surface} from "gl-react-headless"; // for Node.js!
```

1
cookbook-rn/TODO
View File

@ -7,3 +7,4 @@
- add back the image orientations test
- test if opacity "works"
- try to put one surface in the corner of another to see if z-index and also if there is no rendering weirdness.
- implement a new example using EXGLView/Image and implementing https://threejs.org/examples/?q=pano#canvas_geometry_panorama_fisheye

6
cookbook-rn/ios/cookbookrn.xcodeproj/xcshareddata/xcschemes/cookbookrn.xcscheme
View File

@ -80,9 +80,9 @@
</AdditionalOptions>
</TestAction>
<LaunchAction
buildConfiguration = "Release"
selectedDebuggerIdentifier = ""
selectedLauncherIdentifier = "Xcode.IDEFoundation.Launcher.PosixSpawn"
buildConfiguration = "Debug"
selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
launchStyle = "0"
useCustomWorkingDirectory = "NO"
ignoresPersistentStateOnLaunch = "NO"

3
cookbook-rn/package.json
View File

@ -18,7 +18,8 @@
"react": "~15.4.0",
"react-motion": "^0.4.7",
"react-native": "0.41.2",
"seedrandom": "github:gre/seedrandom#released"
"seedrandom": "github:gre/seedrandom#released",
"three": "^0.84.0"
},
"devDependencies": {
"babel-preset-react-native": "1.9.1"

3
cookbook-rn/src/examples/index.js
View File

@ -100,3 +100,6 @@ export const demodesertcrt={ Example: demodesertcrt_E, ...demodesertcrt_m };
import ibex_E from './ibex';
import * as ibex_m from './ibex/meta';
export const ibex={ Example: ibex_E, ...ibex_m };
import threepanorama_E from './threepanorama';
import * as threepanorama_m from './threepanorama/meta';
export const threepanorama={ Example: threepanorama_E, ...threepanorama_m };

1
cookbook-rn/src/examples/index.txt
View File

@ -32,3 +32,4 @@ demotunnel
demodesert
demodesertcrt
ibex
threepanorama

116
cookbook-rn/src/examples/threepanorama/demo.js Normal file
View File

@ -0,0 +1,116 @@
//@flow
import Image from "gl-react-native/lib/Image";
const THREE = require("three");
global.THREE = THREE;
require("three/examples/js/renderers/Projector");
// inspired from https://github.com/mrdoob/three.js/blob/master/examples/canvas_geometry_panorama_fisheye.html
export default (gl: WebGLRenderingContext, initialProps: *) => {
const {
drawingBufferWidth: width,
drawingBufferHeight: height
} = gl;
const renderer = new THREE.WebGLRenderer({
canvas: {
width,
height,
style: {},
addEventListener: () => {},
removeEventListener: () => {},
clientHeight: height,
},
context: gl,
});
renderer.setSize(width, height);
renderer.setClearColor(0x000000, 1);
var camera, scene, requestId;
var isUserInteracting = false,
downAtPosition,
downAtLon,
downAtLat,
lon = 90,
lat = 0,
phi = 0,
theta = 0,
target = new THREE.Vector3();
init();
animate();
function init() {
var mesh;
camera = new THREE.PerspectiveCamera( 75, width / height, 1, 1100 );
camera.fov = initialProps.fov;
scene = new THREE.Scene();
var materials = [
loadTexture(require("./skybox/px.jpg")), // right
loadTexture(require("./skybox/nx.jpg")), // left
loadTexture(require("./skybox/py.jpg")), // top
loadTexture(require("./skybox/ny.jpg")), // bottom
loadTexture(require("./skybox/pz.jpg")), // back
loadTexture(require("./skybox/nz.jpg")) // front
];
mesh = new THREE.Mesh( new THREE.BoxGeometry( 300, 300, 300, 7, 7, 7 ), new THREE.MultiMaterial( materials ) );
mesh.scale.x = - 1;
scene.add( mesh );
for ( var i = 0, l = mesh.geometry.vertices.length; i < l; i ++ ) {
var vertex = mesh.geometry.vertices[ i ];
vertex.normalize();
vertex.multiplyScalar( 550 );
}
}
function loadTexture (src) {
var texture = new THREE.Texture();
var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: 0.5 } );
var image = new Image();
image.onload = function () {
texture.image = this;
texture.needsUpdate = true;
};
image.src = src;
return material;
}
function animate() {
requestId = requestAnimationFrame(animate);
update();
}
function update() {
if ( isUserInteracting === false ) {
lon += 0.1;
}
lat = Math.max( - 85, Math.min( 85, lat ) );
phi = THREE.Math.degToRad( 90 - lat );
theta = THREE.Math.degToRad( lon );
target.x = 500 * Math.sin( phi ) * Math.cos( theta );
target.y = 500 * Math.cos( phi );
target.z = 500 * Math.sin( phi ) * Math.sin( theta );
camera.position.copy( target ).negate();
camera.lookAt( target );
renderer.render( scene, camera );
gl.flush();
gl.endFrameEXP();
}
return {
onPropsChange ({ fov, touching, touchPosition }: *) {
console.log(fov, "<>", camera.fov);
if (fov !== camera.fov) {
camera.fov = fov;
camera.updateProjectionMatrix();
}
if (touching && !isUserInteracting) {
downAtPosition = touchPosition;
downAtLon = lon;
downAtLat = lat;
}
isUserInteracting = touching;
if (touching) {
lon = ( downAtPosition.x - touchPosition.x ) * 100 + downAtLon;
lat = ( touchPosition.y - downAtPosition.y ) * 100 + downAtLat;
}
},
dispose () {
cancelAnimationFrame(requestId);
},
};
};

42
cookbook-rn/src/examples/threepanorama/index.js Normal file
View File

@ -0,0 +1,42 @@
//@flow
import React, { Component } from "react";
import EXGLView from "gl-react-native/lib/EXGLView";
import demo from "./demo";
import respondToTouchPosition from "../../HOC/respondToTouchPosition";
const Demo = respondToTouchPosition(class Demo extends Component {
props: { width: number };
demoHooks: *;
onContextCreate = (gl: WebGLRenderingContext) => {
this.demoHooks = demo(gl, this.props);
};
componentWillReceiveProps (nextProps: *) {
const {demoHooks} = this;
if (demoHooks) demoHooks.onPropsChange(nextProps);
}
componentWillUnmount() {
const {demoHooks} = this;
if (demoHooks) demoHooks.dispose();
}
render() {
const { width } = this.props;
return (
<EXGLView
style={{ width, height: width }}
onContextCreate={this.onContextCreate}
/>
);
}
});
export default class Example extends Component {
render() {
return <Demo {...this.props} />;
}
static defaultProps = { fov: 50 };
static propTypes = {
width: React.PropTypes.number.isRequired,
height: React.PropTypes.number.isRequired,
fov: React.PropTypes.number.isRequired,
};
}

9
cookbook-rn/src/examples/threepanorama/meta.js Normal file
View File

@ -0,0 +1,9 @@
import makeFloatSlider from "../../toolbox/makeFloatSlider";
export const title = "Three.js Panorama demo";
export const toolbox = [
{ prop: "fov",
title: "Field of View",
Editor: makeFloatSlider(20, 100, 0.1) },
];

BIN
cookbook-rn/src/examples/threepanorama/skybox/nx.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 54 KiB

BIN
cookbook-rn/src/examples/threepanorama/skybox/ny.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 51 KiB

BIN
cookbook-rn/src/examples/threepanorama/skybox/nz.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 53 KiB

BIN
cookbook-rn/src/examples/threepanorama/skybox/px.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 59 KiB

BIN
cookbook-rn/src/examples/threepanorama/skybox/py.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
cookbook-rn/src/examples/threepanorama/skybox/pz.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 58 KiB

120
cookbook/API.json
View File

@ -859,7 +859,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/createSurface.js",
"path": "packages/gl-react/src/createSurface.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/src/createSurface.js#L152-L556"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/src/createSurface.js#L152-L556"
},
"kind": "class",
"name": "Surface",
@ -2207,7 +2207,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/createSurface.js",
"path": "packages/gl-react/src/createSurface.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/src/createSurface.js#L274-L277"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/src/createSurface.js#L274-L277"
},
"params": [
{
@ -2517,7 +2517,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/createSurface.js",
"path": "packages/gl-react/src/createSurface.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/src/createSurface.js#L286-L289"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/src/createSurface.js#L286-L289"
},
"params": [
{
@ -2847,7 +2847,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/createSurface.js",
"path": "packages/gl-react/src/createSurface.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/src/createSurface.js#L296-L299"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/src/createSurface.js#L296-L299"
},
"memberof": "Surface",
"scope": "instance",
@ -3011,7 +3011,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/createSurface.js",
"path": "packages/gl-react/src/createSurface.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/src/createSurface.js#L307-L309"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/src/createSurface.js#L307-L309"
},
"memberof": "Surface",
"scope": "instance",
@ -3129,7 +3129,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/createSurface.js",
"path": "packages/gl-react/src/createSurface.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/src/createSurface.js#L317-L319"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/src/createSurface.js#L317-L319"
},
"memberof": "Surface",
"scope": "instance",
@ -3430,7 +3430,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Node.js",
"path": "packages/gl-react/src/Node.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/src/Node.js#L353-L1010"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/src/Node.js#L353-L1010"
},
"properties": [
{
@ -4210,7 +4210,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Node.js",
"path": "packages/gl-react/src/Node.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/src/Node.js#L513-L531"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/src/Node.js#L513-L531"
},
"name": "capture",
"kind": "function",
@ -4364,7 +4364,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Node.js",
"path": "packages/gl-react/src/Node.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/src/Node.js#L538-L543"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/src/Node.js#L538-L543"
},
"kind": "function",
"name": "redraw",
@ -4472,7 +4472,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Node.js",
"path": "packages/gl-react/src/Node.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/src/Node.js#L550-L552"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/src/Node.js#L550-L552"
},
"kind": "function",
"name": "flush",
@ -4592,7 +4592,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Shaders.js",
"path": "packages/gl-react/src/Shaders.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/src/Shaders.js#L108-L149"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/src/Shaders.js#L108-L149"
},
"kind": "namespace",
"name": "Shaders",
@ -4655,7 +4655,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Shaders.js",
"path": "packages/gl-react/src/Shaders.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/src/Shaders.js#L122-L138"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/src/Shaders.js#L122-L138"
},
"memberof": "Shaders",
"params": [
@ -4903,7 +4903,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/LinearCopy.js",
"path": "packages/gl-react/src/LinearCopy.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/src/LinearCopy.js#L14-L24"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/src/LinearCopy.js#L14-L24"
},
"properties": [
{
@ -5076,7 +5076,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/NearestCopy.js",
"path": "packages/gl-react/src/NearestCopy.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/src/NearestCopy.js#L14-L25"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/src/NearestCopy.js#L14-L25"
},
"properties": [
{
@ -5592,7 +5592,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Bus.js",
"path": "packages/gl-react/src/Bus.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/src/Bus.js#L44-L201"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/src/Bus.js#L44-L201"
},
"properties": [
{
@ -5965,7 +5965,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Bus.js",
"path": "packages/gl-react/src/Bus.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/src/Bus.js#L154-L157"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/src/Bus.js#L154-L157"
},
"name": "capture",
"kind": "function",
@ -6119,7 +6119,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Bus.js",
"path": "packages/gl-react/src/Bus.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/src/Bus.js#L169-L171"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/src/Bus.js#L169-L171"
},
"kind": "function",
"name": "redraw",
@ -6343,7 +6343,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/connectSize.js",
"path": "packages/gl-react/src/connectSize.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/src/connectSize.js#L18-L60"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/src/connectSize.js#L18-L60"
},
"kind": "function",
"name": "connectSize",
@ -6719,7 +6719,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/GLSL.js",
"path": "packages/gl-react/src/GLSL.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/src/GLSL.js#L26-L32"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/src/GLSL.js#L26-L32"
},
"returns": [
{
@ -7056,7 +7056,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/GLSL.js",
"path": "packages/gl-react/src/GLSL.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/src/GLSL.js#L7-L7"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/src/GLSL.js#L7-L7"
},
"name": "GLSLCode",
"kind": "typedef",
@ -7212,7 +7212,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Shaders.js",
"path": "packages/gl-react/src/Shaders.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/src/Shaders.js#L44-L46"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/src/Shaders.js#L44-L46"
},
"examples": [
{
@ -7355,7 +7355,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Shaders.js",
"path": "packages/gl-react/src/Shaders.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/src/Shaders.js#L15-L17"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/src/Shaders.js#L15-L17"
},
"examples": [
{
@ -7547,7 +7547,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Shaders.js",
"path": "packages/gl-react/src/Shaders.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/src/Shaders.js#L51-L53"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/src/Shaders.js#L51-L53"
},
"name": "ShadersSheet",
"kind": "typedef",
@ -7594,7 +7594,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Shaders.js",
"path": "packages/gl-react/src/Shaders.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/src/Shaders.js#L24-L27"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/src/Shaders.js#L24-L27"
},
"name": "ShaderIdentifier",
"kind": "typedef",
@ -8473,7 +8473,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Node.js",
"path": "packages/gl-react/src/Node.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/src/Node.js#L159-L161"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/src/Node.js#L159-L161"
},
"name": "Uniforms",
"kind": "typedef",
@ -8758,7 +8758,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Node.js",
"path": "packages/gl-react/src/Node.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/src/Node.js#L66-L69"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/src/Node.js#L66-L69"
},
"name": "TextureOptions",
"kind": "typedef",
@ -9097,7 +9097,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Node.js",
"path": "packages/gl-react/src/Node.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/src/Node.js#L46-L46"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/src/Node.js#L46-L46"
},
"name": "Interpolation",
"kind": "typedef",
@ -9428,7 +9428,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Node.js",
"path": "packages/gl-react/src/Node.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/src/Node.js#L56-L59"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/src/Node.js#L56-L59"
},
"name": "WrapMode",
"kind": "typedef",
@ -9488,7 +9488,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Node.js",
"path": "packages/gl-react/src/Node.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/src/Node.js#L96-L99"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/src/Node.js#L96-L99"
},
"name": "BlendFuncSrcDst",
"kind": "typedef",
@ -10519,7 +10519,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Node.js",
"path": "packages/gl-react/src/Node.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/src/Node.js#L91-L91"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/src/Node.js#L91-L91"
},
"name": "BlendFunc",
"kind": "typedef",
@ -10623,7 +10623,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Node.js",
"path": "packages/gl-react/src/Node.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/src/Node.js#L114-L116"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/src/Node.js#L114-L116"
},
"name": "Clear",
"kind": "typedef",
@ -10796,7 +10796,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Node.js",
"path": "packages/gl-react/src/Node.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/src/Node.js#L104-L109"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/src/Node.js#L104-L109"
},
"name": "Vec4",
"kind": "typedef",
@ -10952,7 +10952,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/flow/ndarray.js",
"path": "packages/gl-react/flow/ndarray.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/flow/ndarray.js#L7-L13"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/flow/ndarray.js#L7-L13"
},
"name": "NDArray",
"kind": "typedef",
@ -11226,7 +11226,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/TextureLoader.js",
"path": "packages/gl-react/src/TextureLoader.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/src/TextureLoader.js#L9-L50"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/src/TextureLoader.js#L9-L50"
},
"name": "TextureLoader",
"kind": "class",
@ -11269,7 +11269,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/TextureLoader.js",
"path": "packages/gl-react/src/TextureLoader.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/src/TextureLoader.js#L14-L14"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/src/TextureLoader.js#L14-L14"
},
"properties": [
{
@ -11385,7 +11385,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/TextureLoader.js",
"path": "packages/gl-react/src/TextureLoader.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/src/TextureLoader.js#L19-L21"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/src/TextureLoader.js#L19-L21"
},
"name": "constructor",
"kind": "function",
@ -11497,7 +11497,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/TextureLoader.js",
"path": "packages/gl-react/src/TextureLoader.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/src/TextureLoader.js#L26-L26"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/src/TextureLoader.js#L26-L26"
},
"name": "dispose",
"kind": "member",
@ -11605,7 +11605,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/TextureLoader.js",
"path": "packages/gl-react/src/TextureLoader.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/src/TextureLoader.js#L31-L31"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/src/TextureLoader.js#L31-L31"
},
"name": "canLoad",
"kind": "member",
@ -11722,7 +11722,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/TextureLoader.js",
"path": "packages/gl-react/src/TextureLoader.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/src/TextureLoader.js#L36-L36"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/src/TextureLoader.js#L36-L36"
},
"name": "get",
"kind": "member",
@ -11849,7 +11849,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/TextureLoader.js",
"path": "packages/gl-react/src/TextureLoader.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/src/TextureLoader.js#L43-L49"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/src/TextureLoader.js#L43-L49"
},
"name": "load",
"kind": "function",
@ -11997,7 +11997,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Visitors.js",
"path": "packages/gl-react/src/Visitors.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/src/Visitors.js#L10-L28"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/src/Visitors.js#L10-L28"
},
"kind": "namespace",
"name": "Visitors",
@ -12036,7 +12036,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Visitors.js",
"path": "packages/gl-react/src/Visitors.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/src/Visitors.js#L14-L16"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/src/Visitors.js#L14-L16"
},
"memberof": "Visitors",
"name": "add",
@ -12101,7 +12101,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Visitors.js",
"path": "packages/gl-react/src/Visitors.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/src/Visitors.js#L20-L23"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/src/Visitors.js#L20-L23"
},
"memberof": "Visitors",
"name": "remove",
@ -12267,7 +12267,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/TextureLoaders.js",
"path": "packages/gl-react/src/TextureLoaders.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/src/TextureLoaders.js#L14-L33"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/src/TextureLoaders.js#L14-L33"
},
"kind": "namespace",
"name": "TextureLoaders",
@ -12357,7 +12357,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/TextureLoaders.js",
"path": "packages/gl-react/src/TextureLoaders.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/src/TextureLoaders.js#L19-L21"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/src/TextureLoaders.js#L19-L21"
},
"memberof": "TextureLoaders",
"name": "add",
@ -12490,7 +12490,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/TextureLoaders.js",
"path": "packages/gl-react/src/TextureLoaders.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/src/TextureLoaders.js#L26-L29"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/src/TextureLoaders.js#L26-L29"
},
"memberof": "TextureLoaders",
"name": "remove",
@ -12577,7 +12577,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/VisitorLogger.js",
"path": "packages/gl-react/src/VisitorLogger.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/src/VisitorLogger.js#L20-L101"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/src/VisitorLogger.js#L20-L101"
},
"name": "VisitorLogger",
"augments": [
@ -12626,7 +12626,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Visitor.js",
"path": "packages/gl-react/src/Visitor.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/src/Visitor.js#L24-L65"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/src/Visitor.js#L24-L65"
},
"name": "Visitor",
"kind": "class",
@ -12658,7 +12658,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Visitor.js",
"path": "packages/gl-react/src/Visitor.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/src/Visitor.js#L28-L28"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/src/Visitor.js#L28-L28"
},
"name": "onSurfaceMount",
"kind": "function",
@ -12719,7 +12719,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Visitor.js",
"path": "packages/gl-react/src/Visitor.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/src/Visitor.js#L32-L32"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/src/Visitor.js#L32-L32"
},
"name": "onSurfaceUnmount",
"kind": "function",
@ -12780,7 +12780,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Visitor.js",
"path": "packages/gl-react/src/Visitor.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/src/Visitor.js#L36-L36"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/src/Visitor.js#L36-L36"
},
"name": "onSurfaceGLContextChange",
"kind": "function",
@ -12853,7 +12853,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Visitor.js",
"path": "packages/gl-react/src/Visitor.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/src/Visitor.js#L39-L39"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/src/Visitor.js#L39-L39"
},
"name": "onSurfaceDrawSkipped",
"kind": "function",
@ -12914,7 +12914,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Visitor.js",
"path": "packages/gl-react/src/Visitor.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/src/Visitor.js#L42-L42"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/src/Visitor.js#L42-L42"
},
"name": "onSurfaceDrawStart",
"kind": "function",
@ -13026,7 +13026,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Visitor.js",
"path": "packages/gl-react/src/Visitor.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/src/Visitor.js#L46-L46"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/src/Visitor.js#L46-L46"
},
"name": "onSurfaceDrawError",
"kind": "function",
@ -13087,7 +13087,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Visitor.js",
"path": "packages/gl-react/src/Visitor.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/src/Visitor.js#L49-L49"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/src/Visitor.js#L49-L49"
},
"name": "onSurfaceDrawEnd",
"kind": "function",
@ -13148,7 +13148,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Visitor.js",
"path": "packages/gl-react/src/Visitor.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/src/Visitor.js#L52-L52"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/src/Visitor.js#L52-L52"
},
"name": "onNodeDrawSkipped",
"kind": "function",
@ -13209,7 +13209,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Visitor.js",
"path": "packages/gl-react/src/Visitor.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/src/Visitor.js#L55-L55"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/src/Visitor.js#L55-L55"
},
"name": "onNodeDrawStart",
"kind": "function",
@ -13270,7 +13270,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Visitor.js",
"path": "packages/gl-react/src/Visitor.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/src/Visitor.js#L58-L58"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/src/Visitor.js#L58-L58"
},
"name": "onNodeSyncDeps",
"kind": "function",
@ -13385,7 +13385,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Visitor.js",
"path": "packages/gl-react/src/Visitor.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/src/Visitor.js#L61-L61"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/src/Visitor.js#L61-L61"
},
"name": "onNodeDraw",
"kind": "function",
@ -13461,7 +13461,7 @@
},
"file": "/Users/gre/dev/gl-react-next/packages/gl-react/src/Visitor.js",
"path": "packages/gl-react/src/Visitor.js",
"github": "https://github.com/gre/gl-react/blob/addf8d134039621ec6f3c120929c2ad6788c5383/packages/gl-react/src/Visitor.js#L64-L64"
"github": "https://github.com/gre/gl-react/blob/1e05b27d0420468515427d4136bb4f24b8e392f2/packages/gl-react/src/Visitor.js#L64-L64"
},
"name": "onNodeDrawEnd",
"kind": "function",

6
packages/gl-react-native/README.md
View File

@ -4,10 +4,14 @@
`gl-react-native` is the [React Native](https://facebook.github.io/react-native/) standalone implementation of [gl-react](https://github.com/gre/gl-react), library to write and compose WebGL shaders. If you are using Exponent, it is recommended to use `gl-react-exponent` instead.
This implementation is a standalone fork of Exponent GLView (MIT License) available on
> This implementation is a standalone fork of Exponent GLView (MIT License) available on
https://github.com/exponent/exponent and https://github.com/exponent/exponent-sdk.
Huge kudos to Exponent team and especially [@nikki93](https://github.com/nikki93) for implementing it.
## Vanilla WebGL
You can also use this library as way to do vanilla WebGL in React Native. For that, the library will expose `EXGLView` and `Image` (polyfill of browser's `Image`). You can also directly import them from `gl-react-native/lib/Image` and `gl-react-native/lib/EXGLView` (in such case, you probably won't need dependency to `gl-react`).
## Links
- [Github](https://github.com/gre/gl-react)

1
packages/gl-react-native/TODO
View File

@ -8,6 +8,7 @@
- `demodesertcrt` example breaks too.
- Android: `paint` example does not work as expected. when you tap, the whole surface get colored! some issue with `discard;` ?! Same happen to the `pixeleditor`, everything gets paint, like if `discard` was not working?
- Android: `animated` renders black on first touch. (touch event issue in that example?)
- expose a requestGLFrame that will allows the webgl impl to "slow down" the renderer if it can't follow.
# Medium Priority

7
packages/gl-react-native/src/EXGLView.js
View File

@ -3,7 +3,6 @@
import React, { PropTypes } from "react";
import { View, Platform, requireNativeComponent } from "react-native";
// A component that acts as an OpenGL render target.
export default class EXGLView extends React.Component {
@ -127,7 +126,11 @@ const wrapMethods = (gl) => {
[gl.TEXTURE_BINDING_CUBE_MAP]: WebGLTexture,
};
wrap("getParameter", (orig) => (pname) => {
const ret = orig.call(gl, pname);
let ret = orig.call(gl, pname);
if (pname === gl.VERSION) {
// Wrap native version name
ret = `WebGL 1.0 (gl-react-native,${Platform.OS}) (${ret})`;
}
const type = getParameterTypes[pname];
return type ? wrapObject(type, ret) : ret;
});

7
packages/gl-react-native/src/GLImages.js
View File

@ -18,6 +18,8 @@ function imageSourceHash (imageSource: ImageSource): ImageSourceHash {
return uri;
}
// TODO: should unload in a smart LRU way
const load = (source: ImageSource): Promise<number> => {
const hash = imageSourceHash(source);
let promise = cache.get(hash);
@ -36,11 +38,6 @@ const load = (source: ImageSource): Promise<number> => {
return promise;
};
const unload = (id: number): void => {
console.warn("GLImages.unload("+id+") not implemented");
};
export default {
load,
unload,
};

29
packages/gl-react-native/src/Image.js Normal file
View File

@ -0,0 +1,29 @@
//@flow
import GLImages from "./GLImages";
// This is a window.Image polyfill implementation that works with WebGL implementation. (can be provided to gl.texImage2D 6-args version)
export default function GLImage () {
if (!(this instanceof GLImage)) throw new Error("Failed to construct 'Image': Please use the 'new' operator.");
this.onload = null;
this._src = null;
this.glAssetId = null;
}
GLImage.prototype = {
//$FlowFixMe
get src() {
return this._src;
},
//$FlowFixMe
set src(src) {
if (this._src === src) return;
this.glAssetId = null;
this._src = src;
if (src) {
GLImages.load(src).then(glAssetId => {
this.glAssetId = glAssetId;
if (this.onload) this.onload();
});
}
}
};

4
packages/gl-react-native/src/index.js
View File

@ -1,12 +1,16 @@
//@flow
import {View} from "react-native";
import {createSurface, TextureLoaders} from "gl-react";
import EXGLView from "./EXGLView";
import GLView from "./GLViewNative";
import Image from "./Image";
import ImageSourceTextureLoader from "./ImageSourceTextureLoader";
TextureLoaders.add(ImageSourceTextureLoader);
const RenderLessElement = View;
export { EXGLView, Image };
export const Surface = createSurface({
GLView,
RenderLessElement,