[HN Gopher] Svelte Cubed
___________________________________________________________________
Svelte Cubed
Author : 0xedb
Score : 117 points
Date : 2021-11-22 18:49 UTC (4 hours ago)
(HTM) web link (svelte-cubed.vercel.app)
(TXT) w3m dump (svelte-cubed.vercel.app)
| martyvis wrote:
| Pixel 3XL, Android 12, Chrome. Home page and demos work great.
| qwertox wrote:
| Not working on Chrome/Android, Firefox/PC, Chrome/PC. The
| examples, those are not working. It stays white. "no camera set"
| and other stuff.
| pavel_lishin wrote:
| Doesn't run in Brave for me at all.
| dandellion wrote:
| The examples don't work on Firefox or Brave for me either.
| cercatrova wrote:
| The React version is react-three-fiber which is also a cool
| project.
|
| - https://github.com/pmndrs/react-three-fiber
|
| - https://docs.pmnd.rs/react-three-fiber/getting-started/examp...
| qmmmur wrote:
| Works for me on Bromite. Exciting stuff.
| mathiasrw wrote:
| The examples did not work in iOS safari.
| brundolf wrote:
| They work fine for me on iOS Safari (iPhone XS, iOS 15.1)
|
| Edit: The home page animation works fine (30+ FPS), but the
| ones listed under the actual Examples tab are blank white pages
| boberoni wrote:
| While the 3D animation is very beautiful, my laptop noticeably
| started working harder to render the homepage and my fans started
| to get loud within 15 seconds.
| onion2k wrote:
| That's one of the most annoying aspects of WebGL. My Android
| phone runs the demos at 60fps, my M1 Mac Mini is fine, and my
| top spec 2021 Intel Macbook Pro sounds like a jet engine.
|
| It's mostly down to the browser and OS, and a function of
| screen resolution and GPU 'power', rather than anything to do
| with the framework or JS aspects.
| brundolf wrote:
| The Intel MacBook Pros have a discrete GPU that's turned off
| most of the time, and only kicks in under certain
| circumstances (WebGL seems to be one of those). As soon as it
| turns on things get hot in my experience, even if it's not
| being pushed to capacity
| EarthLaunch wrote:
| There's a WebGL (and Threejs) setting for whether to use a
| discrete GPU: 'powerPreference' [1, 2], with the caveat:
| "Note that this property is only a hint and a WebGL
| implementation may choose to ignore it."
|
| 1: https://www.khronos.org/registry/webgl/specs/latest/1.0/
| #5.2
|
| 2: https://threejs.org/docs/#api/en/renderers/WebGLRenderer
| joemi wrote:
| That site runs so slowly in Firefox on my computer. I didn't try
| it on anything else since that just turned me off too much.
| bob331 wrote:
| Works beautifully on edge on an iphone7
| gs17 wrote:
| It's a Firefox issue in general in my experience. I have a
| Babylon.js project that runs at half the framerate in Firefox
| on the same computer.
| pastrami_panda wrote:
| Yes it's quite the juxtaposition.
|
| "Create beautiful, high-performance 3D apps"
|
| While it runs incredibly choppy on my Android in Chrome and the
| renderer looks both awkward and has artifacts on the shadows.
| wussboy wrote:
| Worked fine on my desktop Firefox.
| yawnxyz wrote:
| This was presented by Rich Harris at the Svelte Summit a couple
| of days ago, and it's heavily prefaced as a tech demo and very
| incomplete. The examples worked two days ago, so not sure what
| broke.
|
| Apparently the underlying code was used for some of the NY Times
| Covid infographics.
| gs17 wrote:
| The examples are working well for me, if there was an issue it
| must be resolved.
| beepbooptheory wrote:
| Why does this need to be its own thing? Looking at the repo[1],
| we have less 500 lines of code not counting the website itself,
| and its mostly just svelte code doing what any developer would do
| to use Threejs on their website.
|
| I'm sure its nice to have that glue code written for you, (I
| haven't actually seen it work on any of my devices yet), but I
| don't really see what this is doing other than making a repo with
| Svelte and threejs dependencies, writing some svelte components,
| and making a flashy website. Is this really all you need to do to
| "create something"?
|
| As a self-taught developer I am always confused what _should_ be
| my labor or not , especially with web-development. Like, I
| honestly would assume that I would get laughed off of HN if I
| ever "made" something like this and passed it off as an
| accomplishment. But perhaps I am missing something crucial
| here...
|
| 1. https://github.com/rich-harris/svelte-cubed
| pcthrowaway wrote:
| Adding to what others have said, lines of code isn't a great
| measure of the quality of a project. There's beauty and
| elegance in simplicity, and creating something well-structured
| and concise can take incredible skill. In fact, Svelte is also
| such a project; I believe version 1 was under 2000 LoC
|
| One more thing, software is more than just the code.
| Documentation is also a critical component of successful and
| useful software, and the submission does an amazing job of
| making this approachable and useful through Rich's
| characteristically clear documentation
| seeekr wrote:
| Rich, Svelte's creator, likes to just jump in and create a
| small little demo or showcase or just any kind of "project",
| that shows something interesting that can be done, in some area
| he's currently involved with. And he shares those as open
| source on his Github. I appreciate that.
| beepbooptheory wrote:
| Yeah I figured that out now.. I think I was just reacting to
| this like it was a full-fledged framework trying to sell me
| something, so to speak. But as a demo of both Svelte and
| threejs, along with some code to make them play nice, its
| certainly a worthy/good/shareable thing!
|
| Really didn't mean any snark at all!
| rich_harris wrote:
| The short answer is that you'd use Svelte Cubed for the same
| reason you'd use Svelte (or indeed any component framework)
| itself: declarative code tends to be more robust, readable and
| maintainable than imperative code.
|
| There's absolutely nothing wrong with using Three directly, but
| it's equivalent to using the DOM directly. At some point it
| gets hard to keep track of hierarchical relationships that
| aren't expressed as hierarchies, and managing state across your
| app becomes a burden.
|
| In addition, because components have a managed lifecycle, you
| get things like hot module reloading 'for free' if you're using
| a framework like Vite (or SvelteKit, which uses Vite). Once
| you've tried building scenes this way (e.g. maintaining your
| camera position while you tweak the properties of an object
| you've zoomed in on), Cmd-R driven development feels
| paleolithic.
| abraxas wrote:
| Being an old geezer here I can't shake the feeling this is what
| we did 20 years ago just reinvented (often wastefully). Yes, we
| had 3D on the web then. It was called VRML. We didn't have
| Svelte but somehow UI work didn't take years and an army of
| coders to put together. Something went funny in the last couple
| of decades. Back then I thought we'd be coding much cooler
| stuff in 20 years.
| jakelazaroff wrote:
| There are a lot of reasons someone might have made this:
|
| - They're a new developer, and this was a big accomplishment
| for them that they want to show off
|
| - They've built a few projects this way, identified the
| repetitive boilerplate code and extracted it into a library
|
| - They built a small app as a way to learn about Svelte and
| Three.js and want to get others' feedback
|
| - They're excited about Svelte or Three.js and want to show off
| what it can do (this is what actually happened, since the
| author is also the creator of Svelte)
|
| - They realize that other developers who aren't familiar with
| Svelte or Three.js may have trouble starting a project like
| this, so they wrote the plumbing code to help them
|
| It might seem to you that this code does "what any developer
| would do", but I assure you it's not. Everyone is different,
| and things that seem obvious to you may not be to others.
|
| I also want to comment on this:
|
| _> Like, I honestly would assume that I would get laughed off
| of HN if I ever "made" something like this and passed it off
| as an accomplishment. But perhaps I am missing something
| crucial here..._
|
| To be honest, I think the tone in your comment comes off as
| dismissive, and comments like this _perpetuate_ the assumption
| that people have that they 'll get laughed off HN if they show
| something like this. Ultimately the result is fewer people will
| show off stuff they make. And that sucks! The community should
| be a welcoming place that fosters others' enthusiasm. If this
| doesn't interest you, or you think it's too simple, you're
| always free to not upvote and not read. Obviously, a lot of
| other people _do_ think this is interesting, because it made
| the front page.
| beepbooptheory wrote:
| You are right I'm sorry to perpetuate anything bad. Thank you
| for your views and wisdom
| makeee wrote:
| > I'm sure its nice to have that glue code written for you
|
| I think you answered your own question there. There aren't any
| rules dictating how many lines of code must be written before
| it counts as "creating something".
| wnevets wrote:
| > https://svelte-cubed.vercel.app/examples/trisolaris
|
| > Uncaught TypeError: Failed to execute 'shaderSource' on
| 'WebGL2RenderingContext': parameter 1 is not of type
| 'WebGLShader'.
| deltron3030 wrote:
| Very cool, but the text on the buttons still isn't optically
| centered, there's to much padding on the bottom likely caused by
| an inapropriate font for ui design!
| 2fast4you wrote:
| Working for me in Windows/Firefox, and the demos are impressive.
| Svelte is such an amazing library, I use it exclusively when I
| need to do web dev
| [deleted]
| throwaway07686 wrote:
| I see that it doesn't work for some. To Rich's credit, he did
| mention during the presentation that it was unfinished. From my
| experience, Svelte and Three.js are a very productive
| combination. While the declarative approach of Svelte Cubed makes
| sense for generic scenes, for complex ones I prefer classic use
| of Three.js even if that means writing more lines of code.
|
| I've used Svelte and Three.js recently for several data
| visualizations and the DX is very good. Shamelss plug:
| https://cybernetic.dev/ (HN warning: uses crypto data).
|
| I think Rich will solve the current problems promptly now that he
| is working full time on Svelte at Vercel.
| findjashua wrote:
| works for me on osx chrome & ios chrome/ffox
| isuckatcoding wrote:
| Interesting. The main page loads for me but the examples pge
| just shows a blank canvas. iOS Chrome.
| kristjansson wrote:
| Oh man Safari (15.1, macOS 12.0.1, MacBookPro15,1) is _unhappy_
| with this page.
| jonplackett wrote:
| Very interested to try this. I love react and I love Three.js but
| react-three-fiber feels like somehow battling against the tide.
|
| Maybe this will feel like a more natural fit.
| rado wrote:
| Very slow home page, examples don't work.
| me_bx wrote:
| See also:
|
| Svelthree - Svelte powered three.js development
| https://svelthree.dev/
|
| Do these two projects cover the same scope?
| shimmeringpenny wrote:
| Hey this hacked my computer, f you thankfully I have a lot of
| extra security I put on my computer to block stupid crap like
| this from happening. Ban this guy
| glimmeringpenny wrote:
| Hey this hacked my computer, f you thankfully I have a lot of
| extra security I put on my computer to block stupid crap like
| this from happening. Ban this guy
| EarthLaunch wrote:
| I have a multiplayer game client using Svelte for the UI [1].
| Svelte Cubed looks awesome for this, but...
|
| Is declarative easier to reason about for complex projects, or
| does it become necessary to go imperative? I can imagine the
| advantage of imperative is being able to use normal engineering
| practices, but this isn't something I've thought about before.
|
| Are there examples where a declarative approach was phased out as
| complexity grew? The only example I can think of is when a
| company I worked for tried to use Flex (declarative Flash), which
| we later converted into pure ActionScript for larger projects.
|
| 1: https://github.com/Suncapped/babs
| Graffur wrote:
| I feel like this could be cool but as it says "It is not yet
| done.". There's nothing really to see.
| thedangler wrote:
| Didn't work in my version of FF at all, well the demo pages
| showed nothing.
| gliptic wrote:
| The console says "no camera is set".
| gnabgib wrote:
| Works fine in FF for me (94.0.1). There's a gently spinning 3D
| svelte logo casting a shadow. No jank, but 2-5% GPU usage.
| gliptic wrote:
| The main page works, but did you try the examples?
| blux wrote:
| The logo on the title page works for me too, but none of the
| examples do.
| gadrev wrote:
| https://svelte-cubed.vercel.app/examples/trisolaris
|
| "no camera set" too, FF 94 Linux. May be the linux part and the
| 3D/drivers mess/therefore lag of support for these things in
| linux that's to blame.
|
| Also fails the same way with Chromium 91 Linux.
| gliptic wrote:
| I get the same on Windows, FF 91.
| Mikeb85 wrote:
| Chrome 96 works.
| thedangler wrote:
| Running 93.0 (64-bit)on windows 10
___________________________________________________________________
(page generated 2021-11-22 23:00 UTC)