i think the degree to which Three.JS has allowed programmers access to the world of modern 3d is severely understated. If you haven't tried it, go to threejs.org/examples/ and copy and paste some source, it's _incredibly_ simple to start hacking.
Thing I've struggled with is all the background. People talk about shaders and launch straight into the details, but I've barely been able to find any background information that sets the scene.
Last night I made a game with Unity, which was fun and pretty simple to start with and I'd like to understand more about it all.
Where does someone with plenty of comp and maths knowledge but no 3D experience (other than tinkering with the likes of Blender) go to learn about it quickly?
I still have no idea how to do “correct” perspectives. This is just something I hacked together until it looked good.
I can very much recommend doing a project like this. You will naturally figure out how 3D graphics work, and it’s simpler than it appears.
Relevant shaders link here: https://webglfundamentals.org/webgl/lessons/webgl-shaders-an...
Edit: I'd also add: I wouldn't bother learning much OpenGL/WebGL to begin with (except shader programming in GLSL, since there's no good alternative abstraction for that). If you end up liking working with 3D graphics, go back and learn some about it since it'll help you understand performance concerns better—but meanwhile, knowing it is just an optimization you don't need yet. It's true three.js is built on top of it, but the significant principles you need to use three.js effectively fall under real-time rendering, not OpenGL.
The programmable pipeline requires you to define some programs called "shaders" that run on the graphics card and replace the previous fixed pipeline functions.
Example: Say you feed a bunch of geometry information into the API (a list of vertices, faces that use those vertices, coordinates for textures, etc). The "vertex shader" receives 3D vertex coordinates (and possibly other values) and needs to output 2D screen coordinates. The hardware calculates which screen pixels will actually show which part of which face, and passes some coordinate information to a "pixel/fragment shader". The basic job of that shader is to read texture, color, and lighting information and decide what color should be output to the screen for a specific pixel (replacing the functionality of the lighting and texturing functions that were used in the fixed-function pipeline).
I think that three.js adds another level of abstraction on top of the actual graphics APIs.
Coming from a CS background, with a few years "in industry", I started by reading about the history of computer graphics, read some fixed-function 3D graphics tutorials, built a few toy programs, then moved to the shader pipeline, and built a few more toy programs with the things that I learned. Read theory, experiment to see how it maps to practice, refine your understanding, and then go back to reading, if necessary.
If I'm remembering correctly, I mostly ended up using http://www.opengl-tutorial.org/, liberally supplemented with Wikipedia articles and random mathematics articles, as necessary. (obviously, this isn't focused on WebGL and Three.js, but the core concepts apply. It might make more sense to go for tutorials in the ecosystem you'd like to learn, rather than learning one system, then having the time and cognitive overhead of learning to map the concepts to a new system).