WebGL建構網頁中的3D遊戲 從基礎渲染原理、光影到應用(二版)

Description

WebGL建構網頁中的3D遊戲 從基礎渲染原理、光影到應用(二版)

　　本書由 2021 iThome 鐵人賽 Modern Web 組「如何在網頁中繪製 3D 場景？從 WebGL 的基礎開始說起」改寫並加入遊戲互動要素，除了波光粼粼的海面，現在更有遊玩性了！

　　WebGL是一種JavaScript API，用於網頁呈現互動式2D和3D圖形，現今許多商家網頁展示自家商品，或讓顧客於線上預覽客製化商品時，都能看見其蹤影存在。

　　書中提供一系列連貫範例，帶領讀者透過 WebGL 在瀏覽器中學習電腦渲染 3D 的運作機制，一步步建構 3D 渲染流程，再到各種光線、陰影效果，最後加入遊戲機制與互動，製作成刺激好玩的遊戲！

　　本書主要內容如下
　　★初步認識WebGL
　　★Texture&2D
　　★3D&物件
　　★Lighting
　　★Framebuffer&陰影
　　★帆船與海
 目錄1 – Hello WebGL
1-1 準備開發環境
1-2 畫一個三角形（上）
1-3 畫一個三角形（下）
1-4 Uniform – shader 之參數
1-5 畫多個三角形
1-6 Varying – fragment shader 之資料
 
2 – Texture & 2D
2-1 在 WebGL 取用、顯示圖片 – Textures
2-2 Texture 使用上的細節
2-3 互動 & 動畫
2-4 2D Transform
2-5 2D transform Continued
 
3 – 3D & 物件
3-1 Orthogonal 3D 投影
3-2 Perspective 3D 成像
3-3 視角 Transform
3-4 使相機看著目標
3-5 渲染多個物件
 
4 – Lighting
4-1 法向量（Normals）與散射光（Diffuse）
4-2 Indexed Element
4-3 請 TWGL 替程式碼減肥
4-4 Specular 反射光
4-5 點光源與自發光
4-6 Normal Map
 
5 – Framebuffer & 陰影
5-1 Framebuffer 是什麼？
5-2 鏡面效果
5-3 陰影—拍攝深度資訊
5-4 陰影—深度 Framebuffer 與 Texture
5-5 陰影—計算是否產生陰影
5-6 毛玻璃效果—使用 Normal Map 的鏡面
 
6 – 帆船與海
6-1 主角『帆船』— obj 3D 模型檔案的讀取與繪製
6-2 Skybox
6-3 半透明的文字看板
6-4 使用 Shader 即時渲染波光粼粼的海面
 
7 – Catch The Wind 小遊戲
7-1 地形高度圖的產生
7-2 依照地形高度圖繪製島嶼
7-3 Set Sail! 航行帆船
7-4 遊戲標題與 UI
7-5 碰撞島嶼判定、結束遊戲
7-6 結語

 
书名简译:WebGL建构网页中的3D游戏 从基础渲染原理、光影到应用(二版)