About First Tutorial, We introduce the Learning Making a Project about the WebGL 3D realms.
1. HTML/CSS/Web Knowledge
First, we need to understand basic HTML/CSS. In my opinion, the "Canvas" topics is the most important part of HTML/CSS for Web3D. When you start to "Hello World" project, try to figure out the "Canvas". It's will Help you a lot.
Whe you start to realize how "Canvas" Work, try to draw somthing on "Canvas", e.g. Drawing Something on "Canvas" like Line, Circle, Square, etc.
Study Resources:
HTML/CSS: W3C School, MDN
2. Development tools
Microsof VSCode is a cross platform tool for coding. I use it for many projects in many programming languge. In this case, we use the javascript development evironment.
This great development tools has a lot of plug-ins for developers, and the price is free for all. I recommand that to learn how to basically use the VSCode.
There are so many introduction of VSCode and VSCode Plugins tutorials on Youtube like the following.
3. Server Side Development Environment
When you have a HTML/CSS Static files, you'll need a server tools to host on local side. So, I choose the node.js for my server side development environment, Because node.js is also base on Javascript language. Therefore, you don't neet to learn other server side prgramming tools lik PHP, JSP, C#, ASP, e.g.
4. Development Programming Language
JavaScript is the main development programming language. Now, the JavaScript version is coming for ES 6.0 Standard. So many function inside this version about "Module", "Class", "Arrow Functions", e.g.
These newest features can help our code more modulize, easy read, and organization.
5. Choose a 3D Engine Framework
Finally here talk about 3D Engine. There are 2 main WebGL 3D Engine now are "three.js" and "babylon.js".
We Choose "three.js" is that the main language is also "JavaScript", "Babylon.js" using "typeScript" for programming language. By the way, three.js has a lot of communities support and sufficient examples to explore. I'm lazy for learning a new technique. All "JavaScript" is good.
6. Understand 3D Realtime Render basic knowledge
In 3D Realtime Render, we hava to know the following knowledge.
1. Polygon, Triangle, and Mesh.
2. Camera
3. 3D Scene Graph Hierachy.
4. Material
5. Texture
6. Lighting/Shadow
7. Render
8. Shader
Every part is the same important, but "Material" is the most vital part to let your project stylish and more different looks.
Every part can let you jump into one realm. For example, "Lighting" have Knowledge we should learn but not only for programming technigue. It combine Physics, Math, and Aethetic photography know-how that let you can dive in all month.
7. Practice
Just do it.
In this day, we fortunatly have so many tools on the Web like ShaderToy, CodePen, Stack Overflow, e.g. These on-line platforms can help you testing on-line. By the way, never be shy, discuss with comunities and everyone can help you.
8. Publish to Web Server
( Cloud Space Knowledge )
We use Google Cloud "App Engine" to publish for everyone. It's super simple for setting up for "node.js" user.
