4 ms·

My question, from using ThreeJs and @react-three{fiber, drei} and seeing this site, is why I do I continue to use CSS & HTML? The question is what is important,

My question, from using ThreeJs and @react-three{fiber, drei} and seeing this site, is why I do I continue to use CSS & HTML? The question is what is important, not the answer. In my experience there are times when building HTML CSS components is an anti-user pattern. I know HTML-CSS well, but is it the best experience for users? In some cases my answer is no. In particular, with complex websites I believe that using graphic navigation is superior to other alternatives. When we want to navigate using {Google,Apple,Etc} maps we do not have a list of hierarchical menus. One does not navigate to the continents menu, then countries, then states, then cities, etc. You zoom out, you zoom in or you type a location. A user can quickly and easily go from a street view in NYC to a street view in Osaka. I suspect that direct 3D graphics could be used in other situations, but have not had a chance to explore them. Low hanging fruit first. (And yes, this is not a bug free system. Getting things to work across platforms, browsers, etc can be tedious. On the other hand most {iPhones, Android phones } seem to have strong graphics capabilities that make them able to handle a modicum of graphics. :-) )

qwertox 2y ago
You're using HTML when you go from a street view from NYC to Osaka. You exit NYC street view, use the HTML <input> tag to enter Osaka, maybe you even click the man in the bottom-right to enter street view again. You should be considering the maps canvas as an interactive element in an HTML-CSS page. In a three.js-only webpage, will ads be embedded properly? Will the user be able to select the paragraph he is currently reading? Why reinvent the wheel when so much effort has been put into creating HTML/CSS/JS. Much of the page is rendered on the GPU anyway. Also, in my case, just looking at the demo [1] makes my GPU work at 10%+15% vs 1%+0% of a normal static page (iGPU+dGPU, Intel UHD 630+NVIDIA Quadro P620). Though the linked page does apparently use a rendering loop, while the other examples are just as inexpensive as normal HTML+CSS pages. [1] https://svader.vercel.app/landing-page-bubbles/webgl/ https://svader.vercel.app/landing-page-bubbles/webgl/
- text0404 2y ago
  > You should be considering the maps canvas as an interactive element in an HTML-CSS page. this breaks down if my 2D/3D scene _is_ the page and has its own interactive elements and rendering tree which need to be managed with their own state and lifecycles. the killer app in google maps is the interactive map, not the inputs - the types of experiences possible on the web today go far beyond text/image content and forms.
deleted 2y ago
[deleted]
sigh_again 2y ago
>why I do I continue to use CSS & HTML? Because you don't know how to write GLSL/WGSL, that things like font rendering end up requiring you to learn at best texture atlases, at worst SDF font rendering, and because you're quadrupling the time it takes you to do _anything_ because you're pixel bashing. Oh and it's not accessible, which means you're going to get clapped by any audit, which means you're already eliminated from most places. Shaders have their place, for interactive, high speed components that you _explicitly_ don't want to make accessible by default.

qwertox 2y ago

You're using HTML when you go from a street view from NYC to Osaka. You exit NYC street view, use the HTML <input> tag to enter Osaka, maybe you even click the man in the bottom-right to enter street view again. You should be considering the maps canvas as an interactive element in an HTML-CSS page. In a three.js-only webpage, will ads be embedded properly? Will the user be able to select the paragraph he is currently reading? Why reinvent the wheel when so much effort has been put into creating HTML/CSS/JS. Much of the page is rendered on the GPU anyway. Also, in my case, just looking at the demo [1] makes my GPU work at 10%+15% vs 1%+0% of a normal static page (iGPU+dGPU, Intel UHD 630+NVIDIA Quadro P620). Though the linked page does apparently use a rendering loop, while the other examples are just as inexpensive as normal HTML+CSS pages. [1] https://svader.vercel.app/landing-page-bubbles/webgl/ https://svader.vercel.app/landing-page-bubbles/webgl/

text0404 2y ago
> You should be considering the maps canvas as an interactive element in an HTML-CSS page. this breaks down if my 2D/3D scene _is_ the page and has its own interactive elements and rendering tree which need to be managed with their own state and lifecycles. the killer app in google maps is the interactive map, not the inputs - the types of experiences possible on the web today go far beyond text/image content and forms.

deleted 2y ago

[deleted]

sigh_again 2y ago

>why I do I continue to use CSS & HTML? Because you don't know how to write GLSL/WGSL, that things like font rendering end up requiring you to learn at best texture atlases, at worst SDF font rendering, and because you're quadrupling the time it takes you to do _anything_ because you're pixel bashing. Oh and it's not accessible, which means you're going to get clapped by any audit, which means you're already eliminated from most places. Shaders have their place, for interactive, high speed components that you _explicitly_ don't want to make accessible by default.