Rendering issue with large display when embedded in page about curtainsjs HOT 3 CLOSED

I was able to debug what was causing this issue. My plane elements had a class of ".box" that I was using to select them and I had some other ".box" elements on the page unrelated to the WebGL stuff. I see why there could be conflict but the fact that it only happened on large screens is a bit perplexing. The other ".box" elements had a parent with display: none... I fixed it just by scoping the selector to the WebGL part.

Thanks again for the helpful support!

from curtainsjs.

Hey @ZachSaucier,

I've quickly tried to reproduce the bug based on your pen here but without any luck. On my laptop screen it's running well and I don't see any bug on resize. I'll try on a bigger screen later.
Have you tried with a basic fragment shader to see if it's caused by your glsl?

#ifdef GL_ES
  precision mediump float;
  #endif

  // Our texture samplers - Their names match the data-sampler attributes on our image tags
  uniform sampler2D planeTexture; // The image texture
  uniform sampler2D displacementTexture; // The displacement texture

  // Our texture coords (on a pixel-by-pixel basis)
  varying vec2 vTextureCoord;

  void main() {
    gl_FragColor = texture2D(planeTexture, vTextureCoord);
  }

If that does not solve your issue, you can try inspecting your scene with spector.js to see what's going on, because it is indeed weird.

I'll let you know if I find a way to debug that.

Cheers,

from curtainsjs.

Thanks for the feedback. A basic fragment shader causes the same issue. By the way, it's not caused by resizing, it's caused by the display being large for some reason. I will continue testing this evening to try and figure out what's going on.

from curtainsjs.