時(shí)渲染到引擎源碼的系統(tǒng)學(xué)習(xí)路徑)
做渲染相關(guān)工作這些年陸陸續(xù)續(xù)收了不下五十本相關(guān)的書真正從頭翻到尾的卻沒幾本。這次給自己定了個(gè)小目標(biāo)按照“實(shí)時(shí)渲染、離線渲染、引擎源碼、工程實(shí)踐”四個(gè)方向把值得讀的書和它們的目錄結(jié)構(gòu)重新整理了一遍順便標(biāo)注了每一章適合什么人、讀到什么程度可以停。這份目錄會(huì)持續(xù)更新今天先發(fā)第一版標(biāo)題就叫“渲染書籍目錄匯總”。系統(tǒng)性學(xué)渲染的人很容易在“買書—翻書—棄書”的循環(huán)里打轉(zhuǎn)。我最早學(xué)實(shí)時(shí)渲染時(shí)隨手買了一本《Real-Time Rendering》硬啃到第二章就卡住了因?yàn)槔锩婺J(rèn)你懂光柵化、懂相機(jī)模型、懂紋素和像素的區(qū)別。后來才明白問題不是書不好而是缺少一張地圖。這份目錄就是想當(dāng)那張地圖它告訴你先讀哪本、哪幾章必須精讀、哪幾章查手冊(cè)就行以及遇到“畫面閃爍”“內(nèi)存不足”“渲染被攔截”這類實(shí)際考題時(shí)該往哪本書的哪個(gè)章節(jié)翻。這份匯總適合三類人剛?cè)胄械膱D形程序員、想深入渲染引擎的工程師以及長(zhǎng)期用Blender、3ds Max、Unreal、Unity做項(xiàng)目但想補(bǔ)理論的美術(shù)或技術(shù)美術(shù)。如果你只是偶爾渲染一張效果圖建議直接看后面DCC工具工作流的部分不要硬啃PBRT如果你是做引擎源碼的引擎源碼向書單會(huì)比單純背API更有用??傊@篇東西不會(huì)教你某個(gè)按鈕具體怎么點(diǎn)但它能幫你把“渲染”這個(gè)超大的概念拆成可以下手的學(xué)習(xí)路徑。文末我放了一張“熱詞對(duì)照表”把最近頻繁出現(xiàn)的渲染技術(shù)關(guān)鍵詞和目錄里的書對(duì)應(yīng)起來方便你按圖索驥。以后這張表也會(huì)持續(xù)更新。1. 為什么會(huì)有這份渲染書籍目錄1.1 學(xué)習(xí)渲染最大的門檻不是智商是信息整合渲染這行有個(gè)特點(diǎn)理論分散在數(shù)學(xué)、物理、圖形API、硬件架構(gòu)、DCC工具和前端框架里單一本書根本覆蓋不了。舉個(gè)我自己的例子去年幫人調(diào)一個(gè)WebGL項(xiàng)目的渲染掉幀問題最終原因既不是shader寫錯(cuò)也不是頂點(diǎn)數(shù)太多而是瀏覽器在主線程解碼了一張大尺寸的base64圖片。你看這類問題在《OpenGL Programming Guide》里找不到在《Real-Time Rendering》里也找不到但它確實(shí)屬于“渲染”的范疇。所以學(xué)渲染的人最大的痛苦不是學(xué)不會(huì)某個(gè)公式而是不知道“我現(xiàn)在遇到的問題該去哪個(gè)知識(shí)池里找答案”。這份目錄的核心價(jià)值就是主動(dòng)做一次信息整合。所有涉及渲染的關(guān)鍵領(lǐng)域——幾何處理、材質(zhì)光照、光柵化、光追、圖像后處理、GPU架構(gòu)、實(shí)時(shí)引擎、DCC渲染器——我都嘗試放進(jìn)一個(gè)可回溯的框架里。當(dāng)你遇到問題先對(duì)著目錄定位再?zèng)Q定精讀哪本書的哪一章效率會(huì)高很多。1.2 這份目錄的四個(gè)分類邏輯渲染通常分成兩個(gè)大分支實(shí)時(shí)渲染和離線渲染。這也是工業(yè)界最常見的分法。實(shí)時(shí)渲染追求的是每幀16毫秒內(nèi)出結(jié)果游戲、VR、編輯器預(yù)覽、WebGL都算這類離線渲染允許幾分鐘甚至幾小時(shí)渲染一張圖電影級(jí)視效、產(chǎn)品廣告圖、V-Ray那類效果圖工作流都屬于這個(gè)范疇。但光分這兩個(gè)還不夠因?yàn)槿缃翊蠖鄶?shù)人不是直接和底層API打交道而是在Unity、Unreal、Blender、瀏覽器里渲染。所以我在實(shí)時(shí)和離線之外又加了兩個(gè)橫向分類引擎源碼與圖形API以及DCC與前端渲染實(shí)踐。前者面向想做“渲染器本身”的人重點(diǎn)是真機(jī)性能、API抽象和源碼閱讀后者面向“用渲染器干活”的人重點(diǎn)是腳本、參數(shù)、合批、緩存這類工程問題。四個(gè)方向不是互相隔離比如你要調(diào)UE5的渲染內(nèi)存不足既要知道實(shí)時(shí)渲染管線的大局也要知道引擎的流送Streaming機(jī)制。目錄的分類只是為了讓你先找到入口進(jìn)去之后路是通的。2. 實(shí)時(shí)渲染路線先啃硬骨頭還是先做案例2.1 Real-Time Rendering 的目錄結(jié)構(gòu)與閱讀策略只要聊實(shí)時(shí)渲染繞不開《Real-Time Rendering》第四版作者是Tomas Akenine-M?ller等人。這本書與其說是一本書不如說是一份帶索引的領(lǐng)域地圖。它的目錄大概包括幾何與變換、光柵化、紋理、陰影、物理基礎(chǔ)著色、帶材質(zhì)的顯式光照、全局光照近似、體積渲染與光線投射、混合渲染、曲線曲面等。我建議第一次讀的人直接從第5章“紋理”讀到第9章“物理基礎(chǔ)著色”這部分是實(shí)時(shí)渲染在現(xiàn)代引擎里的地基。至于第20章以后的體積渲染、光線投射以及第24章左右的混合渲染前幾年可以跳讀但如果你是想追“volumetric ray marching”這種熱詞那就必須回頭精讀。我自己用的方法是先讀第5到第10章打底然后去UE5里把“Nanite/Lumen/Virtual Shadow Maps”的文檔打開對(duì)照書里的光柵化、層次結(jié)構(gòu)、陰影映射概念看效果比單純啃書好得多。遇到“UE5渲染內(nèi)存不足”這類問題也是先看書中紋理流送、紋理池相關(guān)章節(jié)再回引擎里調(diào)參數(shù)。2.2 從GPU Gems到GPU Pro案例書怎么讀學(xué)術(shù)大書讀起來累案例書是很好的調(diào)劑。GPU Gems 1到3、GPU Pro系列到GPU Zen這些書每章都是獨(dú)立的、發(fā)表在會(huì)議或論壇上的實(shí)戰(zhàn)案例主題覆蓋粒子、水體、毛發(fā)、體積云、抗鋸齒、GPU驅(qū)動(dòng)優(yōu)化等。它們不像教科書有嚴(yán)格的邏輯順序而是“菜譜”式結(jié)構(gòu)你遇到一個(gè)效果直接翻目錄找到對(duì)應(yīng)菜譜按步驟做。我對(duì)這類書的建議很明確不要通讀放在案頭當(dāng)字典。比如你要做體積云就先翻GPU Pro里“Volumetric Cloud Rendering”那一章你想了解移動(dòng)端帶寬優(yōu)化就找Imagination和ARM在GPU Gems里寫的那幾篇。我自己好幾次在項(xiàng)目里需要快速實(shí)現(xiàn)一個(gè)效果都是從這些書里抄一個(gè)能跑的shader再逐步優(yōu)化。不過要留意這些書的案例API版本普遍偏老核心思想基本不過時(shí)但編譯環(huán)境和接口得自己更新到當(dāng)前版本。2.3 Ray Tracing Gems 與體積光線步進(jìn)如果想深入了解光線追蹤和“volumetric ray marching”Ray Tracing Gems系列是目前最好的資料之一尤其是第二本Ray Tracing Gems II有大量實(shí)時(shí)和離線光追的實(shí)現(xiàn)細(xì)節(jié)。書里專門有章節(jié)講加速結(jié)構(gòu)BVH、光線求交、材質(zhì)模型、降噪還有體積光散射。這些主題和熱詞里的volumetric ray marching直接對(duì)應(yīng)——體素化、步進(jìn)采樣、相位函數(shù)、時(shí)間性降噪基本都能在書里找到原理和偽代碼。這里插一句個(gè)人經(jīng)驗(yàn)光追入門千萬(wàn)別一上來就啃數(shù)學(xué)論文。我試過直接讀“神經(jīng)網(wǎng)絡(luò)輻射場(chǎng)”那類論文一周下來云里霧里。更好的路徑是先讀懂《Ray Tracing in One Weekend》那本小冊(cè)子再回來看Ray Tracing Gems你就能理解大家都在優(yōu)化的那部分到底在干什么。渲染書籍目錄里Ray Tracing Gems屬于“需要配合代碼食用”的類型讀完一兩個(gè)章節(jié)必須打開開源渲染器比如PBRT、Mitsuba里對(duì)應(yīng)的實(shí)現(xiàn)對(duì)照著看。3. 離線渲染與物理基礎(chǔ)PBRT是繞不開的3.1 Physically Based Rendering 的目錄與實(shí)現(xiàn)思路講到離線渲染就一定要說《Physically Based Rendering: From Theory to Implementation》簡(jiǎn)稱PBRT。這本書和它的隨書代碼幾乎是一個(gè)人“從零寫一個(gè)渲染器”的完整記錄。目錄結(jié)構(gòu)非常清晰先從形狀、紋理、材質(zhì)入手再到光傳輸、采樣與積分器最后是場(chǎng)景與相機(jī)。如果能把前幾章吃透你對(duì)“一個(gè)像素的顏色是怎么算出來的”這個(gè)問題會(huì)比讀十篇博客都扎實(shí)得多。閱讀時(shí)要盯住“積分器Integrator”這條主線。書中把路徑追蹤、雙向路徑追蹤、光子映射、Metropolis光照等算法統(tǒng)一成不同的積分器實(shí)現(xiàn)。理解了這個(gè)設(shè)計(jì)你再看Blender Cycles的渲染設(shè)置項(xiàng)就不再只是調(diào)參數(shù)而能猜到它背后在跑什么。PBRT的代碼質(zhì)量很高我建議每讀完一章就去跑一下配套的示例場(chǎng)景改改采樣數(shù)、改改最大深度看渲染結(jié)果和性能怎么變。比如你可以寫./pbrt scene.pbrt --spp 4 ./pbrt scene.pbrt --spp 1024對(duì)比噪點(diǎn)變化這比任何書里關(guān)于“如何選擇采樣次數(shù)”的段落都更直觀。3.2 數(shù)學(xué)與圖形學(xué)基礎(chǔ)書單如果你發(fā)現(xiàn)自己在讀PBRT或Real-Time Rendering時(shí)卡住大概率不是渲染問題而是數(shù)學(xué)基礎(chǔ)問題。對(duì)這種情況我推薦兩本《3D Math Primer for Graphics and Game Development》和《Mathematics for 3D Game Programming and Computer Graphics》。前者適合補(bǔ)向量、矩陣、四元數(shù)、變換這些基礎(chǔ)后者進(jìn)階一些涉及光照方程、透視投影、曲線曲面推導(dǎo)。它們是整個(gè)渲染書籍目錄的底層支撐。數(shù)學(xué)書不需要從頭讀到尾。我的經(jīng)驗(yàn)是“用哪查哪”讀PBRT時(shí)看到球坐標(biāo)采樣就翻數(shù)學(xué)書的球諧函數(shù)讀實(shí)時(shí)渲染書時(shí)看到投影矩陣就去翻矩陣變換那章??桃獍阉泄蕉纪埔槐楹苋菀追艞墶;A(chǔ)書的意義不是讓你成為數(shù)學(xué)家而是當(dāng)渲染文章里出現(xiàn)符號(hào)時(shí)你不會(huì)因?yàn)椤翱床欢?hào)”而停下腳步。另外想理解體積光線步進(jìn)里的相位函數(shù)、消光系數(shù)基礎(chǔ)概率論和微積分是繞不開的建議至少掌握積分和概率密度函數(shù)的基本概念。3.3 如何在PBRT里驗(yàn)證“渲染異常”很多人聊渲染異常第一時(shí)間想到的是引擎崩了、畫面黑了。但如果你把問題放到離線渲染里反而更容易定位根因。我經(jīng)常用PBRT來復(fù)現(xiàn)網(wǎng)上說的“黑面”“明亮噪聲”“亮斑”現(xiàn)象把最大反彈深度改成0畫面會(huì)變成一堆黑點(diǎn)把采樣數(shù)降低會(huì)出現(xiàn)明顯的高頻噪點(diǎn)法線方向不對(duì)會(huì)產(chǎn)生大片黑面。書中的調(diào)試技巧是每次只改一個(gè)變量觀察渲染圖片的變化再對(duì)照理論解釋。這其實(shí)也對(duì)應(yīng)了實(shí)際項(xiàng)目中“頁(yè)面渲染異?!钡呐挪樗悸稯penHarmony上畫面渲染異?;蛘邽g覽器里路由跳轉(zhuǎn)后組件不顯示先要區(qū)分是“數(shù)據(jù)沒渲染”還是“渲染了但被遮擋/被CSP攔截”。我踩過的坑是只在JavaScript里console.log忘了看網(wǎng)絡(luò)面板的響應(yīng)頭和瀏覽器控制臺(tái)的CSP報(bào)錯(cuò)。后面第5章我會(huì)列出具體排查步驟。歸根結(jié)底離線渲染器就是一個(gè)可控的實(shí)驗(yàn)場(chǎng)你可以把真實(shí)項(xiàng)目中的現(xiàn)象縮小到一個(gè)小場(chǎng)景里慢慢拆。4. 引擎源碼方向Unity、Unreal、Impeller與DCC工作流4.1 UE5渲染管線相關(guān)書目與官方文檔怎么配合UE5的Nanite和Lumen基本是實(shí)時(shí)渲染領(lǐng)域這兩年被問得最多的熱點(diǎn)。嚴(yán)格說目前還沒有一本專門講UE5渲染管線且內(nèi)容跟得上版本的書所以我建議采用“官方文檔經(jīng)典書源碼調(diào)試”三條腿走路。經(jīng)典書仍然用Real-Time Rendering打底理解虛擬陰影貼圖、軟件光柵化、有向距離場(chǎng)再看Epic發(fā)布的Nanite、Lumen白皮書最后在編輯器里把r.ScreenPercentage、r.ShaderComplexity之類的控制臺(tái)命令跑一遍。我自己在調(diào)“UE5渲染內(nèi)存不足”時(shí)先檢查了r.Streaming.PoolSize和虛擬紋理的池大小再打開材質(zhì)流送可視化發(fā)現(xiàn)是對(duì)高質(zhì)量貼圖池設(shè)得太大。書里關(guān)于紋理流送和mipmap的章節(jié)給了我理論基礎(chǔ)否則我只能摸著石頭過河。所以不要指望一本書給出UE5謎題的完整答案目錄要配合第一方文檔和源碼一起用。如果你看白皮書時(shí)覺得吃力先回到實(shí)時(shí)渲染書里補(bǔ)“虛擬紋理”和“軟件光柵化”兩節(jié)馬上會(huì)好很多。4.2 Unity UGUI渲染原理與UI合批UI渲染看起來簡(jiǎn)單其實(shí)是個(gè)很典型的“實(shí)時(shí)渲染”話題Canvas要重建網(wǎng)格計(jì)算頂點(diǎn)做合批最后再交到GPU。Unity UGUI的原理關(guān)鍵詞是CanvasRenderer、Mesh合批規(guī)則和圖集。推薦閱讀Unite大會(huì)和官方手冊(cè)中關(guān)于UI優(yōu)化的文檔再配合Frame Debugger觀察Draw Call合并。如果你想看代碼級(jí)實(shí)現(xiàn)可以讀Unity引擎源碼里ugui相關(guān)的部分這些其實(shí)比很多第三方的“UGUI渲染原理”二手文章都準(zhǔn)確。一個(gè)很實(shí)際的小例子把vue-pdf-embed的textLayer設(shè)為false確實(shí)可以減少渲染的DOM節(jié)點(diǎn)數(shù)量從而減少首屏卡頓但代價(jià)是PDF的文字沒法被選中輔助功能也會(huì)變差。這個(gè)和UGUI的優(yōu)化邏輯類似——你減少合批、減少圖集換來的是內(nèi)存和Draw Call下降但可能需要犧牲動(dòng)畫靈活性。方向永遠(yuǎn)是“理解原理再權(quán)衡取舍”而不是盲目關(guān)功能。4.3 Impeller渲染引擎原理移動(dòng)端渲染新方向Impeller是Flutter團(tuán)隊(duì)為了替代Skia而開發(fā)的渲染運(yùn)行時(shí)橫空出世的意義在于它不再在每一幀運(yùn)行時(shí)編譯shader而是提前編譯一組高效的著色器用Metal/Vulkan這樣的現(xiàn)代API做后端目標(biāo)就是消除首幀或復(fù)雜頁(yè)面上的掉幀。雖然它沒有傳統(tǒng)意義上的“紙書”但它的設(shè)計(jì)文檔和源碼非常適合當(dāng)“書”來讀。如果你之前只寫過ShaderLab或HLSL讀Impeller源碼時(shí)會(huì)遇到很多概念命令緩沖區(qū)、采樣器、并發(fā)命令提交、半像素對(duì)齊、紋理綁定。這正好能復(fù)習(xí)你在圖形API方向的知識(shí)。我在看Impeller時(shí)最大的感受是渲染引擎優(yōu)化的核心其實(shí)不是“更快的繪制函數(shù)”而是“少做無用功”提前編譯、復(fù)用資源、減少同步等待。這套思路放到WebGL、Vulkan、iOS小程序渲染機(jī)制里都適用。4.4 Blender渲染教程與3ds Max批量渲染腳本對(duì)于做產(chǎn)品渲染和影視方向的朋友目錄里單獨(dú)開一塊DCC工作流?!禕lender渲染教程》這類資料非常多我不一一列只提醒兩件事Cycles是路徑追蹤適合寫實(shí)Eevee是光柵化屏幕空間效果適合預(yù)覽。兩者參數(shù)完全不是一回事。很多新手把Eevee的面板調(diào)到超大渲染崩了還以為是顯卡不行實(shí)際是拿光柵化引擎的思路在調(diào)路徑追蹤參數(shù)。3ds Max這邊批量渲染是項(xiàng)目量大時(shí)的剛需。網(wǎng)上流傳的“批量渲染v3.0腳本插件”本質(zhì)是MAXScript寫的核心就三件事遍歷場(chǎng)景中的相機(jī)列表設(shè)置輸出路徑和幀范圍調(diào)用渲染命令一張張執(zhí)行。最穩(wěn)妥的是直接在命令行用3dsmaxcmd.exe執(zhí)行批處理可以防止多開時(shí)互相搶資源。如果想深入建議去看Autodesk官方Scripting手冊(cè)比搜來的腳本插件更可靠。產(chǎn)品渲染里V-Ray 6參數(shù)很多關(guān)鍵永遠(yuǎn)是材質(zhì)反射和GI算法本身在PBRT里已經(jīng)有底層解釋了。Rhino里的AI建模渲染插件是另一個(gè)有意思的方向流程本質(zhì)是Grasshopper接入AI模型生成幾何再交給渲染器最后考驗(yàn)的還是你對(duì)傳統(tǒng)渲染參數(shù)的理解。5. 熱門渲染話題對(duì)照表與實(shí)操驗(yàn)證5.1 熱詞、對(duì)應(yīng)書籍章節(jié)、實(shí)踐建議為了快速對(duì)應(yīng)問題我把最近經(jīng)常被問到的一些熱詞和目錄里的書/資料做了一個(gè)表格。這張表同樣會(huì)繼續(xù)更新新看到的渲染問題只要還沒歸類就會(huì)先放進(jìn)表里。熱詞/問題建議學(xué)習(xí)的書或資料實(shí)操建議volumetric ray marching 渲染技術(shù)Ray Tracing Gems II、Real-Time Rendering 體積渲染章節(jié)先用《Ray Tracing in One Weekend》跑通光線步進(jìn)再改造成體積采樣impeller 渲染引擎原理Flutter官方設(shè)計(jì)文檔、Impeller源碼讀“Resource Binding”和“Command Buffer”兩個(gè)模塊對(duì)照Metal/Vulkan APIUE5渲染管線Epic白皮書、Real-Time Rendering第四版在編輯器跑r.ScreenPercentage、r.ShaderComplexity配合GPU VisualizerUGUI渲染原理Unity官方手冊(cè)、Frame Debugger學(xué)會(huì)看Draw Call合并、CanvasRebuild耗時(shí)vue-pdf-embed 的 textLayer項(xiàng)目文檔、瀏覽器渲染機(jī)制默認(rèn)為true為了選中文字項(xiàng)目卡頓再考慮false同時(shí)評(píng)估無障礙損失1080p渲染比例圖形學(xué)基礎(chǔ)、相機(jī)與視口章節(jié)區(qū)分“輸出分辨率”和“渲染比例”后者多見于游戲和UE5的Screen Percentage3ds Max批量渲染官方MAXScript手冊(cè)、批量渲染v3.0腳本推薦用3dsmaxcmd命令行腳本只做人肉預(yù)覽Blender渲染教程Cycles/Eevee官方文檔先分清光柵化與路徑追蹤再調(diào)采樣和降噪iOS微信小程序渲染機(jī)制小程序同層渲染文檔uni-datetime-picker放進(jìn)scroll-view時(shí)注意是否原生組件用cover-view或同層方案local WebGL渲染引擎WebGL Programming Guide、Three.js文檔從緩沖、著色器、繪制調(diào)用三步理解WebGL做項(xiàng)目用Three.js查源碼再翻原版APIrouter vue3 路由跳轉(zhuǎn)組件渲染不顯示Vue Router 官方文檔檢查路由出口位置、KeepAlive緩存以及異步組件是否正常resolveUE5渲染內(nèi)存不足實(shí)時(shí)渲染紋理流送章節(jié)調(diào)r.Streaming.PoolSize查看紋理占用降低虛擬紋理池t113s3的G2D適合做LVGL渲染加速嗎LVGL移植文檔、G2D驅(qū)動(dòng)手冊(cè)先確定G2D是否支持需要的混合格式再寫底層blend回調(diào)不要盲目認(rèn)為所有2D加速都適合GUI頁(yè)面渲染安全策略攔截CSP文檔、瀏覽器DevTools看控制臺(tái)NotAllowed訪問提示檢查響應(yīng)頭Content-Security-Policy用frame-ancestors調(diào)整瀏覽器修改post數(shù)據(jù)后重新渲染文件DevTools Network面板、Mock Service Worker在Network里右鍵請(qǐng)求選“Override”本地修改body后重放Pico中4D Gaussian場(chǎng)景渲染3D Gaussian Splatting論文、gsplat/NeRFStudio先跑通基礎(chǔ)3DGS再疊加時(shí)間維度注意顯存占用和幀率衡量這個(gè)表里的每一項(xiàng)基本都能在目錄里找到對(duì)應(yīng)章節(jié)。它更像一個(gè)“故障索引”你知道自己遇到了什么再到具體書里找原理和公式就不會(huì)被網(wǎng)上眼花繚亂的碎片文章帶偏。5.2 一個(gè)實(shí)操案例從“渲染異?!钡蕉ㄎ桓蚺e一個(gè)我最近的排查例子來演示目錄怎么用。某天有同事反饋“OpenHarmony畫面渲染異常”表現(xiàn)是應(yīng)用界面偶發(fā)閃爍。按照目錄思路我先把它歸類到“圖形棧/合成”而不是純shader問題。第一步查合成器相關(guān)日志第二步關(guān)掉硬件合成試軟件繪制第三步再排查GPU驅(qū)動(dòng)是否版本不匹配。最終發(fā)現(xiàn)是中間層錯(cuò)誤復(fù)用了緩沖區(qū)的Fence同步信號(hào)導(dǎo)致多幀共用同一塊buffer后內(nèi)容錯(cuò)亂。要是沒有分類目錄我可能會(huì)先一頭扎進(jìn)shader代碼里找半天?,F(xiàn)在我會(huì)先在目錄里定位“同步機(jī)制”的知識(shí)池Vulkan同步的Fence和Semaphore、GPU并行、緩沖區(qū)復(fù)用對(duì)應(yīng)到Real-Time Rendering的GPU架構(gòu)章節(jié)再去查引擎提供的調(diào)試能力。這個(gè)流程不一定適合照抄但思路是一致的任何渲染異常先判斷是幾何、材質(zhì)、光柵化、合成還是前端節(jié)點(diǎn)的問題再選對(duì)應(yīng)的書。5.3 前端渲染里的“書外知識(shí)”不得不承認(rèn)有一類渲染問題在傳統(tǒng)圖形學(xué)書里完全找不到那就是前端框架和瀏覽器本身的渲染機(jī)制。比如React/Vue的路由跳轉(zhuǎn)后組件不渲染可能是Key值變了、v-if條件不滿足和GPU一點(diǎn)關(guān)系都沒有。還有前面說的瀏覽器安全策略攔截嚴(yán)格說是CSP內(nèi)容安全策略不是通常意義上的渲染管線但頁(yè)面確實(shí)“不渲染了”。這部分只能靠官方文檔和源碼。我的目錄里單獨(dú)開了一類“Web與小程序渲染”收錄Vue Router、WebGL、PDF、小程序同層渲染的文檔鏈接。我發(fā)現(xiàn)很多從傳統(tǒng)圖形學(xué)轉(zhuǎn)前端的人容易忽略“瀏覽器主線程和渲染線程是分開的”這個(gè)事實(shí)而很多前端工程師想優(yōu)化WebGL時(shí)又容易在找不到gl.drawArrays的調(diào)用時(shí)機(jī)上卡住。兩撥人對(duì)“渲染”的理解是互補(bǔ)的目錄的價(jià)值就是讓兩邊都知道對(duì)方的底層是什么。6. 常見問題、避坑與持續(xù)更新6.1 新手常問這本書需要全讀嗎“全讀”通常是新手最容易犯的錯(cuò)其實(shí)絕大多數(shù)專業(yè)書不需要全讀。Real-Time Rendering第四版800多頁(yè)你讓我全讀我也做不到更沒必要。PBRT超過1200頁(yè)如果你不是要寫離線渲染器讀前四分之一就很夠用。GPU Gems系列每本都有幾百頁(yè)但每章是獨(dú)立的跳著看毫無心理負(fù)擔(dān)。真正值得從頭讀到尾的反而是一些入門小冊(cè)子比如《Ray Tracing in One Weekend》短到一天能看完卻能把光追主線講清楚。所以我的建議是先定目標(biāo)再定“閱讀深度”。你想看懂UE5的Lumen就圍繞有向距離場(chǎng)、軟件光柵化、屏幕追蹤這3個(gè)關(guān)鍵詞找書里的對(duì)應(yīng)章節(jié)你想給產(chǎn)品圖調(diào)V-Ray就別花時(shí)間讀算法推導(dǎo)直接看目錄里的DCC工作流。買書之前先打開書的目錄你至少要能認(rèn)出其中30%的術(shù)語(yǔ)否則大概率還不到讀這本書的階段。6.2 我踩過的坑第一個(gè)坑是“只讀書不寫代碼”。我有一陣子把Real-Time Rendering讀得很熟面試時(shí)被問“陰影圖分辨率和偏置怎么配合”表面上答得出但真正在Unity里調(diào)Shadow Distance時(shí)還是手忙腳亂。書上的知識(shí)不經(jīng)過渲染器實(shí)驗(yàn)始終是紙面的。所以我后來給目錄里的每本書都附了“配套實(shí)驗(yàn)”哪怕只是打開一個(gè)ShaderToy改幾行也比空讀有效。第二個(gè)坑是“同時(shí)開太多書”。一年前我興致勃勃參加了一個(gè)閱讀計(jì)劃一次推進(jìn)PBRT、GPU Gems、Vulkan Guide三本書結(jié)果每本都停留在前兩章。目錄更新的意義之一就是給自己做減法一段時(shí)間只深讀一本其他書只做索引。第三個(gè)坑是忽略版本。圖形API和引擎的淘汰速度極快老書里的OpenGL 2.0代碼不能直接搬進(jìn)現(xiàn)在的項(xiàng)目但背后的原理仍然成立。更新目錄時(shí)我會(huì)標(biāo)記哪些章節(jié)“重原理、輕版本”哪些代碼只能當(dāng)思路看。6.3 目錄更新計(jì)劃當(dāng)前這版目錄還只是一個(gè)v0.1框架。接下來我會(huì)按“閱讀批次”來更新第一批把Real-Time Rendering里每個(gè)章節(jié)對(duì)應(yīng)的在線資源和實(shí)驗(yàn)樣例補(bǔ)完第二批給PBRT增加構(gòu)建和調(diào)試的小筆記第三批補(bǔ)充Web/小程序渲染的典型問題索引比如路由跳轉(zhuǎn)、PDF textLayer、CSP攔截這類。每更新一次我會(huì)把新增的書或章節(jié)放到“最近新增”小節(jié)給大家做增量參考。如果你在使用這份目錄時(shí)發(fā)現(xiàn)某個(gè)熱詞沒地方放或者某本書的推薦順序不合理歡迎在評(píng)論區(qū)指出來。做目錄這種事一個(gè)人容易盲人摸象多人一起修才會(huì)越來越可靠。我的計(jì)劃是每個(gè)月至少更新一次把新技術(shù)比如三維高斯?jié)姙R、Pico上的4D場(chǎng)景渲染、AI輔助建模加進(jìn)來同時(shí)淘汰已經(jīng)過時(shí)的API細(xì)節(jié)。畢竟“渲染”這個(gè)詞的范圍越來越大目錄也得跟著長(zhǎng)。