diff --git a/Examples/AdvancedEffects/src/Intro.js b/Examples/AdvancedEffects/src/Intro.js index d771637..d31af45 100644 --- a/Examples/AdvancedEffects/src/Intro.js +++ b/Examples/AdvancedEffects/src/Intro.js @@ -27,7 +27,7 @@ void main() { texture2D(texture, lookup(vec2(0.0))).b); gl_FragColor = vec4( col, - col.x + col.y + col.z); + pow((col.x + col.y + col.z) / 3.0, 0.05)); } ` } diff --git a/Examples/Video/HueRotate.js b/Examples/Video/HueRotate.js new file mode 100644 index 0000000..627d607 --- /dev/null +++ b/Examples/Video/HueRotate.js @@ -0,0 +1,40 @@ +const React = require("react"); +const GL = require("gl-react"); + +const shaders = GL.Shaders.create({ + hueRotate: { + frag: ` +precision highp float; +varying vec2 uv; +uniform sampler2D tex; +uniform float hue; + +const mat3 rgb2yiq = mat3(0.299, 0.587, 0.114, 0.595716, -0.274453, -0.321263, 0.211456, -0.522591, 0.311135); +const mat3 yiq2rgb = mat3(1.0, 0.9563, 0.6210, 1.0, -0.2721, -0.6474, 1.0, -1.1070, 1.7046); + +void main() { + vec3 yColor = rgb2yiq * texture2D(tex, uv).rgb; + float originalHue = atan(yColor.b, yColor.g); + float finalHue = originalHue + hue; + float chroma = sqrt(yColor.b*yColor.b+yColor.g*yColor.g); + vec3 yFinalColor = vec3(yColor.r, chroma * cos(finalHue), chroma * sin(finalHue)); + gl_FragColor = vec4(yiq2rgb*yFinalColor, 1.0); +} + ` + } +}); + +class HueRotate extends React.Component { + render () { + const { width, height, hue, children } = this.props; + return + {children} + ; + } +} + +module.exports = HueRotate; diff --git a/Examples/Video/index.html b/Examples/Video/index.html new file mode 100644 index 0000000..ce5c955 --- /dev/null +++ b/Examples/Video/index.html @@ -0,0 +1,23 @@ + + + + + gl-react: WithReactMotion + + + + Fork me on GitHub +
+ + + diff --git a/Examples/Video/index.js b/Examples/Video/index.js new file mode 100644 index 0000000..4e0f8fb --- /dev/null +++ b/Examples/Video/index.js @@ -0,0 +1,29 @@ +const React = require("react"); +const HueRotate = require("./HueRotate"); + +class Demo extends React.Component { + constructor (props) { + super(props); + this.state = { + time: 0 + }; + } + componentDidMount () { + const loop = time => { + requestAnimationFrame(loop); + this.setState({ time: time / 1000 }); + }; + requestAnimationFrame(loop); + } + render () { + const { width, height } = this.props; + const { time } = this.state; + return + + ; + } +} + +React.render(, document.getElementById("container")); diff --git a/Examples/Video/package.json b/Examples/Video/package.json new file mode 100644 index 0000000..b4eb958 --- /dev/null +++ b/Examples/Video/package.json @@ -0,0 +1,27 @@ +{ + "private": true, + "name": "gl-react-example-spring-cursor", + "version": "1.0.0", + "main": "index.js", + "license": "MIT", + "browserify": { + "transform": [ + "babelify" + ] + }, + "scripts": { + "start": "budo index.js:bundle.js | garnish", + "build": "NODE_ENV=production browserify index.js | uglifyjs -cm > bundle.js" + }, + "devDependencies": { + "babelify": "^6.1.3", + "browserify": "^11.0.1", + "budo": "^4.1.0", + "garnish": "^2.2.2", + "uglify-js": "^2.4.24" + }, + "dependencies": { + "gl-react": "file:../..", + "react": "^0.13.3" + } +} diff --git a/Examples/Video/video.mp4 b/Examples/Video/video.mp4 new file mode 100644 index 0000000..46bd618 Binary files /dev/null and b/Examples/Video/video.mp4 differ diff --git a/index.html b/index.html index d54b50f..e8ce77e 100644 --- a/index.html +++ b/index.html @@ -21,6 +21,7 @@ diff --git a/src/GLCanvas.js b/src/GLCanvas.js index a5667d2..ef8074a 100644 --- a/src/GLCanvas.js +++ b/src/GLCanvas.js @@ -217,9 +217,10 @@ class GLCanvas extends Component { invariant(texture, "Uniform '%s' described by GL.Target is not a texture.", uniformName); const textureUnit = this._textureUnits[uniformName]; const target = getDrawingTarget(uniformName); - invariant(target && "width" in target && "height" in target, "GL.Target only support one child among: , or