盧偉冰長文解析K60至尊版 對Redmi有著里程碑式的意義
在今天的Redmi后性能時代戰略發布會結束之后，Redmi總經理盧偉冰又帶來了一篇長文，詳解了為什么 Redmi 要開啟后性能時代？為什么選擇和 MediaTek、Pixelworks 深度合作？以及后性
大家好，我是前端西瓜哥。
之前寫了一篇 PixiJS 繪制矩形，簡單說了一下 PixiJS 是怎么繪制矩形的。
《PixiJS 源碼解讀：繪制矩形，底層都做了什么？》
它更多的講解上層的東西，沒花太多筆墨描繪底層渲染的流程。所以我寫了這篇文章，對渲染流程進行補充講解。
PixiJS 版本為 7.2.4。
要求讀者熟悉 WebGL 的基礎知識。
本文會 以繪制設置了填充和描邊的矩形為例子，看底層 WebGL 的調用執行。
業務層代碼：
const app = new PIXI.Application({ width: 500, height: 300, background: "#cc0", //（土黃色）});document.body.appendChild(app.view);const graph = new PIXI.Graphics();graph.beginFill(0xff0044); // 紅色填充色graph.lineStyle({ color: "blue", width: 4 }); // 藍色描邊graph.drawRect(90, 70, 300, 100);app.stage.addChild(graph);繪制結果為：
第一步是創建 gl 對象，上下文類型優先使用 "webgl2"。
如果不支持，會降級為 "webgl"、"experimental-webgl"。
gl = canvas.getContext("webgl2", options);gl 在 renderer 渲染器初始化的時候構建的，可通過 app.renderer.gl 拿到。
定義 頂點著色器 和 片元著色器。
著色器（Shader）是一種類 C 語言 GLSL，用于描述需要繪制的 頂點信息和顏色信息。
首先是 字符串模板，等著根據配置填充成一個完整的著色器代碼片段。
頂點著色器的模板（后面會基于它生成真正可用的著色器）位于 packages/core/src/batch/texture.vert 中。
batch 文件夾都是和 批量繪制 有關的邏輯，批量、減少 draw call 正是 PixiJS 高效繪制的秘訣。
precision highp float;attribute vec2 aVertexPosition;attribute vec2 aTextureCoord;attribute vec4 aColor;attribute float aTextureId;uniform mat3 projectionMatrix;uniform mat3 translationMatrix;uniform vec4 tint;varying vec2 vTextureCoord;varying vec4 vColor;varying float vTextureId;void main(void){ gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); vTextureCoord = aTextureCoord; vTextureId = aTextureId; vColor = aColor * tint;}片元著色器和顏色有關。
varying vec2 vTextureCoord;varying vec4 vColor;varying float vTextureId;uniform sampler2D uSamplers[%count%];void main(void){ vec4 color; %forloop% gl_FragColor = color * vColor;}這里的 %count% 和%forloop% 是占位符，會在之后進行替換。
在 renderer 初始化時，上面的模板會進行一系列的改造，兩個著色器最終轉換為下面的樣子。
頂點著色器（Vertex Shader）和頂點的位置、大小有關。
補充一些簡單注釋說明。
precision highp float; // 浮點數使用高精度#define SHADER_NAME pixi-shader-2precision highp float;attribute vec2 aVertexPosition; // 頂點位置 x 和 yattribute vec2 aTextureCoord; // 紋理坐標，會傳給片元著色器attribute vec4 aColor; // 顏色，rgba，會傳給片元著色器attribute float aTextureId; // 紋理單元 ID，會傳給片元著色器uniform mat3 projectionMatrix; // 投影矩陣uniform mat3 translationMatrix; // 平移變換矩陣uniform vec4 tint; // 改變顏色，實現濾鏡效果，會和 aColor 相乘傳給片元著色器varying vec2 vTextureCoord; // varing 都是用來傳遞的varying vec4 vColor;varying float vTextureId;void main(void){ // 進行一系列矩陣乘法運算，將最后的點傳給內置的著色器變量，設置點的位置 gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); // 下面都是要傳給片元著色器的變量 vTextureCoord = aTextureCoord; vTextureId = aTextureId; vColor = aColor * tint;}片元著色器（Fragment Shader）用于描述頂點圍成區域的像素顏色。
下面是片元著色器的最終代碼，同樣我會加一些注釋說明
precision mediump float;#define SHADER_NAME pixi-shader-2varying vec2 vTextureCoord; // 紋理坐標，varying vec4 vColor; // 顏色varying float vTextureId; // 使用哪一個紋理采樣器uniform sampler2D uSamplers[16]; // 16 個紋理采樣器void main(void){ vec4 color; if(vTextureId < 0.5) { // 從紋理采樣器（比如圖片轉換過來的像素點集合）中，提取特定位置的像素點 color = texture2D(uSamplers[0], vTextureCoord); }else if(vTextureId < 1.5) { color = texture2D(uSamplers[1], vTextureCoord); } // ... } else { color = texture2D(uSamplers[15], vTextureCoord); } // 疊加顏色值，和紋理采樣器取得的顏色值，賦值給片元著色器內置變量 gl_FragColor = color * vColor;}如果沒有設置紋理，PixiJS 會給一個默認的兜底用紋理對象，一個 16x16 的白色方形。
這兩個著色器片段會保存到 Shader 實例中，放到 app.render.shader 下。
第一次調用 renderer 渲染器 render 方法時，PixiJS 會 創建頂點著色器對象和片元著色器對象。
這些邏輯是在 generateProgram 方法中實現的。該方法的核心代碼：
function generateProgram(gl, program) { //（1）創建頂點著色器對象、片元著色器對象等 const glVertShader = compileShader(gl, gl.VERTEX_SHADER, program.vertexSrc); const glFragShader = compileShader( gl, gl.FRAGMENT_SHADER, program.fragmentSrc ); // 創建程序對象 const webGLProgram = gl.createProgram(); //（2）綁定 attribute // keys 為 ['aColor', 'aTextureCoord', 'aTextureId', 'aVertexPosition'] for (let i = 0; i < keys.length; i++) { program.attributeData[keys[i]].location = i; // 將屬性綁定到頂點著色器的制定位置 // 如：gl.bindAttribLocation(gl.program, 0, "aColor"); gl.bindAttribLocation(webGLProgram, i, keys[i]); } // 刪除著色器對象，釋放內存 gl.deleteShader(glVertShader); gl.deleteShader(glFragShader); //（3）綁定 uniformLocation（準確來說是拿地址，還沒正式綁定） // 屬性（對應 i 變量）有：projectionMatrix、tint、translationMatrix、uSamplers for (const i in program.uniformData) { const data = program.uniformData[i]; uniformData[i] = { location: gl.getUniformLocation(webGLProgram, i), value: defaultValue(data.type, data.size), }; } const glProgram = new GLProgram(webGLProgram, uniformData); return glProgram;}分成三個主要步驟。
創建著色器對象、程序對象。
compileShader 實現：
function compileShader(gl, type, src) { const shader = gl.createShader(type); gl.shaderSource(shader, src); gl.compileShader(shader); gl.attachShader(webGLProgram, glVertShader); gl.attachShader(webGLProgram, glFragShader); // ... gl.linkProgram(webGLProgram); return shader;}綁定 attribute 類型的變量 （但此時還沒傳入 Buffer 數據，只是設置了如何訪問等操作）；
綁定 uniform 類型的變量。
之后在 app.renderer.shader.bind 方法內執行下面代碼，應用剛剛創建的程序對象。
this.gl.useProgram(glProgram.program);前面做的是準備工作，編譯著色器。
接下來就是渲染階段。
PIXI.Ticker 定時器會在渲染下一幀前調用 renderer.render 方法，進入 WebGL 的渲染流程。
首先是清空畫布。
// 入口方法：renderer.renderTexture.clearclass ObjectRendererSystem { render(displayObject, options) { // ... // (1) 清空畫布，并指定顏色 renderer.renderTexture.clear(); // ... }}它會執行 clear 方法
class FramebufferSystem { clear(r, g, b, a, mask = BUFFER_BITS.COLOR | BUFFER_BITS.DEPTH) { const { gl } = this; // 背景色 #cc0 轉換為 rbga 格式： // (0.800000011920929, 0.800000011920929, 0, 1) gl.clearColor(r, g, b, a); // 清空顏色和深度緩存 gl.clear(mask); }}遞歸圖形樹（app.stage），調用它們（繼承了 IRenderableObject 接口類型）的 render 方法，它們會拿到 renderer 對象，然后執行自己的渲染邏輯。
// app.stage 是 Container 實例class Container extends DisplayObject { render(renderer) { // ... this._render(renderer); // 真正的渲染邏輯 for (let i = 0, j = this.children.length; i < j; ++i) { this.children[i].render(renderer); } }}對于前文的示例代碼，會分析矩形屬性，構建頂點和片元數據，然后執行 WebGL 的繪制 API。
先基于 x、y、width、height 計算出矩形的 4 個頂點放到 points。
然后進行三角化。三角化就是將圖形轉換為對應的三角形的組合。
所謂圖形的渲染，其實就是繪制一個個小的三角形，組成特定的形狀。這些三角形的點，根據不同圖形（比如矩形和圓形），需要用不同算法去計算出來，然后把數據通過 WebGL 命令交給 GPU，讓它幫我們繪制出來。
首先是填充的三角化（對應 buildRectangle.triangulate() ）。
基于前面的 4 個點得到填充塊的 4 個點，并設置對應的索引值 indices，之后調用 gl.drawElements() 需要用到。
接著是描邊的三角化（對應 buildLine()）。
下面是繪制描邊的代碼片段：
PixiJS 的計算邏輯很復雜，這是因為涉及到連接方式、末端樣式的情況。
同樣，也要計算它的頂點、索引、紋理坐標。
西瓜哥我將最終的填充和描邊產生的點，做了一下可視化。
用的是 desmos 可視化工具，這里給一下這個可視化鏈接：
https://www.desmos.com/calculator/r3dwqeweu2?lang=zh-CN。
最后計算好的三角化數據會保存到 graph 對象的 batches 數組下（batches 表示要批量處理的意思）。
batch 對象包括頂點坐標（vertexData）、顏色（_batchRGB）、索引（indices）和紋理坐標（uvs）。
下面是填充色對應的數據：
這里產生了兩個 batch 對象（對應填充和描邊），然后遍歷傳給 BatchRender 類的 render 方法。說是 render 方法，其實并不立即 render，而是將 batch 對象的數據解讀和保存起來，之后 flush 時才正式將數據加到 WebGL 里。
這些屬性會組合拼裝在一個類型數組里。6 個一組，逐頂點繪制。
傳完后，會調用 BatchRender 類的 flush 方法，將頂點數據和索引數組通過 gl.bufferData() 進行綁定。
在 ShaderSystem 類的 syncUniforms 中，會依次設置好各個 uniform 變量：tint、translationMatrix、uSamplers、projectionMatrix。
class ShaderSystem { syncUniforms(group, glProgram, syncData) { // 生成同步 uniform 的函數（不同 uniform 的函數不同） const syncFunc = group.syncUniforms[this.shader.program.id] || this.createSyncGroups(group); // 同步！ syncFunc(glProgram.uniformData, group.uniforms, this.renderer, syncData); } createSyncGroups(group) { const id = this.getSignature(group, this.shader.program.uniformData, "u"); if (!this.cache[id]) { this.cache[id] = generateUniformsSync(group, this.shader.program.uniformData); } group.syncUniforms[this.shader.program.id] = this.cache[id]; return group.syncUniforms[this.shader.program.id]; } }下面是設置 tint 的方法：
綁定紋理。
class TextureSystem { bind(texture, location = 0) { const { gl } = this; // 開啟 gl.activeTexture(gl.TEXTURE0 + location); // ... gl.bindTexture(texture.target, glTexture.texture); // ... }}因為示例并不繪制圖片，PixiJS 會提供默認的的白色紋理對象（所有值都是 1），這樣顏色值和其相乘，結果還是原來的顏色值。
最后調用 drawBatches 進行繪制。
drawBatches() { const dcCount = this._dcIndex; const { gl, state: stateSystem } = this.renderer; const drawCalls = _BatchRenderer._drawCallPool; let curTexArray = null; for (let i = 0; i < dcCount; i++) { const { texArray, type, size, start, blend } = drawCalls[i]; if (curTexArray !== texArray) { curTexArray = texArray; // 剛剛提到的紋理綁定邏輯 this.bindAndClearTexArray(texArray); } this.state.blendMode = blend; stateSystem.set(this.state); // 繪制 API gl.drawElements(type, size, gl.UNSIGNED_SHORT, start * 2); }}最后我們就繪制出一個有填充和描邊的矩形了。
之后 Ticker 會不斷地在繪制下一幀時調用 renderer 的 render 方法進行渲染，如果圖形沒改變（比如通過 dirtyId 和 cacheDirty 是否相同判斷），我們會跳過三角化的環節，使用緩存好的數據去繪制渲染。
PixiJS 繪制圖形使用了 WebGL，為了利用 GPU 的并行能力，需要給著色器一次性提供盡可能多的頂點和顏色信息。
PixiJS 提供了一些基礎圖形，比如矩形。繪制時會根據圖形屬性信息進行三角化，最后將所有的信息組合起來，一次性提供給 WebGL。
這篇文章其實斷斷續續寫了好久，PixiJS 里的彎彎道道挺多的，經常調試了半天就是找不著北了，一度擱置。最后還是硬著頭皮不斷地調試和思考，總算把這篇文章結束掉了。
本文鏈接：http://www.www897cc.com/showinfo-26-12747-0.htmlPixiJS 源碼解讀：繪制矩形的渲染過程講解
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： Java 集合框架超詳細！
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號