CSS3DRenderer Large Objects Causing Popping

[mattlockyer]

In the periodic table example, increase the size of the objects in the CSS:

width: 512px; height: 360px;

When you zoom in and out, the top row of the table layout is popping in and out...

Is there a limitation to the number of large surfaces CSS3D can render?

It's weird because it's always the same objects, positions.

When zoomed in things look fine, but that's not good...

[mrdoob]

Could you share the modified example?

[arodic]

I made a test case for this few months back http://aleksandarrodic.com/p/css3dbug/

Also, chromium bug was submitted since this is a webkit bug, nothing wrong with three.js https://code.google.com/p/chromium/issues/detail?id=222926

[mattlockyer]

Just zoom in and out with this as your element CSS:

.element { width: 512px; height: 256px; box-shadow: 0px 0px 20px rgba(0,255,255,0.5); border: 1px solid rgba(127,255,255,0.25); cursor: default; }

You'll notice right away there's some clipping issue, objects are popping in and out.

[mattlockyer]

Ok Chromium bug, good to know...

Also tested on regular public Chrome, same results.

[arodic]

Yup, the link is above. I also noticed that adding scroll bars to the dom reduces the popping effect. Weird stuff man.

[arodic]

I think it happens in Safari too.

[mattlockyer]

Your case is slightly different than mine, objects disappear when camera is too far away...

Try the period table example with the modified CSS above.

Hope they figure this out soon, it's quite lame...

[refset]

I spent a bit of time on this a while ago. After reading through webkit/chromium issues I came to the conclusion that it's because textures aren't being used / applied efficiently and basically you're trying to load too much unique surface area at once. I never really found a good solution :(

[mattlockyer]

I had to switch to using the webgl renderer and batch geometry with canvas generated textures.

I actually think batch geometry utilities that use large textures as a sprite sheet would be incredibly useful, but that's another topic...

Matt Lockyer - http://www.mattlockyer.com On 2013-06-16 10:37 AM, "Jeremy Taylor" notifications@github.com wrote:

I spent a bit of time on this a while ago. After reading through webkit/chromium issues I came to the conclusion that it's because textures aren't being used / applied efficiently and basically you're trying to load too much unique surface area at once. I never really found a good solution :(

— Reply to this email directly or view it on GitHubhttps://github.com/mrdoob/three.js/issues/3546#issuecomment-19515631 .