| Boxbuffergeometry by Elude [web] & Logicoma [web] | ||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
|||||||||||||
|
popularity : 59% |
|||||||||||||
alltime top: #7299 |
|
|||||||||||||
added on the 2017-09-04 13:09:10 by Volantis  |
||||||||||||||
popularity helper
comments
Great JavaScript demo. Elude Roxx!!!
rulez added on the 2017-09-04 15:28:20 by waldiamiga 
Great stuff. Not sure if the cube is glitchy or it's supposed to be that way though :D
Thumb up!
hmmh. what i saw in my browser did not look like the screenshot.
Very nice!!
YT ?
great!
Hammergeil
Not a fan of the music but the visuals are awesome!
ok, apparently the geometry didnt get rendered in my browser, but.. youtube version looks nice!
A great prod indeed. Can't wait to see the one which ranked 1st.
No connection between the music and the visuals so it doesn't really work for me as a demo. The beginning was pretty cool though.
Have you considered center aligning the viewport? 🤓
Code:
function onWindowResize( event ) {
var demo_szerokosc = window.innerWidth;
var demo_wysokosc = demo_szerokosc / 16 * 9;
renderer.setSize( demo_szerokosc, demo_wysokosc );
renderer.domElement.style.position = 'absolute';
renderer.domElement.style.top = `calc((100% - ${demo_wysokosc}px)/2)`;
}
What you all said: Cool visuals, but disconnected from the music.
As for the vertical centering, better do this in CSS ;)
As for the vertical centering, better do this in CSS ;)
Code:
canvas {
width: 100vw;
height: calc(100vw * 9 / 16);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@p01:
CSS transforms tend to produce gpu textures and things get extra blurry. Check on non-retina displays.
Also, because canvas do not dispatch resize events, the renderer would then have to check the canvas dimensions every frame and resize the webgl context if needed.
CSS transforms tend to produce gpu textures and things get extra blurry. Check on non-retina displays.
Also, because canvas do not dispatch resize events, the renderer would then have to check the canvas dimensions every frame and resize the webgl context if needed.
Good point about the CSS transforms. As for the resizing and style recalcs, I just did profiled a simple test case ( albeit with a 2D canvas ) and style recalcs only occured while resizing the window which is expected. No extra cost in this case.
But yeah the blur from the CSS transform is a bummer. Better use FlexBox to center the canvas then.
But yeah the blur from the CSS transform is a bummer. Better use FlexBox to center the canvas then.
Code:
html, body {
margin: 0;
height: 100%;
display: flex;
align-items:center;
}
canvas {
width: 100vw;
height: calc(900vw / 16);
}@p01:
Out of curiosity, why using CSS is "better" than my proposal in this case?
Out of curiosity, why using CSS is "better" than my proposal in this case?
For context... The code I posted is a modification of the function `onWindowResize` he's already using (I just added 2 lines).
Using CSS, the sizing and vertical centering should occur only in the compositer. As a rule of thumb, I try to touch CSS properties in JS as a last resort.
However this potential optimization is moot since the canvas is resized to match the viewport. The browsers most likely freak out and trigger a style recalc anyways. And to be completely honest, no one resizes the browser window for several seconds to see how smoothly, or not, a prod/app/demo is.
Sorry ubik and wobble for derailing.
However this potential optimization is moot since the canvas is resized to match the viewport. The browsers most likely freak out and trigger a style recalc anyways. And to be completely honest, no one resizes the browser window for several seconds to see how smoothly, or not, a prod/app/demo is.
Sorry ubik and wobble for derailing.
thanks guys for the advices :*
about disconnected with music - I already change (online is still party version) some things and now time=msx.currentTime (no time=clock.getElapsedTime() anymore )
about disconnected with music - I already change (online is still party version) some things and now time=msx.currentTime (no time=clock.getElapsedTime() anymore )
Just great.
Nice
Great.
Cool industral scenes and music even if a bit disconnected. Looking forward to see the final
Cool rendering/style, and I'm perhaps a bit biased, but lovely, lovely tune by wobble :D
Would've appreciated more sync/action though, but what's there is pretty solid for sure!
Would've appreciated more sync/action though, but what's there is pretty solid for sure!
sexy rendering
both BW scenes are beautiful to watch, congrats Ubik!
Nice visuals.
phat visuals and sound!
Keep them coming Ubik.
very nice :)
lists containing this prod
submit changes
if this prod is a fake, some info is false or the download link is broken,
do not post about it in the comments, it will get lost.
instead, click here !