建站
咨詢
售后
建站咨詢
新聞中心
大家好，我是前端西瓜哥，上一章我們用 attribute 變量，從外部設置頂點著色器中點的位置信息。
我們提供的服務有：網站設計制作、成都網站建設、微信公眾號開發(fā)、網站優(yōu)化、網站認證、沙坪壩ssl等。為近千家企事業(yè)單位解決了網站和推廣的問題。提供周到的售前咨詢和貼心的售后服務，是有科學管理、有技術的沙坪壩網站制作公司
《??一起學 WebGL：動態(tài)繪制點??》
這次我們把目光投向片元著色器，通過片元著色器修改點的顏色。
片元著色器
片元著色器的代碼改一下：
const fragmentShaderSrc = `
precision mediump float;
uniform vec4 u_FragColor;
void main() {
gl_FragColor = u_FragColor;
}
`;
類似頂點著色器的 attribute，我們在這里聲明了一個 uniform 變量 u_FragColor，同樣我們使用過的是 vec4 類型，4 個浮點數組成的結構體。
片元著色器中不能設置 attribute 類型的變量，只能用 uniform，或者也能用 varing 變量，支持從頂點著色器傳遞數據到片元著色器，這個以后西瓜哥會專門講解。
我們會將這個變量賦值給 WebGL 片元著色器的內置屬性 gl_FragColor，確定圖形的顏色。
此外，因為使用了變量，所以頂部要加一個 precision highp float; 的玩意。
這是設置片元著色器的 float 精度為高精度。因為現在桌面端瀏覽器性能都很好，我們直接設置高精度即可。此外還有 mediump 中等精度，和 lowp 低精度，適合用在一些性能羸弱的設備上。精度越低，渲染的效果越差。
然后就是給我們聲明的 u_FragColor 傳值了，在 JavaScript 里。
修改顏色
/** 修改片元著色器的 uniform **/
const u_FragColor = gl.getUniformLocation(gl.program, "u_FragColor");
gl.uniform4f(u_FragColor, 1, 1, 0, 1); // 綠色
西瓜哥這里通過 gl.getUniformLocation 方法獲取對應程序對象中片元著色器的名為 u_FragColor 的 uniform 變量的地址。
然后通過 gl.uniform4f 給這個 uniform 類型賦值。
WebGL 中的顏色分量取值范圍是 0 到 1，對應的是一個 比值，比如 vec4(1.0, 0.5, 0, 0.5)，其實就等價于 rbga(255, 255*0.5, 0, 0.5) 。
渲染結果：
代碼實現：
/**
* 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);
// 程序對象
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 地址：
這個 demo 加了點料，寫了個定時器不斷修改顏色的函數，將底部的 // changeColor(); 的注釋取消掉即可看到顏色變化的效果。
結尾
下一節(jié)我們就真正來繪制三角形了。復雜的三維物體，都可以通過一個個很小的三角形組成，三角形越多，三維物體就越精細。
網站名稱：一起學WebGL：改變點的顏色
當前地址：http://www.dlmjj.cn/article/djeoeps.html
