這是設(shè)置片元著色器的 Float 精度為高精度。因?yàn)楝F(xiàn)在桌面端瀏覽器性能都很好，我們直接設(shè)置高精度即可。此外還有 Mediump 中等精度，和 Lowp 低精度，適合用在一些性能羸弱的設(shè)備上。精度越低，渲染的效果越差。
大家好，我是前端西瓜哥，上一章我們用 attribute 變量，從外部設(shè)置頂點(diǎn)著色器中點(diǎn)的位置信息。
《??一起學(xué) WebGL：動(dòng)態(tài)繪制點(diǎn)??》
這次我們把目光投向片元著色器，通過(guò)片元著色器修改點(diǎn)的顏色。
片元著色器
片元著色器的代碼改一下：
const fragmentShaderSrc = `
precision mediump float;
uniform vec4 u_FragColor;
void main() {
gl_FragColor = u_FragColor;
}
`;
類似頂點(diǎn)著色器的 attribute，我們?cè)谶@里聲明了一個(gè) uniform 變量 u_FragColor，同樣我們使用過(guò)的是 vec4 類型，4 個(gè)浮點(diǎn)數(shù)組成的結(jié)構(gòu)體。
片元著色器中不能設(shè)置 attribute 類型的變量，只能用 uniform，或者也能用 varing 變量，支持從頂點(diǎn)著色器傳遞數(shù)據(jù)到片元著色器，這個(gè)以后西瓜哥會(huì)專門講解。
我們會(huì)將這個(gè)變量賦值給 WebGL 片元著色器的內(nèi)置屬性 gl_FragColor，確定圖形的顏色。
此外，因?yàn)槭褂昧俗兞浚皂敳恳右粋€(gè) precision highp float; 的玩意。
這是設(shè)置片元著色器的 float 精度為高精度。因?yàn)楝F(xiàn)在桌面端瀏覽器性能都很好，我們直接設(shè)置高精度即可。此外還有 mediump 中等精度，和 lowp 低精度，適合用在一些性能羸弱的設(shè)備上。精度越低，渲染的效果越差。
然后就是給我們聲明的 u_FragColor 傳值了，在 JavaScript 里。
修改顏色
/** 修改片元著色器的 uniform **/
const u_FragColor = gl.getUniformLocation(gl.program, "u_FragColor");
gl.uniform4f(u_FragColor, 1, 1, 0, 1); // 綠色
西瓜哥這里通過(guò) gl.getUniformLocation 方法獲取對(duì)應(yīng)程序?qū)ο笾衅鞯拿麨?u_FragColor 的 uniform 變量的地址。
然后通過(guò) gl.uniform4f 給這個(gè) uniform 類型賦值。
WebGL 中的顏色分量取值范圍是 0 到 1，對(duì)應(yīng)的是一個(gè) 比值，比如 vec4(1.0, 0.5, 0, 0.5)，其實(shí)就等價(jià)于 rbga(255, 255*0.5, 0, 0.5) 。
渲染結(jié)果：
代碼實(shí)現(xiàn)：
/**
* wegbl 繪制一個(gè)點(diǎn)
*/
/** @type {HTMLCanvasElement} */
const canvas = document.querySelector("canvas");
const gl = canvas.getContext("webgl");
const vertexShaderSrc = `
attribute vec4 a_Position;
void main() {
gl_Position = a_Position;
gl_PointSize = 30.0;
}
`;
const fragmentShaderSrc = `
precision highp float;
uniform vec4 u_FragColor;
void main() {
gl_FragColor = u_FragColor;
}
`;
/**** 渲染器生成處理 ****/
// 創(chuàng)建頂點(diǎn)渲染器
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSrc);
gl.compileShader(vertexShader);
// 創(chuàng)建片元渲染器
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSrc);
gl.compileShader(fragmentShader);
// 程序?qū)ο?/span>
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
gl.program = program;
/** 修改頂點(diǎn)著色器的 attribute */
const a_Position = gl.getAttribLocation(gl.program, "a_Position");
gl.vertexAttrib3f(a_Position, 0, 0, 0);
/** 【本章新增的代碼】修改片元著色器的 uniform **/
const u_FragColor = gl.getUniformLocation(gl.program, "u_FragColor");
gl.uniform4f(u_FragColor, 0, 1, 0, 1);
/** 畫布繪制 **/
// 清空畫布，并指定顏色
gl.clearColor(0, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
// 繪制點(diǎn)
gl.drawArrays(gl.POINTS, 0, 1);
Demo 地址：
https://codesandbox.io/s/xp81lh?file=/index.js。
這個(gè) demo 加了點(diǎn)料，寫了個(gè)定時(shí)器不斷修改顏色的函數(shù)，將底部的 // changeColor(); 的注釋取消掉即可看到顏色變化的效果。
結(jié)尾
下一節(jié)我們就真正來(lái)繪制三角形了。復(fù)雜的三維物體，都可以通過(guò)一個(gè)個(gè)很小的三角形組成，三角形越多，三維物體就越精細(xì)。
