diff --git a/README.md b/README.md index 773cf28..b57b5a9 100755 --- a/README.md +++ b/README.md @@ -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! ``` diff --git a/cookbook-rn/TODO b/cookbook-rn/TODO index 50ff626..ba670d6 100644 --- a/cookbook-rn/TODO +++ b/cookbook-rn/TODO @@ -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 diff --git a/cookbook-rn/ios/cookbookrn.xcodeproj/xcshareddata/xcschemes/cookbookrn.xcscheme b/cookbook-rn/ios/cookbookrn.xcodeproj/xcshareddata/xcschemes/cookbookrn.xcscheme index 750a958..dbe7a31 100644 --- a/cookbook-rn/ios/cookbookrn.xcodeproj/xcshareddata/xcschemes/cookbookrn.xcscheme +++ b/cookbook-rn/ios/cookbookrn.xcodeproj/xcshareddata/xcschemes/cookbookrn.xcscheme @@ -80,9 +80,9 @@ { + 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); + }, + }; +}; diff --git a/cookbook-rn/src/examples/threepanorama/index.js b/cookbook-rn/src/examples/threepanorama/index.js new file mode 100644 index 0000000..584f866 --- /dev/null +++ b/cookbook-rn/src/examples/threepanorama/index.js @@ -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 ( + + ); + } +}); + +export default class Example extends Component { + render() { + return ; + } + static defaultProps = { fov: 50 }; + static propTypes = { + width: React.PropTypes.number.isRequired, + height: React.PropTypes.number.isRequired, + fov: React.PropTypes.number.isRequired, + }; +} diff --git a/cookbook-rn/src/examples/threepanorama/meta.js b/cookbook-rn/src/examples/threepanorama/meta.js new file mode 100644 index 0000000..f40f120 --- /dev/null +++ b/cookbook-rn/src/examples/threepanorama/meta.js @@ -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) }, +]; diff --git a/cookbook-rn/src/examples/threepanorama/skybox/nx.jpg b/cookbook-rn/src/examples/threepanorama/skybox/nx.jpg new file mode 100755 index 0000000..1cae307 Binary files /dev/null and b/cookbook-rn/src/examples/threepanorama/skybox/nx.jpg differ diff --git a/cookbook-rn/src/examples/threepanorama/skybox/ny.jpg b/cookbook-rn/src/examples/threepanorama/skybox/ny.jpg new file mode 100755 index 0000000..fa7a975 Binary files /dev/null and b/cookbook-rn/src/examples/threepanorama/skybox/ny.jpg differ diff --git a/cookbook-rn/src/examples/threepanorama/skybox/nz.jpg b/cookbook-rn/src/examples/threepanorama/skybox/nz.jpg new file mode 100755 index 0000000..1e9c54e Binary files /dev/null and b/cookbook-rn/src/examples/threepanorama/skybox/nz.jpg differ diff --git a/cookbook-rn/src/examples/threepanorama/skybox/px.jpg b/cookbook-rn/src/examples/threepanorama/skybox/px.jpg new file mode 100755 index 0000000..0ad2eea Binary files /dev/null and b/cookbook-rn/src/examples/threepanorama/skybox/px.jpg differ diff --git a/cookbook-rn/src/examples/threepanorama/skybox/py.jpg b/cookbook-rn/src/examples/threepanorama/skybox/py.jpg new file mode 100755 index 0000000..de7e5cc Binary files /dev/null and b/cookbook-rn/src/examples/threepanorama/skybox/py.jpg differ diff --git a/cookbook-rn/src/examples/threepanorama/skybox/pz.jpg b/cookbook-rn/src/examples/threepanorama/skybox/pz.jpg new file mode 100755 index 0000000..836cdb4 Binary files /dev/null and b/cookbook-rn/src/examples/threepanorama/skybox/pz.jpg differ diff --git a/cookbook/API.json b/cookbook/API.json index 02223b3..4a3171e 100755 --- a/cookbook/API.json +++ b/cookbook/API.json @@ -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", diff --git a/packages/gl-react-native/README.md b/packages/gl-react-native/README.md index 877d10a..37a9f55 100755 --- a/packages/gl-react-native/README.md +++ b/packages/gl-react-native/README.md @@ -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) diff --git a/packages/gl-react-native/TODO b/packages/gl-react-native/TODO index af179e6..899a2b0 100644 --- a/packages/gl-react-native/TODO +++ b/packages/gl-react-native/TODO @@ -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 diff --git a/packages/gl-react-native/src/EXGLView.js b/packages/gl-react-native/src/EXGLView.js index 5218521..3ab63cc 100644 --- a/packages/gl-react-native/src/EXGLView.js +++ b/packages/gl-react-native/src/EXGLView.js @@ -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; }); diff --git a/packages/gl-react-native/src/GLImages.js b/packages/gl-react-native/src/GLImages.js index ad6e78c..176f1dd 100644 --- a/packages/gl-react-native/src/GLImages.js +++ b/packages/gl-react-native/src/GLImages.js @@ -18,6 +18,8 @@ function imageSourceHash (imageSource: ImageSource): ImageSourceHash { return uri; } +// TODO: should unload in a smart LRU way + const load = (source: ImageSource): Promise => { const hash = imageSourceHash(source); let promise = cache.get(hash); @@ -36,11 +38,6 @@ const load = (source: ImageSource): Promise => { return promise; }; -const unload = (id: number): void => { - console.warn("GLImages.unload("+id+") not implemented"); -}; - export default { load, - unload, }; diff --git a/packages/gl-react-native/src/Image.js b/packages/gl-react-native/src/Image.js new file mode 100644 index 0000000..2ebab28 --- /dev/null +++ b/packages/gl-react-native/src/Image.js @@ -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(); + }); + } + } +}; diff --git a/packages/gl-react-native/src/index.js b/packages/gl-react-native/src/index.js index 3ad403f..e4a94ef 100755 --- a/packages/gl-react-native/src/index.js +++ b/packages/gl-react-native/src/index.js @@ -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,