regl

regl copied to clipboard

Hi. I have a specific use case, in that I am using live shader reloading on GLSL file changes so I don't lose my application state while tweaking shaders. Sometimes, I make a syntax error during development, and because I'm using props and/or function to pass down the shader source, regl ends up spamming the console with a new error each frame. Is there any way of minimizing this spam, so that the error only appears once?

e.g. Draw command attempts to use shader but fails and enters error state. On next draw, only log errors if the vertex or fragment shader is different than the previous (failing) error state. If successful, clear the error state.

Somewhat related: the error logging formatting seems broken right now?

Code to reproduce:

// Import geometry & utilities
import createRegl from 'regl';
import createPrimitive from 'primitive-icosphere';
import createCamera from 'perspective-camera';

// Create WebGL scene
const regl = createRegl(document.body);
const sphere = createPrimitive(1, { subdivisions: 3 });

const camera = createCamera({
  fov: 45 * Math.PI / 180
});

// set up our camera
camera.translate([ 0, 0, 6 ]);
camera.lookAt([ 0, 0, 0 ]);
camera.update();

let draw = regl({
  // Or could use regl.prop() and pass this in
  frag: () => `
  void main () {
    gl_FragColor=vec4(1.5);
  }`,
  vert: () => `
  attribute vec3 position;
  uniform mat4 projectionMatrix;
  uniform mat4 modelViewMatrix;

  void main /() {
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position.xyz, 1.0);
  }`,
  uniforms: {
    time: regl.prop('time'),
    projectionMatrix: regl.prop('projectionMatrix'),
    modelViewMatrix: regl.prop('modelViewMatrix'),
    color: [ 1, 0, 0 ]
  },
  attributes: {
    position: regl.buffer(sphere.positions),
    normal: regl.buffer(sphere.normals)
  },
  elements: regl.elements(sphere.cells)
});

regl.frame(context => {
  regl.clear({
    color: [0, 0, 0, 1],
    depth: 1,
    stencil: 0
  });

  camera.viewport = [ 0, 0, context.viewportWidth, context.viewportHeight ];
  camera.update();

  draw({
    projectionMatrix: camera.projection,
    modelViewMatrix: camera.view,
    time: regl.now()
  });
});

Possibly related is having frame cancel itself it it errors out:

• https://github.com/regl-project/regl/issues/386
• https://github.com/regl-project/regl/pull/408

Though that cancels itself and so doesn't fix the problem where you want it to keep reporting errors. Would monkeypatching regl.frame to stop until errors have been cleared (presumably by reloading) be acceptable for this case?

And yes, the error reporting does seem to be garbled. Pasting it into a text editor restores the line breaks. Maybe the line break behavior changed?

The formatting of error reporting has been bugging me for a while. Seems like a chrome bug. Safari seem reasonable:

Chrome does print newlines in styled content, but seems to have some sort of inline-block thing going on so that things at the very least are moderately weird and out of order.

This suggests to me that chrome behavior can be salvaged but not without some careful manipulation of styles :/

@mattdesl Appears this is the issue to track for styling weirdness. https://bugs.chromium.org/p/chromium/issues/detail?id=810581&q=component%3APlatform%3EDevTools%20console%20style&colspec=ID%20Owner%20Summary%20Modified%20Stars

I guess that means it'll be fixed and there's little to do but to wait.

This seems to be fixed in latest Chrome Canary (69).