<story><title>Show HN: WebGL Voxel Engine</title><url>https://github.com/Lallassu/voxelengine3</url></story><parent_chain><item><author>aidos</author><text>It&amp;#x27;s a world I&amp;#x27;d like to enter more myself but I&amp;#x27;ve found it&amp;#x27;s a little hard to get started. With a degree in maths &amp;#x2F; comp sci, I have a pretty good understanding of linear algebra. 20 years experience coding means I&amp;#x27;m quite happy to hack away.&lt;p&gt;Thing I&amp;#x27;ve struggled with is all the background. People talk about shaders and launch straight into the details, but I&amp;#x27;ve barely been able to find any background information that sets the scene.&lt;p&gt;Last night I made a game with Unity, which was fun and pretty simple to start with and I&amp;#x27;d like to understand more about it all.&lt;p&gt;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?</text></item><item><author>ixtli</author><text>i think the degree to which Three.JS has allowed programmers access to the world of modern 3d is severely understated. If you haven&amp;#x27;t tried it, go to threejs.org&amp;#x2F;examples&amp;#x2F; and copy and paste some source, it&amp;#x27;s _incredibly_ simple to start hacking.</text></item></parent_chain><comment><author>khedoros1</author><text>At just a basic level: 15-ish years ago, 3D rendering APIs used what is called the &amp;quot;fixed function pipeline&amp;quot;. Texture mapping, 3d-to-2d projection, and so on were limited to the specific functions implemented in the hardware of the video card and exposed by the 3D API you were using.&lt;p&gt;The programmable pipeline requires you to define some programs called &amp;quot;shaders&amp;quot; that run on the graphics card and replace the previous fixed pipeline functions.&lt;p&gt;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 &amp;quot;vertex shader&amp;quot; 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 &amp;quot;pixel&amp;#x2F;fragment shader&amp;quot;. 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).&lt;p&gt;I think that three.js adds another level of abstraction on top of the actual graphics APIs.&lt;p&gt;Coming from a CS background, with a few years &amp;quot;in industry&amp;quot;, 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.&lt;p&gt;If I&amp;#x27;m remembering correctly, I mostly ended up using &lt;a href=&quot;http:&amp;#x2F;&amp;#x2F;www.opengl-tutorial.org&amp;#x2F;&quot; rel=&quot;nofollow&quot;&gt;http:&amp;#x2F;&amp;#x2F;www.opengl-tutorial.org&amp;#x2F;&lt;/a&gt;, liberally supplemented with Wikipedia articles and random mathematics articles, as necessary. (obviously, this isn&amp;#x27;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&amp;#x27;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).</text></comment>
<story><title>Show HN: WebGL Voxel Engine</title><url>https://github.com/Lallassu/voxelengine3</url></story><parent_chain><item><author>aidos</author><text>It&amp;#x27;s a world I&amp;#x27;d like to enter more myself but I&amp;#x27;ve found it&amp;#x27;s a little hard to get started. With a degree in maths &amp;#x2F; comp sci, I have a pretty good understanding of linear algebra. 20 years experience coding means I&amp;#x27;m quite happy to hack away.&lt;p&gt;Thing I&amp;#x27;ve struggled with is all the background. People talk about shaders and launch straight into the details, but I&amp;#x27;ve barely been able to find any background information that sets the scene.&lt;p&gt;Last night I made a game with Unity, which was fun and pretty simple to start with and I&amp;#x27;d like to understand more about it all.&lt;p&gt;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?</text></item><item><author>ixtli</author><text>i think the degree to which Three.JS has allowed programmers access to the world of modern 3d is severely understated. If you haven&amp;#x27;t tried it, go to threejs.org&amp;#x2F;examples&amp;#x2F; and copy and paste some source, it&amp;#x27;s _incredibly_ simple to start hacking.</text></item></parent_chain><comment><author>westoncb</author><text>Part of why it&amp;#x27;s difficult is that there are a tons of concepts belonging to &amp;#x27;real-time rendering&amp;#x27; which three.js is built on top of. These are things like how a 3D scene is projected from a particular viewpoint using a &amp;#x27;camera&amp;#x27;, how lighting works, the split in vector&amp;#x2F;raster techniques for representing 3D shapes vs their surfaces, the role of shaders in modern GPU architectures etc. I&amp;#x27;d recommend the book &amp;#x27;Real-time Rendering&amp;#x27;: &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;www.amazon.com&amp;#x2F;Real-Time-Rendering-Third-Tomas-Akenine-Moller&amp;#x2F;dp&amp;#x2F;1568814240&quot; rel=&quot;nofollow&quot;&gt;https:&amp;#x2F;&amp;#x2F;www.amazon.com&amp;#x2F;Real-Time-Rendering-Third-Tomas-Akeni...&lt;/a&gt;&lt;p&gt;Edit: I&amp;#x27;d also add: I wouldn&amp;#x27;t bother learning much OpenGL&amp;#x2F;WebGL to begin with (except shader programming in GLSL, since there&amp;#x27;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&amp;#x27;ll help you understand performance concerns better—but meanwhile, knowing it is just an optimization you don&amp;#x27;t need yet. It&amp;#x27;s true three.js is built on top of it, but the significant &lt;i&gt;principles&lt;/i&gt; you need to use three.js effectively fall under real-time rendering, not OpenGL.</text></comment>