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

Merge branch 'master' into gh-pages

Browse Source
This commit is contained in:
Gaëtan Renaudeau 2015-08-20 21:41:28 +02:00
commit fcd8bdcc23
8 changed files with 125 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Examples/AdvancedEffects/src/Intro.js
View File

@ -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));
}
`
}

40
Examples/Video/HueRotate.js Normal file
View File

@ -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 <GL.View
shader={shaders.hueRotate}
width={width}
height={height}
uniforms={{ hue }}>
<GL.Target uniform="tex">{children}</GL.Target>
</GL.View>;
}
}
module.exports = HueRotate;

23
Examples/Video/index.html Normal file
View File

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>gl-react: WithReactMotion</title>
<style>
body {
margin: 0;
background: #000;
color: #fff;
overflow: hidden;
}
#container > * {
margin: 10px auto;
}
</style>
</head>
<body>
<a href="https://github.com/ProjectSeptemberInc/gl-react/tree/master/Examples/Video"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/52760788cde945287fbb584134c4cbc2bc36f904/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png"></a>
<div id="container"></div>
<script src="bundle.js"></script>
</body>
</html>

29
Examples/Video/index.js Normal file
View File

@ -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 <HueRotate width={width} height={height} hue={Math.PI * Math.cos(3 * time)}>
<video autoPlay loop>
<source type="video/mp4" src="video.mp4" />
</video>
</HueRotate>;
}
}
React.render(<Demo width={640} height={480} />, document.getElementById("container"));

27
Examples/Video/package.json Normal file
View File

@ -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"
}
}

BIN
Examples/Video/video.mp4 Normal file
View File

Binary file not shown.

1
index.html
View File

@ -21,6 +21,7 @@
<ul>
<li><a href="Examples/AdvancedEffects">AdvancedEffects</a></li>
<li><a href="Examples/SpringCursor">SpringCursor</a></li>
<li><a href="Examples/Video">Video</a></li>
</ul>
</body>
</html>

7
src/GLCanvas.js
View File

@ -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: <canvas>, <img> or <video>.");
if (target.width && target.height) { // ensure the resource is loaded
texture.shape = [ target.width, target.height ];
const width = target.width || target.videoWidth;
const height = target.height || target.videoHeight;
if (width && height) { // ensure the resource is loaded
texture.shape = [ width, height ];
texture.setPixels(target);
shader.uniforms[uniformName] = textureUnit;
}