What is three.js?

I’ve worked with other software engineers, creative technologists, product designers, art / creative directors, various managers and they were all aware of “three.js” as some sort of a technology. The further people were from code the more it seemed conflated with “webgl”, but even the engineers were often unclear on what it’s actually supposed to do or does.

So i wrote a blog post on this topic but i still am fuzzy about a lot of things.

Is three.js a library? Some people use it as such, some use it indirectly (aframe?) but a lot seem to expect the three.js scene editor to be some sort of a content creation tool?

Is three.js a graphics thing? Is CSS considered graphics? What if it runs on some headless back end, just doing matrix math?

Is three.js analogous to WebGL? I think most people use it to abstract WebGL but its by no means the only way to render an abstract scene graph with three.js. I can only make a guess based on anecdotal evidence, is this actually known by someone? Is three.js used more with WebGL than canvas or css renderers?

Are three.js examples three.js? Most (all?) of these come from someone experimenting with three.js and sharing their results. Some seem more relevant than the others. There is some criteria probably for what makes it “into three.js” ie. the repo and what not? Are some examples more relevant than others, for example OrbitControls compared to Octree?

Is three.js a web thing? While most of the examples until recently would tell you to embed <script> tags into an html file, one can use it to make native apps, one can run it in node.js. While WebGL may be the interface, the implementation could be something like a software emulation if you run it in node.

Github says:

The aim of the project is to create an easy to use, lightweight, 3D library with a default WebGL renderer .

Has this aim been achieved? I’ve seen people use three.js for 2d graphics, like 2d games, video editing, image processing etc. So while it aimed to make a 3d library, it could have created a 2d library as a side effect.
Is it easy to use? I think it is because it takes so much boilerplate and bureaucracy out of writing WebGL. However some data such as this, tells otherwise. Over all time 40% of the questions are unanswered, in recent times this is rising. Ie. lots of questions, and no answers may mean it’s not easy to use.

Why is WebGL so important to outline in the description? I use it exclusively to abstract WebGL, but on the other hand, so many WebGL features are locked, that i can’t utilize WebGL. At the end of the day, if i author my shaders using a node editor, and author my app in a three.js editor, do i care if it’s WebGL and GLSL under the hood or something else?

I’d love to hear other people’s thoughts on these topics.

2 Likes

lightweight 3D library” with a repo approaching 1GB :wink: TBH at this point 3js is just something that makes your project more maintainable because it is easier to find a dev who knows 3js than a dev who knows webgl. Is it a bad thing that people who do not code have no good idea about the difference between two? They just do not care enough to learn the difference, and no amount of blog posts will make them.

1 Like

watch this guy recreating shadertoy in under 300 bytes and cry :slight_smile:

“Three.js, at it’s core, is a library that allows you to add and describe data in 3 dimensions, eg, as meshes and lights, and then convert that data into a 2d representation onto a HTML canvas.”
https://sbcode.net/threejs/scene-camera-renderer/

2 Likes

That’s an interesting conclusion. If you write a shader material though you could implement an image editing app without ever setting the 3rd dimension anywhere. A shader could always draw a triangle or a quad so that it fills the entire screen with pixels, and the camera doesn’t need to be positioned, sized or even put in the graph. I don’t think three is primarily a 3D library, it’s questionable if it’s even a library in its entirety.

Isn’t Three.js basically a wrapper/abstract layer over WebGL? So basically, its anything that WebGL is, but easier to use.

Although I guess the official answer can only come from mrDoob

4 Likes

What if you use just Object3D without WebGLRenderer to do some math in a node.js backend?

Or what if you use the scene graph with (Canvas|SVG|CSS)Renderer i don’t think it uses WebGL at all in any of these cases.

True, but may be irrelevant. The official answer could be that its a tool for space exploration, but if users are using it to explore the ocean, it’s a tool for that as well. I myself am more curious about your experiences and your thoughts.

Render engine

6 Likes

Hi @Fyrestar , could you elaborate a bit on your statement? What makes you see it as a rendering engine? I think of something like PicoGL when i think of that.

I started learning JavaScript at the same time I started learning three.js. I would say from the outside three.js is only as complicated to use as JavaScript is. Having said that I can use blender already so maybe that’s an advantage.

I’m currently using it to make my companies website. Basic stuff… a scrollable affair that people outside of this forum would be impressed by. So in terms of three.js standards it’ll be a 4/10… but in terms of web design… it’ll be up there.

