Comments (3)
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.
Related Issues (20)
- Domain Warping HOT 1
- Planes are missing after resize HOT 3
- Multiple ShaderPasses per Plane HOT 3
- Incorrect sampler name HOT 2
- blocked because of a disallowed MIME type HOT 4
- Copying a texture with different sourceType doesn't work HOT 4
- Make an option for a plane with rounded edges
- ShaderPass transparensy
- error occuring in curtains s
- Planes have unwanted offset when page is refreshed after scroll on mobile HOT 1
- Multiple Canvas + Locomotive Scroll V5 HOT 3
- Flowmap resizing HOT 2
- WebGPU Shaders or Three Shader Language support
- when resizing positions of planes misplaced HOT 2
- Creating a new texture or setting the source of an existing one dynamically throws a WebGL render error HOT 1
- reusing a past video texture HOT 5
- Strange behaviour on Safari ping/pong shading flowmap example HOT 4
- WebGL2 Support HOT 2
- Typescript types. HOT 2
- autoResize disabled, but right after refresh, the curtain gets resized HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from curtainsjs.