diff --git a/packages/cookbook/src/examples/blurfeedback/index.js b/packages/cookbook/src/examples/blurfeedback/index.js index 4c9d8f7..e45accf 100755 --- a/packages/cookbook/src/examples/blurfeedback/index.js +++ b/packages/cookbook/src/examples/blurfeedback/index.js @@ -6,19 +6,7 @@ import { BlurXY } from "../blurxy"; import { images } from "./meta"; import timeLoop from "../../HOC/timeLoop"; -const ContinuousBlur = timeLoop( - class extends Component { - render() { - const { factor, children } = this.props; - return ( - - {children} - - ); - } - }, - { refreshRate: 3 } -); +const ContinuousBlur = timeLoop(BlurXY); export default class Example extends Component { state = { diff --git a/packages/cookbook/src/examples/blurfeedback/index.source.js b/packages/cookbook/src/examples/blurfeedback/index.source.js index fa78261..62fa2e4 100644 --- a/packages/cookbook/src/examples/blurfeedback/index.source.js +++ b/packages/cookbook/src/examples/blurfeedback/index.source.js @@ -6,19 +6,7 @@ import { BlurXY } from "../blurxy"; import { images } from "./meta"; import timeLoop from "../../HOC/timeLoop"; -const ContinuousBlur = timeLoop( - class extends Component { - render() { - const { factor, children } = this.props; - return ( - - {children} - - ); - } - }, - { refreshRate: 3 } -); +const ContinuousBlur = timeLoop(BlurXY); export default class Example extends Component { state = { diff --git a/packages/gl-react/src/Node.js b/packages/gl-react/src/Node.js index 2ab9f2f..3b2b015 100755 --- a/packages/gl-react/src/Node.js +++ b/packages/gl-react/src/Node.js @@ -561,6 +561,15 @@ export default class Node extends Component { return framebuffer.color; } + getGLBackbufferOutput(): WebGLTexture { + const { backbuffer } = this; + invariant( + backbuffer, + "Node#getGLBackbufferOutput: backbuffer is not defined. Make sure `backbuffering` prop is defined" + ); + return backbuffer.color; + } + /** * Imperatively set the props with a partial subset of props to apply. * This is an escape hatch to perform a redraw with different props without having to trigger a new React draw. Only use it when reaching a performance bottleneck. @@ -869,10 +878,8 @@ export default class Node extends Component { `${nodeName}, uniform ${uniformKeyName}: you must set \`backbuffering\` on Node when using Backbuffer` ); } - const { backbuffer } = this; - invariant(backbuffer, "in backbuffering mode, backbuffer exists"); result = { - directTexture: backbuffer.color, + directTexture: this.getGLOutput(), directTextureSize: this.getGLSize() }; } else if (isBackbufferFrom(obj)) { @@ -902,7 +909,7 @@ export default class Node extends Component { ); } result = { - directTexture: node.getGLOutput(), + directTexture: node.getGLBackbufferOutput(), directTextureSize: node.getGLSize() }; } else if (obj instanceof Node) { @@ -1122,6 +1129,15 @@ export default class Node extends Component { ); visitors.forEach(v => v.onNodeSyncDeps(this, additions, deletions)); + if (backbuffering) { + // swap framebuffer and backbuffer + const { backbuffer, framebuffer } = this; + this.backbuffer = framebuffer; + if (backbuffer) { + this.framebuffer = backbuffer; + } + } + //~ DRAW dependencies step const drawDep = d => d._draw(); this.dependencies.forEach(drawDep); @@ -1152,15 +1168,6 @@ export default class Node extends Component { gl.drawArrays(gl.TRIANGLES, 0, 3); - if (backbuffering) { - // swap framebuffer and backbuffer - const { backbuffer, framebuffer } = this; - this.backbuffer = framebuffer; - if (backbuffer) { - this.framebuffer = backbuffer; - } - } - if (onDraw) onDraw(); visitors.forEach(v => v.onNodeDrawEnd(this));