Recently more of our physical event clients have been asking for more digitally complex ‘experiences’. We’ve been installing day/night cycle moving light installations, fake windows with a streamed countryside views, VR experiences and projection mapped walls. We have an event in September that plans to have it’s entire event interior decoration achieved in augmented reality. We think three.js makes sense for that.

I come at three.js from the point of view of someone who would never and probably will never get close to actual webgl. It’s terrifying and I have pretty bad attention span issues. I see three.js as a creative tool and I know that’s going to stress people out.

4 Likes

three.js is a 3d thing.

  • Does it have a rendering engine?

yep, at least 2 official ones (css and webgl)

  • Does it offer an editor?

yep, and it seems to be just as important as the rendering engine, according to some core maintainers.

  • Does it offer VFX?

Sort of, particles, post-processing fx.

  • Does it offer physics?

Sort of, again, judging by the examples, cloth simulation, liquid simulation, integration with other physics engines.

  • Does it offer IK?

Sort of…

  • Does it offer sound support?

Yep, as first-class

  • Does it offer I/O ?

Sort of, there are various camera controllers, drag controllers etc.

  • Is it a language?

Sort of, there’s the node-based shader programming language, there’s the extended GLSL with includes and pragmas

  • Is it a VR toolkit?

I believe so…?


I guess what I’m trying to say, is that I have little idea of what is three.js, I know that it’s not a spoon and it’s not a llama, but that still leaves a few possibilities open.

4 Likes

That a lot of these features being not directly in the core, instead modular is typical for a render engine and i love it this way.

OGRE (object-oriented graphics rendering engine) for example is similar, but even more abstracted.

The choice of name also perfectly fits THREE and it’s focus, and i absolutely love THREE for sticking to this, staying and getting more powerful but also staying flexible to use it for different purpose/kind of engines, from more lightweight viewers to large games.

I wouldn’t worry about some explicit drawer THREE fits in, a render engine can be small and less abstracted similar to the one you mentioned, but also cover a lot basics which can be found in game engines usually like THREE has modulary available.

What i’d like to see would be the examples folder being split into actual examples and a folder for separate features/modules like the posteffects, compositor, controls, physics engine etc.

5 Likes

Hey @Fyrestar,

I get what you’re saying. I don’t mean to say that three.js is :poop:

I like it, heck, I wouldn’t have picked it or kept using it as the rendering backend for my game engine.

What I am saying is - I am confused, and I have been confused for a very long time. What is three.js has as its goal?

Because that matters. What is git? What is Unity? What is a llama? - those things are pretty clear in my head. Three.js - I know what it has, but I have no idea what the core maintainers see it as, and what direction this ship is sailing. And you know what? Having invested a ton of time into it - it makes me worried.

Have you ever gotten onto a long-haul flight with no knowledge of the exact destination when you really needed to be somewhere specific? Well, I feel I have.

I have raised a bunch of issues on github over time, and I can see that some people share my views on what I perceive three.js as, but I also have gotten a distinct feeling through those discussions that @mrdoob and West don’t share my view. In a recent discussion, @Mugen87 stated:

TBH, I doubt that deferred rendering will ever be part of the engine’s core. The resources of the project are limited and there are a lot of other issues which have a higher priority.

I personally think that WebGL 2 as well as WebGPU are a bit overrated. You can already build great applications with the existing technologies. A way more important feature request than let’s say a WebGPURenderer is a more advanced scene editor .

Am I the sole arbiter of what three.js should be? - of course not. For that matter, I am not even trying to steer this ship. But statements like this give me pause. Because that’s really confusing. Based on that statement - I expect three.js to turn into a casual game engine, friendly to most newbies. Graphics quality is unimportant. Advanced feature-set is unimportant. Beyond that - it is not even seen as viable in the scope of three.js.

So… what is three.js? Or perhaps a better question is - what are the goals of the project, and what are the priorities?

Tell me, are you happy with the answer “it’s a 3d library” when you’re picking a graphics engine to use for the next 5 years? I’m not. I like three.js, but this lack of clarity in direction is most definitely not the reason why I like three.js.

3 Likes

It was a reply to pailhead, my ipad sometimes glitches on discourse and jumps around :smiley_cat:

THREE can be a render engine as well as game engine, it just separates the logic and covers in this regard more than a overblown engine like Unity or Unreal, i wouldn’t use a game engine for an app.

yay, adventure!
lol
left to right: @mrdoob, @Usnul

2 Likes

I never said I don’t like threejs, but I share most of usnuls feelings. I’d still like to come up with an understanding of both what threejs is and what it’s intended to be. I don’t share @Usnul’s concerns though. AFAIC three.js could be a space shuttle, or a llama, i’m just being curious.

