Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

prism@1.6.0 extremely slow with JS snippet with comments (~8s on Chrome/macbookpro) #1152

Closed
gre opened this issue Jul 5, 2017 · 2 comments

Comments

@gre
Copy link

gre commented Jul 5, 2017

screen shot 2017-07-05 at 12 43 20

This seems to be related to the comments because if I remove all of them, it no longer hangs for 8 seconds!

//@flow
import React from "react";
import { Uniform, Shaders, Node, GLSL, NearestCopy } from "gl-react";
import { Surface } from "gl-react-dom";
import timeLoop from "../../HOC/timeLoop";

export const shaders = Shaders.create({
  InitGameOfLife: {
    // returns white or black randomly
    frag: GLSL`
precision highp float;
varying vec2 uv;
float random (vec2 uv) {
  return fract(sin(dot(uv, vec2(12.9898,78.233))) * 43758.5453);
}
void main() {
  gl_FragColor = vec4(vec3(step(0.5, random(uv))), 1.0);
}`
  },
  GameOfLife: {
    // implement Game Of Life.
    frag: GLSL`
precision highp float;
varying vec2 uv;
uniform float size;
uniform sampler2D t; // the previous world state
void main() {
  float prev = step(0.5, texture2D(t, uv).r);
  float c = 1.0 / size;
  float sum =
  step(0.5, texture2D(t, uv + vec2(-1.0, -1.0)*c).r) +
  step(0.5, texture2D(t, uv + vec2(-1.0,  0.0)*c).r) +
  step(0.5, texture2D(t, uv + vec2(-1.0,  1.0)*c).r) +
  step(0.5, texture2D(t, uv + vec2( 0.0,  1.0)*c).r) +
  step(0.5, texture2D(t, uv + vec2( 1.0,  1.0)*c).r) +
  step(0.5, texture2D(t, uv + vec2( 1.0,  0.0)*c).r) +
  step(0.5, texture2D(t, uv + vec2( 1.0, -1.0)*c).r) +
  step(0.5, texture2D(t, uv + vec2( 0.0, -1.0)*c).r);
  float next = prev==1.0 && sum >= 2.0 && sum <= 3.0 || sum == 3.0 ? 1.0 : 0.0;
  gl_FragColor = vec4(vec3(next), 1.0);
}`
  }
});

const refreshEveryTicks = 20;

export const GameOfLife = ({ tick }) => {
  // Changing size is "destructive" and will reset the Game of Life state
  const size = 16 * (1 + Math.floor(tick / refreshEveryTicks));
  // However, we can conditionally change shader/uniforms,
  // React reconciliation will preserve the same <Node> instance,
  // and our Game of Life state will get preserved!
  return tick % refreshEveryTicks === 0
    ? <Node
        shader={shaders.InitGameOfLife}
        width={size}
        height={size}
        backbuffering // makes Node holding 2 fbos that get swapped each draw time
        sync // force <Node> to draw in sync each componentDidUpdate time
      />
    : <Node
        shader={shaders.GameOfLife}
        width={size}
        height={size}
        backbuffering
        sync
        uniforms={{
          t: Uniform.Backbuffer, // Use previous frame buffer as a texture
          size
        }}
      />;
};

const GameOfLifeLoop = timeLoop(GameOfLife, { refreshRate: 20 });

export default () => (
  <Surface width={384} height={384}>
    <NearestCopy>
      <GameOfLifeLoop />
    </NearestCopy>
  </Surface>
);
@Golmote Golmote closed this as completed in b0fe103 Jul 5, 2017
@Golmote
Copy link
Contributor

Golmote commented Jul 5, 2017

Thanks for reporting, the performance issue should be fixed now. (Though the Node tags are still not highlighted since Prism does not support comments in those.)

@gre
Copy link
Author

gre commented Jul 5, 2017

woo, cool thanks

gre added a commit to gre/gl-react that referenced this issue Jul 8, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants