這是設(shè)置片元著色器的 Float 精度為高精度。因為現(xiàn)在桌面端瀏覽器性能都很好，我們直接設(shè)置高精度即可。此外還有 Mediump 中等精度，和 Lowp 低精度，適合用在一些性能羸弱的設(shè)備上。精度越低，渲染的效果越差。
大家好，我是前端西瓜哥，上一章我們用 attribute 變量，從外部設(shè)置頂點著色器中點的位置信息。
《??一起學(xué) WebGL：動態(tài)繪制點??》
這次我們把目光投向片元著色器，通過片元著色器修改點的顏色。
片元著色器
片元著色器的代碼改一下：
const fragmentShaderSrc = `
precision mediump float;
uniform vec4 u_FragColor;
void main() {
gl_FragColor = u_FragColor;
}
`;
類似頂點著色器的 attribute，我們在這里聲明了一個 uniform 變量 u_FragColor，同樣我們使用過的是 vec4 類型，4 個浮點數(shù)組成的結(jié)構(gòu)體。
片元著色器中不能設(shè)置 attribute 類型的變量，只能用 uniform，或者也能用 varing 變量，支持從頂點著色器傳遞數(shù)據(jù)到片元著色器，這個以后西瓜哥會專門講解。
我們會將這個變量賦值給 WebGL 片元著色器的內(nèi)置屬性 gl_FragColor，確定圖形的顏色。
此外，因為使用了變量，所以頂部要加一個 precision highp float; 的玩意。
這是設(shè)置片元著色器的 float 精度為高精度。因為現(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); // 綠色
西瓜哥這里通過 gl.getUniformLocation 方法獲取對應(yīng)程序?qū)ο笾衅鞯拿麨?u_FragColor 的 uniform 變量的地址。
然后通過 gl.uniform4f 給這個 uniform 類型賦值。
WebGL 中的顏色分量取值范圍是 0 到 1，對應(yīng)的是一個 比值，比如 vec4(1.0, 0.5, 0, 0.5)，其實就等價于 rbga(255, 255*0.5, 0, 0.5) 。
渲染結(jié)果：
代碼實現(xiàn)：
/**
* wegbl 繪制一個點
*/
/** @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)建頂點渲染器
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;
/** 修改頂點著色器的 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);
// 繪制點
gl.drawArrays(gl.POINTS, 0, 1);
Demo 地址：
https://codesandbox.io/s/xp81lh?file=/index.js。
這個 demo 加了點料，寫了個定時器不斷修改顏色的函數(shù)，將底部的 // changeColor(); 的注釋取消掉即可看到顏色變化的效果。
結(jié)尾
下一節(jié)我們就真正來繪制三角形了。復(fù)雜的三維物體，都可以通過一個個很小的三角形組成，三角形越多，三維物體就越精細(xì)。