@makc3d
I don’t get the Rick and Morty reference, but on another topic, could you elaborate what you meant when you mentioned the size of the repo? How does this relate to the library being lightweight?

@Fyrestar

Do you have some examples of other rendering engines, come to think of it im only familiar with game engines. I thought PicoGL might be one.That one describes it self as “minimal” not lightweight though.

Can you elaborate on this?

Are you referring to the examples, or the way /src stuff is broken up?

@pailhead Rick never gives Morty full disclosure before going on an adventure, which is why Morty is always worrying. Just look at the picture again.

the size of the repo? How does this relate to the library being lightweight?

ah so now you suddenly DO know that all that stuff in the repo does not relate to what 3js is, what happened? did the fuzzy line suddenly sharpened itself in your eyes :smiley:

1 Like

To me three.js is a pretty non opinionated wrapper for WebGL that exposes core graphics programming constructs in a more intuitive way. To that end I expect that if three.js doesn’t do something for you that is possible with WebGL that you’re able to build it on top of the library. My use cases are probably different than the typical three.js user who something like the three.js editor is being built for but I don’t see building the editor as being at odds with my needs of the project as long as long as the library doesn’t become more strict or closed in order to accommodate it.

@Mugen87 mentioned in the other post that he doesn’t see a deferred rendering engine being a part of the three.js core and I’d agree with that. I don’t think it needs to be. You should be able to build one on top of everything thee.js already provides. Three.js shouldn’t impose an optimization strategy on me because the use cases can differ so broadly. People are using three.js for creative coding, data visualization, marketing websites, games, robotics, and more. There is no one size fits all solution for these cases. The more solutions that get imposed the closer you get to something like Unity or other game engines which is not what I want. You can build that on top of three but it shouldn’t be built in. Keep it lean so I can make the decisions. I continue to be impressed with the work people put into the API and its capabilities and if there’s an underlying webgl feature that isn’t available I expect there to be at least a little support in exposing it if you’re willing to put the work in.

@makc3d

“lightweight 3D library” with a repo approaching 1GB :wink:

watch this guy recreating shadertoy in under 300 bytes 14 and cry :slight_smile:

ah so now you suddenly DO know that all that stuff in the repo does not relate to what 3js is, what happened? did the fuzzy line suddenly sharpened itself in your eyes :smiley:

I think statements like this are pretty disingenuous and unhelpful. I don’t think it needs to be explained that you can’t do in shadertoy what you can in three.js. Shadertoy likely just sets up a quad and renders whatever shader gets passed into it so I don’t think it’s all that surprising that it can be so small. And the library portion of three.js is lightweight. Maybe you’re getting at something else but I think your interest in being sarcastic in your posts often obscures your ability to effectively communicate your point.

@Fyrestar

THREE can be a render engine as well as game engine, it just separates the logic and covers in this regard more than a overblown engine like Unity or Unreal, i wouldn’t use a game engine for an app.

I think I see three.js as a library that can be used at the core of a game engine or that a game engine can be built around it. Things like life cycle behavior, physics, and collisions all need to be handled by the wrapping engine.

@pailhead

Are three.js examples three.js? Most (all?) of these come from someone experimenting with three.js and sharing their results. Some seem more relevant than the others. There is some criteria probably for what makes it “into three.js” ie. the repo and what not? Are some examples more relevant than others, for example OrbitControls compared to Octree?

Regarding the examples I think looking at the history of them is telling. I came to the project late but it seems like a lot of the examples started off as something to show off what you can do with the library but have since been transformed into modular, reusable code. Personally I consider the “examples” folder to be more optional addons or extensions of the core library rather than examples. I think the folder name is a red herring at this point – I think it should be renamed or at least some of the components moved to a more properly descriptive folder like “extensions”. Given that there’s a desire to shrink core further my impression is that unless there’s some technical reason a component within core needs to know about the component (like WebGLRenderer) then it should belong in examples.

7 Likes

People have suggested this many times on the repo but it always meets strong resistance (just from one person I think) and gets abandoned. Feel free to suggest it again though, maybe you’ll be lucky, and you’ll have my support.

In any case, there’s a split - some things are just examples, like say the LightningStrike, while other like OrbitControls or post-processing are certainly more than just examples.

I don’t think your use cases are that different from a current three.js user. The goal of improving the editor is to open up the user base to less technical people.

naaah, the point was about webgl being verbose - and this alone. I do not compare shadertoy to 3js. the rest, well, is just me fooling around ) npm version of 3js has much sane-r size (25MB).

1 Like