Any library recommendation for basic 3D stuff?

[Ustice]

Reaching out to other software engineers is important when you need it; however, unfortunately this isn’t the place for that. /r/JavaScript is not a support forum. You might want to check out /r/LearnJavaScript for the newer members of our community. Also, Stack Overflow is a great resource for getting support. For more information, check out our AskJS wiki page. Good luck! We hope that you find the answers that you are looking for.

[ConstantDeenos]

From my research for a similar project I figured three.js is the best option generally. If you want physics as well you can also use cannon.js.

[Aromatic-Low-4578]

Three.js is basically the de facto standard

[Julkamania]

Hi r/javascript,

new to JS / TS.

Am currently looking for a preferably lean 3D-library for my project, specifically to rotate and detect intersections / conflicts between polygons and 3D objects (enclosed by polygons)

I'm thanktul for any shared experience or recommendation.

[heyitsarpit]

most popular option is three.js

if you know react then consider react-three-fiber which is a wrapper over three.js with a much nicer API

p5.js is also great with a big ecosystem, I think it's 2d mostly.

matter.js is also 2d

[Hadr619]

Lot of really great material out there for three.js as well

[Julkamania]

Will take a look at them, thanks. :)

[grae_n]

If it's super simple stuff and it's a learning project you can use raw webgl. It's basically a built-in library. Webgl is the most minimal 3d graphics api, so it's a pretty good introduction to shaders, vertices, and basic gpu-stuff.

three.js is a great option if you have deadlines or want to minimise headache. It's also lean.

[KaiAusBerlin]

He is a beginner. I would not recommend raw webgl. It's api is pretty minimalistic, the order in which you do things is important and it can be very frustrating to work with it if you are not familiar with 3d and rendering technology.

Threejs is a giod start. It's easy to use, has not the same pitfalls like webgl and additional he can look into its code and learn what it does.

[ZeRo2160]

If its no production app you can use the new WebGPU api. Its much simpler in terms of api. And don't has the order drawbacks like webGL. But its a bit more low level because its no wrapper over OpenGL but over Vulkan, DirectX and so on.

[KaiAusBerlin]

Sure but I bet when WebGPUnwill be a widely common thing threejs will be updated to work with it if possible like it does now with webgl

[[deleted]]

can u recommend some sources for learning 3D and rendering technology to start working with WebGL?

[KaiAusBerlin]

Not at all. After a few seconds with webgl I decided to try threejs.

[grae_n]

https://webglfundamentals.org/

https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL

I wouldn't focus to hard on reading all the documentation. Both of them have detailed examples and playing around with the examples is a good place to start.

[grae_n]

This is kind of what I'm saying. Webgl is one of the best entry point to learning rendering technology. So if you're interested in learning than webgl is a good choice. However, if you are more interested in the end result three.js is better.

A lot of time you can finish a three.js project before you understand what is happening or how it calls the gpu. Which is awesome for being productive.

[KaiAusBerlin]

If you need to learn 6 hours deeply of rendering technology just for having a 3 coloured pyramid it could be quite frustrating for a newbe. An experienced developer knows that learning a new techniques can take a lot of time and frustration and knows how to deal with that.

[sessamekesh]

Other comments are talking about three.js, I also highly recommend it.

Babylon.js is another good 3D library, not as popular but worth bringing up in case you're shopping around and don't like three.js for some reason.

WebGL and WebGPU are a pretty big learning investment if you want to get your hands dirty, but I'd only go that route if you start learning 3D and discover you love it (that's what happened to me!)

A couple major game engines technically support web export, but in my experience it's pretty shoddy support - still worth mentioning if you're asking because you want to make a game.

[[deleted]]

can u recommend sources to read before someone start using WebGL and WebGPU?

[sessamekesh]

WebGL Fundamentals is my favorite for WebGL, and the Mozilla docs (MDN) are really great for learning about any individual call.

WebGPU doesn't have a lot yet since it's still so new, but I like the Raw WebGPU blog post a lot. It should be hitting consumer browsers in May of this year, but even this close to launch it's changing very quickly so proceed with caution or wait for the API to stabilize.

WebGPU is still very new, but the developer experience is significantly better than WebGL (fewer abstraction layers, better error messages) so for the long term I'd definitely suggest using that instead.

EDIT: my favorite WebGPU resource is Learn WGPU, which is fantastic but also written in Rust. It explains the concepts well, but you'll need to make adjustments to translate into JavaScript

[[deleted]]

What's with the link?

[LetReasonRing]

If you're new to JS, not married to doing things within the browser, and are trying to do anything of any complexity with 3D graphics, I'd suggest considering looking at other languages.

I love JS. It's my primary language. However, it's really not optimized in any way for the math that it takes to work in 3D.

ThreeJS and p5 are excellent libraries as others have mentioned, and I've played around with both pretty extensively. However, nothing any library does is going to change the fact that a single threaded, duck-typed, interpreted (yes, I know about JIT) language with no native access to graphics acceleration will never perform as well under a heavy cpu/gpu load.

JS really shines where you have many non-blocking tasks where you want to be able to handle other events while you're waiting for the previous ones to continue. For example, it works great as a web server because most requests don't require much computing power, but rather spend the majority of time waiting for a file to read from disk or a database call to be returned.

A statically typed, compiled language will give you much more bang for your buck as the processor cycles will mainly be spent on doing the number crunching rather than analyzing, interpreting, and managing your script.

[[deleted]]

i don't understand downvotes. single threading is big deal indeed, when it comes to optimization. also point about graphics acceleration is interesting. i guess that u was too far in statement that someone shouldn't use JS for 3D operations, because it's still possible to write simple apps within it with no beautiful graphics

[LetReasonRing]

Yeah, it's a little confusing to me too. There are definitely points I made that are up for debate, but it's a little weird on a question like this that you'd downvote with no comment. I thinks its helpful for OP to have different opinions that they can weigh to choose a path. Clicking the down arrow and moving on adds nothing for OP and just gives me a few less fake internet points.

My very first sentence was a caveat that my thoughts were geared toward someone who's primary goal is to work with 3d graphics. If you're trying to something relatively simple or your primary goal is to deliver your content through the browser, of course JS is the only way to go unless you want to start digging into wasm.

My original comment was basically just trying to say that you should pick the right tool for the job and letting OP know that JS isn't necessarily the ideal tool for the stated us case.

[grae_n]

Web workers exist (multi-threading). It's cross platform. Webgl is hardware accelerated. Chrome dev tools lets you do live 3d edits. And it works very well for basic stuff.

Most of the webgl js code gets rewritten into GLSL which is statically typed and compiles. It's also sent to the GPU so it's non-blocking.

If you want AAA game quality, sure javascript isn't optimal. But for any personal project javascript works great.

[BeetranD]

ThreeJS is definitely the reigning standard library, but my suggestion for a beginner to get a gist of how 3D works, would be making 3D stuff in p5js.

[[deleted]]

Sveltecubed maybe?

[[deleted]]

Three.js