Comments (12)
Hey @ajayns!
Are you by any chance instancing your plane before the window load event actually occurs? Because this could lead to some wrong plane sizes calculations.
You could try to use the resize()
method of your texture (or even of your plane) in the window load event and/or your plane onLoading
callback and see if it solves it.
from curtainsjs.
I did try using the resize()
method for plane and texture to no avail. It seems like the plane has some issues getting the right coordinates from the dom plane element.
Since I really don't have much else to provide to showcase the issue, do you have any insights into how I could generate the matrix manually or do something similar based on the size of the plane dom element? Hopefully, I might be able to find the cause of the problem when I try that.
from curtainsjs.
Well, that's weird!
Have you tried comparing both plane.getBoundingRect()
and plane.htmlElement.getBoundingClientRect()
values to see if there's any difference?
Also have you checked your texture _size
property to see if it's correct?
You could still pass your plane and texture width and height values as two vec2 uniforms to your vertex shader, and calculate the ratios in there and apply them to your aTextureCoord
attribute. Or do it directly in js and send them as uniform afterwards.
I'd still like to find out what could go wrong there!
Cheers,
from curtainsjs.
You could still pass your plane and texture width and height values as two vec2 uniforms to your vertex shader, and calculate the ratios in there and apply them to your aTextureCoord attribute. Or do it directly in js and send them as uniform afterwards.
Ahh that looks like it could solve the issue for my case even though it is a hacky fix.
I'd still like to find out what could go wrong there!
Same it's a pretty weird bug where even I'm unsure what's going wrong even with my going all around the problem and attempting a simplified reproduction.
The tips you've mentioned to debug does look handy, I'll check that out properly and get back to you on this.
Thanks a bunch for the help :)
from curtainsjs.
It gets stranger, the values seem to be calculated right:
Getting hacky, what seems to work for this case is:
vTextureCoord = vec2(.86, 1., 0., 1.) * aTextureCoord;
(this isn't the exact calculated value nor does it place the image in the center, but I got this by fiddling on dat.gui to match aspect ratio - it implies that the calculations are off somewhere)
As for the vTextureCoord we get by using TextureMatrix and TextureCoord, I can't seem to find any multiplication or so that fixes it.
Also texture matrix I'm using in case that's relevant:
from curtainsjs.
So to sum up, all the sizes values are correct, so there's no reason the texture matrix calculations could be wrong either.
Actually I've just made a quick test locally with a plane and texture of the exact same sizes. Got the same texture matrix, and the rendered texture looks just fine.
I honestly don't know what could be wrong here.
Maybe the issues' coming from something you're doing inside your shaders?
from curtainsjs.
I doubted that myself and so I ran it using the most basic vertex and fragment shaders which basically just passing the varying vTextureCoord and then using that the image is displayed. Still, the issue persisted.
From what I see I believe there's something going wrong with the calculations itself as I'd mentioned the uTextureMatrix seems to mess it up while me using a custom ratio to aTextureCoord seem to get the image to display.
But yes, I still have no clue what exactly is going wrong either, so I'll put this on hold, try other things, and eventually maybe I could spot what's happening here.
from curtainsjs.
Allright, then maybe the texture matrix uniform is not being updated somehow?
Silly question: is the bug still there when you resize your window?
from curtainsjs.
Sheesh, I found and resolved the error, that was quite the headache. I'm sorry for all the trouble but you were right, it had to do with the shaders.
In my local repo, I've added a couple of textures to the plane and I'm switching between them like your async textures loading example. Since I was using a bunch of images of the exact same size, I'd assumed I could just use the texture matrix of just one of them for all the images as the size and fit were the same. And that's where I went wrong haha, I added the individual matrices for each texture and that fixed the issue.
Also, any clue why my assumption was wrong? If textures are of exact same size, shouldn't the matrices be similar? Sorry, if this is a dumb question and I'm completely unaware of something
from curtainsjs.
Closing the issue, and I'm sorry again for all the trouble!
from curtainsjs.
Glad you found the bug :)
If the textures all have the exact same sizes, they should indeed have the same texture matrices as well.
Now that you know the correct texture marix values, you can use them to debug what matrix is wrong tho, and maybe find out why it was buggy in the first place.
from curtainsjs.
Yes, I'll take some time to look into that as well. Now knowing that my assumption was right, it is indeed a very weird bug.
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.