Go to bottom
Boxbuffergeometry by Elude [web] & Logicoma [web]
screenshot added by ubik on 2017-09-07 10:11:04
platform :
type :
release date : september 2017
release party : Riverwash 2017
compo : combined demo
ranked : 3rd
  • 21
  • 2
  • 0
popularity : 56%
  • 0.91
alltime top: #6855
added on the 2017-09-04 13:09:10 by Volantis Volantis

popularity helper

increase the popularity of this prod by spreading this URL:

or via: facebook twitter pinterest tumblr


Great JavaScript demo. Elude Roxx!!!
rulez added on the 2017-09-04 15:28:20 by waldiamiga waldiamiga
Great stuff. Not sure if the cube is glitchy or it's supposed to be that way though :D
rulez added on the 2017-09-04 17:44:27 by xernobyl xernobyl
Thumb up!
rulez added on the 2017-09-05 11:10:31 by argasek argasek
hmmh. what i saw in my browser did not look like the screenshot.
added on the 2017-09-05 16:32:58 by maali maali
Very nice!!
rulez added on the 2017-09-05 18:14:15 by mrdoob mrdoob
YT ?
added on the 2017-09-05 18:15:56 by nytrik nytrik
rulez added on the 2017-09-05 18:19:12 by Fell Fell
rulez added on the 2017-09-05 19:49:46 by SiR SiR
Not a fan of the music but the visuals are awesome!
rulez added on the 2017-09-05 19:56:34 by StingRay StingRay
ok, apparently the geometry didnt get rendered in my browser, but.. youtube version looks nice!
rulez added on the 2017-09-05 21:22:11 by maali maali
A great prod indeed. Can't wait to see the one which ranked 1st.
rulez added on the 2017-09-06 14:18:56 by nytrik nytrik
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.
added on the 2017-09-06 14:29:55 by Preacher Preacher
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)`; }
added on the 2017-09-06 22:01:26 by mrdoob mrdoob
What you all said: Cool visuals, but disconnected from the music.

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%); }
rulez added on the 2017-09-06 22:14:18 by p01 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.
added on the 2017-09-06 22:59:21 by mrdoob mrdoob
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.
Code:html, body { margin: 0; height: 100%; display: flex; align-items:center; } canvas { width: 100vw; height: calc(900vw / 16); }
added on the 2017-09-06 23:19:32 by p01 p01

Out of curiosity, why using CSS is "better" than my proposal in this case?
added on the 2017-09-06 23:41:58 by mrdoob mrdoob
For context... The code I posted is a modification of the function `onWindowResize` he's already using (I just added 2 lines).
added on the 2017-09-06 23:43:25 by mrdoob mrdoob
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.
added on the 2017-09-07 09:42:30 by p01 p01
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 )
added on the 2017-09-07 10:09:30 by ubik ubik
Just great.
rulez added on the 2017-09-07 16:28:17 by 100bit 100bit
rulez added on the 2017-09-07 17:59:28 by Frequent Frequent
rulez added on the 2017-09-07 21:32:43 by sheriff sheriff
Cool industral scenes and music even if a bit disconnected. Looking forward to see the final
rulez added on the 2017-09-08 15:21:50 by rloaderro rloaderro
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!
rulez added on the 2017-09-08 21:51:56 by ferris ferris
sexy rendering
rulez added on the 2017-09-09 19:42:39 by wullon wullon
both BW scenes are beautiful to watch, congrats Ubik!
rulez added on the 2017-09-13 10:43:53 by zden zden
Nice visuals.
rulez added on the 2017-09-24 21:33:00 by SuperNoise SuperNoise
phat visuals and sound!
rulez added on the 2017-10-04 20:38:09 by Bobic Bobic
Keep them coming Ubik.
rulez added on the 2017-10-22 18:47:53 by GumBoy GumBoy
very nice :)
rulez added on the 2019-05-01 13:23:52 by natalia natalia

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 !

[previous edits]

add a comment

Go to top