Three.js Fundamentals | Hacker News Reader

Three.js Fundamentals

threejsfundamentals.org

365 pointspetethomas44 comments

For anyone interested I modernised the Three.js part of the marker based augmented reality library AR.js into a separate library called THREE AR. You can see it here https://github.com/JamesMilnerUK/THREEAR

I spent a nontrivial amount of time fiddling with arjs a couple of years ago so I know how disorganized that codebase is. congrats on wrestling it down but I'm curious why? what did you end up using the marker recognition for? I was trying to build a product around but ultimately decided that the markers are simply too awkward.

Three.js is insane, in a good way. Great abstraction of WebGL, very user friendly, and surprisingly few things that it can't do, as long as you're willing to think up some workarounds if something you're doing is super unique.

Question, what is the job market like for someone who is good with graphics programming? I'm not the best at math but I have struggled my way through linear algebra enough that with some practice I think I could be good at graphics programming. It'd certainly be a nice change of pace from programming CRUD forms for businesses.

You are shadowbanned. I didn't find an obvious reason when looking at your post history which is why I'm telling you.

How can you tell?

I assume when he posted that comment it was dead immediately. It had to be vouched to show up.

Ah right, thanks.

A few years ago I went deep into an effort to make my own 3D animation company, all in-house software and everything from the ground up as much as possible.

I wanted to make the next Pixar, went far with the idea. Built a lot of working prototypes for the software we'd use all by myself. I built something I was pleased with and sought for a seed round and everything. I certainly don't know everything but I know way more than my fair share in graphics programming.

That's stellar experience and even with that I can't find any relevant graphics opportunities. I keep knocking on Pixar's door and they never have any open roles for the things we're looking for, and they never bite when they're open.

I work at Adobe now. Even here I'm not touching graphics :)

I'd love to hear someone else's take, because all I can conclude is that it's a saturated industry, it's a primarily academic industry (I don't have a degree), or I'm outside the industry network.

Send me an email - would love to have a conversation!

Not the person you replied to, but I have a friend looking for a graphics job in SF. Contact via your username at your workplace website?

Email should be in my profile - ben@beautiful.ai

Personally, I think it’s quite good, especially if you’re flexible about where you work. Getting practice and being good at enough linear algebra to understand graphics transforms thoroughly will help a lot. There are graphics jobs in web app developement, mobile/console/pc game studios, game engines, scientific computing and HPC, medicine, movie studios, third party software renderers, and lots and lots in the Bay Area giants like Facebook, Google, Apple, AMD & Nvidia.

I think it would be pretty good. Less employers needing graphics programming, but a lot less candidates. I've been trying to hire someone with some graphics programming experience and so far have had a lot of trouble finding candidates in SF.

Construction industry. I'm having an upcoming project with making a web based 3d editor now, and before that I had an open offer for another construction industry 3d app. I also have a close friend who just finished a gig in the same line

I've made a lot of games with three js which I've published as open source on github. https://github.com/lallassu

Checkout these repos: - parrothunt - Qake (qake.se) - saving nemo - vox2 Etc...

At least for some inspiration perhaps :)

Love it!

One minor thing I noticed, is that capturing the mouse doesn't seem to be working on FF 66.0.3 on Linux (Manjaro). Not sure if that's because I have a dual screen setup. I guess on a single-screen setup I wouldn't notice if I had the browser in full screen.

Edit: There is a "lock mouse" button and I am an idiot. Thank you for reading, I will leave this here for posterity.

Hehe yeah it's not that intuitive :)

The links might not work for the games anymore, but here are some of them to try out:

http://qake.se/demo2

http://qake.se/demo

http://parrothunt.nergal.se/

http://nemo.nergal.se/

http://toad.webgl.nu/

http://vox2.webgl.nu/

All are created with ThreeJS and the source code is on Github.

Three.js is good. Another option if you don't know is https://www.babylonjs.com/

Tried babylonjs week ago when they released new version. It was my first experience with 3D in the browser. But must say was very positive. I was able to do everything I wanted. The only bad was the lights shines through solid objects, so modeled room lamp is visible from the outside of the building :).

I didn't tried threejs though. So sorry for being bit of topic.

This behavior is expected. Without raytracing, lights are calculated locally for the object, without taking other objects into account. Unless you enable shadows, which add some computational cost but can prevent lights shining through walls/objects.

I’ve been through Three, Blend4web, aframe and verge3d. Babylon is the mot full featured and powerful for what I needed and it’s a pleasure to work with. Also forced me across to typescript which is a huge blessing.

Jesus, this was a hit of nostalgia, back to my younger days when I'd download OpenGL tutorials on my 56k all night and dive into every line the next day. Thank you for this, got me peeking into it and remembering that 3D isn't a scary thing.

Thank you! I've tried to follow three.js's own tutorials, and slip into coma every time. These are a vast improvement!

I don't think they're too bad, the three.js examples are good (if a little sloppy in coding style)

I think the main thing that helps is some kind of previous knowledge about OpenGL

I'm a few articles in and so far this a wonderful guide.

Btw three.js works flawlessly with Typescript too in case anyone is interested

I sort of agree, but there are some function signatures that don’t match what’s in the code using @types/three, and mrdoob does not want to maintain this. This gives a few @ts-ignore, but that’s not a big problem:)

I thought it came with bundled typings now? I didn't have to use @types/three it just came with the type definitions

That's what I thought - @types/three *.d.ts got imported via a script in this PR:

https://github.com/mrdoob/three.js/pull/15597

There's some discussion in there, but the way I read the conclusion was they were going to be bundle the typings going forward.

Very cool!

Mrdoob / aq are legendary.

Welcome to the future..

As someone new to three.js, and who hasn't dabbled with 3D since the 90s, I found this really easy to follow - really good intro!

I love Three.js, but without UDP support in the browser, making most multiplayer games with it is just not feasible yet, sadly.

how about using web sockets?

It's possible, sure, but websockets still use TCP. TCP is not suitable for most online gaming due to TCP retrying lost packets and generally being slower, unlike UDP.

I was super excited to use Three.js and thought it would be easy to do what I wanted to do. What I wanted to do was load a simple .obj model and display it. Easy this was not. Hopefully someday they will merge in obj support from their demos code section to actually be part of the main Three.js code :/

This is a sadly common failing of many of the popular graphics libraries.

DirectX 9 and XNA were quite nice to work in, because they had model-loading code baked right in, albeit you had to use .x or .xnbs. Later versions took out that D3DX support, and you have to integrate something third-party like Assimp.

Yeah it's nuts. I've literally written an obj loader in opengl before staying up all night one night for a graphics assignment when I was in college, and yet it took me a week to get three.js to load an obj.

On the rotating cubes, why are the borders showing up as sawed rather than straight lines?

Thanks for the tutorial.

That is called aliasing. Three.js defaults to it, but you can turn antialiasing on by passing the option to the WebGLRenderer. I added it here to the example, line 10: https://codepen.io/anon/pen/XwgGrW

I think this page might be defaulting to a pixel ratio of 1. On mobile and high-dpi devices, that automatically makes the rendering appear much more aliased, in return for much faster rendering and much less memory usage.

Why are the code examples on black over dark gray? It is nearly unreadable.

Can you actually generate lightmaps with three.js? I did a lot with it years ago. Really nice abstraction library.

Reply on news.ycombinator.com