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

邱冠喻

  • 出版商: 深智數位
  • 出版日期: 2022-12-20
  • 定價: $980
  • 售價: 8.5$833
  • 語言: 繁體中文
  • 頁數: 536
  • ISBN: 6267146820
  • ISBN-13: 9786267146828
  • 相關分類: WebGL
  • 立即出貨 (庫存 < 9)

  • WebGL 建構網頁中的 3D遊戲 從基礎渲染原理、光影到應用-preview-1
  • WebGL 建構網頁中的 3D遊戲 從基礎渲染原理、光影到應用-preview-2
  • WebGL 建構網頁中的 3D遊戲 從基礎渲染原理、光影到應用-preview-3
  • WebGL 建構網頁中的 3D遊戲 從基礎渲染原理、光影到應用-preview-4
  • WebGL 建構網頁中的 3D遊戲 從基礎渲染原理、光影到應用-preview-5
  • WebGL 建構網頁中的 3D遊戲 從基礎渲染原理、光影到應用-preview-6
  • WebGL 建構網頁中的 3D遊戲 從基礎渲染原理、光影到應用-preview-7
  • WebGL 建構網頁中的 3D遊戲 從基礎渲染原理、光影到應用-preview-8
  • WebGL 建構網頁中的 3D遊戲 從基礎渲染原理、光影到應用-preview-9
  • WebGL 建構網頁中的 3D遊戲 從基礎渲染原理、光影到應用-preview-10
  • WebGL 建構網頁中的 3D遊戲 從基礎渲染原理、光影到應用-preview-11
  • WebGL 建構網頁中的 3D遊戲 從基礎渲染原理、光影到應用-preview-12
  • WebGL 建構網頁中的 3D遊戲 從基礎渲染原理、光影到應用-preview-13
  • WebGL 建構網頁中的 3D遊戲 從基礎渲染原理、光影到應用-preview-14
  • WebGL 建構網頁中的 3D遊戲 從基礎渲染原理、光影到應用-preview-15
WebGL 建構網頁中的 3D遊戲 從基礎渲染原理、光影到應用-preview-1

買這商品的人也買了...

相關主題

商品描述

★★★【全台第一本繁體中文WebGL教學書】★★★

★★★【2021 iThome 鐵人賽 Modern Web 優選文章改寫】★★★

★★★【536頁內容+全彩圖文解說=完整學習WebGL!】★★★

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

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

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

本書主要內容如下

★初步認識WebGL

Texture&2D

3D&物件

Lighting

Framebuffer&陰影

★帆船與海

作者簡介

邱冠喻

PastLeo | 西瓜

https://pastleo.me/about

興趣使然的軟體工程師,對資訊科技的一切事物有興趣,從電腦硬體、作業系統、網路到網站前後端、應用程式之技術。

投入於 Web、前端工程,喜歡有趣的互動體驗以及創造的過程,努力鑽研 GPU 渲染與遊戲的開發。

  • 現任職於知名區塊鏈公司前端工程師
  • 多年 ReactReact Native 以及 Next.js 前端開發經驗
  • 多年 RailsElixir 後端開發、伺服器維運經驗
  • COSCUPMOPCONSITCON 等社群活動講者
  • ASTRO Camp Javascript 兼任講師

目錄大綱

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 結語