게임 디자인 및 프론트 엔드 해킹

WebGL guide

https://xem.github.io/articles/webgl-guide.html 

이 안내서는 각 장에 작은 대화식 데모가 있는 완전한 요약 WebGL 학습서입니다.

이 책은 주로 WebGL Programming Guide 책과 Webgl2Fundamentals, LearnWebgl & MDN 웹 사이트에서 영감을 얻었습니다.

거의 처음부터 시작하여 라이브러리 나 프레임 워크를 사용할 필요 없이 바닐라 JS 및 WebGL만으로 자신 만의 3D 인터랙티브 장면을 만들 수 있습니다.

저의 목표는 모든 곳에 흩어져 있는 WebGL에 대한 모든 정보와 요령을 수집하여 짧고 유용한 방법으로 제시하는 것이었습니다. 나는 당신이 그것을 즐기시기 바랍니다!

이 안내서에 제시된 데모, 파일 및 도구는 모두 Github에서 사용할 수 있습니다.

WebGL 코드 골프, 레이 마칭 및 부호 있는 거리 함수에 관심이 있다면 Codegolf 팀에서 만든 Webgl 퀘스트 및 Webgl 퀘스트 2를 확인하십시오.

지식, 팁, GIF 및 교정에 대한 Inigo Quilez, Kevin Chapelier, Freya Holmér, Adrien Guéret, Damien Allonsius 및 Sampson Savinel에게 특별한 감사를 드립니다!

What is WebGL?

• Presentation
• The GLSL language
• Communication between JS and WebGL

Maths required to follow this guide

2D graphics

• Hello, point
• Custom values: attributes and uniforms
• Drawing many pointsy
• Drawing lines and triangles
• Multi-attribute buffer & varyings
• Translate, rotate, scale
• Texturing

3D graphics

• The 3D camera
• Indexed vertices
• Hello cube
• How to color each face of the cube
• Lighting and shading
• How to transform a 3D model
• Drawing many cubes
• Hierarchical objects

Debugging

WebGL 2.0

To be continued...

Bonus: WebGL and code-golfing