WebGL编程指南03-在javaScript程序通过uniform变量向片元着色器传值

1.demo效果

如上图，这个demo实现在黑色区域内点用鼠标点击，会在不同的区域画出不同颜色的小方块，第一象限的画红色方块，第三象限画绿色方块，第二、四象限画蓝色方块。

2 片元着色器的uniform变量

uniform变量是一种被用来从外部着色器传输数据的变量。先介绍一下uniform变量的声明，该跟顶点着色器attribute变量命名规范类似，uniform类型的变量已U开头：<存储限定符><类型><变量名>

3 gl.getUniformLocation()方法

与attribute一样，要通过js获取偏远着色的变量地址可以通过此方法

函数功能：获取由name指定的uniform变量的存储地址
--------------------------------------------------------------------------
调用示例：gl.getUniformLocation(program, name)
--------------------------------------------------------------------------
参数      program             指定包含顶点着色器和片元着色器的着色器程序对象  name               指定想要获取其存储地址的uniform变量名称
--------------------------------------------------------------------------
返回值     non-null            uniform变量的存储地址null              指定的uniform变量不存在，或命名具有gl_或webgl_前缀
--------------------------------------------------------------------------
错  误        INVALID_OPERATION   程序对象未能连接成功INVALID_VALUE     name参数的长度大于uniform变量名的最大长度，默认256字节

示例代码

//获取片元着色器uniform变量u_FragColor的存储地址
const u_FragColor = gl.getUniformLocation(gl.program, 'u_FragColor');

4 gl.uniform4f()方法

与attribute类似，当我们通过getUniformLocation获取地址后，可以通过gl.unform4f将这个值传给uniform

函数功能：将数据v0, v1, v2, v3 传给由location参数指定的uniform变量
---------------------------------------------------------------------------------
调用示例：gl.uniform4f(location, v0, v1, v2, v3)
---------------------------------------------------------------------------------
参数      location            指定将要修改的uniform变量的存储地址  v0                   指定填充uniform变量第一个分量的值v1                  指定填充uniform变量第二个分量的值v2                  指定填充uniform变量第三个分量的值v2                  指定填充uniform变量第四个分量的值
---------------------------------------------------------------------------------
返回值     无
---------------------------------------------------------------------------------
错  误        INVALID_OPERATION   没有当前的program对象，或者location是非法的存储位置

示例代码

//向片元着色器uniform变量u_FragColor传值
gl.uniform4f(u_FragColor, 1.0, 0.0, 0.0, 1.0)

4 gl.uniform4f的同族函数

gl.uniform4f() 方法是一系列同族函数中的一个，该系列函数的任务就是从JavaScript程序中向着色器中的uniform变量传值

函数功能：将数据[1~4个分量]传给由location参数指定的uniform变量
------------------------------------------------------------------------------
gl.uniform1f(location, v0)
gl.uniform2f(location, v0, v1)
gl.uniform3f(location, v0, v1, v2)
gl.uniform4f(location, v0, v1, v2, v3)
------------------------------------------------------------------------------
参数      location            指定将要修改的uniform变量的存储地址  v0,v1,v2,v3          指定传输给uniform变量的四个分量的值
------------------------------------------------------------------------------
返回值     无

友情提示：
gl.uniform1f()只需要传输一个值，这个值将被填充到uniform变量的第一个分量中，第二、第三个分量将被设置为0.0，第四个分量将被设置为1.0，其他同族函数类推

5 demo代码

// 顶点着色器程序
var VSHADER_SOURCE =`attribute vec4 a_Position;attribute float a_Size;void main() {gl_Position = a_Position;gl_PointSize = a_Size;
}`;// 片元着色器程序
var FSHADER_SOURCE =`precision mediump float;uniform vec4 u_color;void main() {gl_FragColor = u_color;
}`;const main = () => {let count = 0.1//获取绘制domconst canvas = document.getElementById('webgl');//获取canvas上下文const gl = canvas.getContext('webgl');//初始化着色器if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {return console.log('Failed to initialize shaders.')}const aPosition = gl.getAttribLocation(gl.program, 'a_Position');const aColor = gl.getUniformLocation(gl.program, 'u_color');const aSize = gl.getAttribLocation(gl.program, 'a_Size');const points = [];const colors = [];const click = (ev, gl, canvas, aPosition) => {//坐标归一化；let x = ev.offsetX;let y = ev.offsetY;x = (x - canvas.height / 2) / (canvas.height / 2);y = (canvas.width / 2 - y) / (canvas.width / 2);points.push(x, y);console.log(x, y)if (x >= 0 && y >= 0) {colors.push([1.0, 0.0, 0.0, 1.0])} else if (x < 0 && y < 0) {colors.push([0.0, 1.0, 0.0, 1.0])} else {colors.push([1.0, 1.0, 1.0, 1.0])}gl.clear(gl.COLOR_BUFFER_BIT);for (let i = 0; i < points.length; i += 2) {const rgba = colors[(i / 2) | 0];console.log('rgba', rgba)gl.vertexAttrib3f(aPosition, points[i], points[i + 1], 0.0);gl.uniform4f(aColor, rgba[0], rgba[1], rgba[2], rgba[3])gl.drawArrays(gl.POINTS, 0, 1)}}canvas.onmousedown = (ev) => {click(ev, gl, canvas, aPosition)}console.log('aPosition', aPosition);gl.vertexAttrib3f(aPosition, 0.0, 0.3, 0.0)// setInterval(() => {//     count += 0.1//     console.log(count);//     gl.clear(gl.COLOR_BUFFER_BIT);//     gl.vertexAttrib3f(aPosition, 0.0, count, 0.0);//     gl.vertexAttrib3f(aPosition, 0.2, count, 0.0);//     //绘制一个点//     gl.drawArrays(gl.POINTS, 0, 1);//     gl.drawArrays(gl.POINTS, 0, 2);// }, 1000)gl.vertexAttrib3f(aPosition, 0.0, 0.2, 0.0);gl.vertexAttrib1f(aSize, 15);//设置canvas的背景色gl.clearColor(0.0, 0.0, 0.0, 1.0);//清空canvasgl.clear(gl.COLOR_BUFFER_BIT);//绘制一个点gl.drawArrays(gl.POINTS, 0, 1);}
main()

WebGL编程指南03-在javaScript程序通过uniform变量向片元着色器传值相关推荐

WebGL入门(四)-在JavaScript程序通过uniform变量向片元着色器传值
在JavaScript程序通过uniform变量向片元着色器传值 1.demo效果 2.相关知识点 2.1 片元着色器中的uniform变量 2.2 gl.getUniformLocation()方法 ...
webGL编程指南实战教程
学习路线: 如果你是在校大学生,有足够的时间去学习:前端>数学(几何+线性代数)>图形学>webgl>shader >threejs>three.js源码如果你是 ...
【《WebGL编程指南》读书笔记-WebGL入门】
<WebGL编程指南>读书笔记目录链接:https://blog.csdn.net/floating_heart/article/details/124001572 第二章 WebGL入 ...
【《WebGL编程指南》读书笔记-颜色与纹理】
本文为读书笔记第五章总目录链接:https://blog.csdn.net/floating_heart/article/details/124001572 本章很长,讨论了前言所述的三个问题,三个 ...
《OpenGL编程指南》笔记八程序式纹理
文章目录第八章程序式纹理 8.1 程序式纹理 8.1.1 规则的花纹条纹砖块 8.1.2 玩具球 8.1.3 晶格 8.1.4 程序式着色方法的总结 8.2凹凸贴图映射 8.2.1 应用程序设 ...
WebGL编程指南11-varying变量，图形装配与光栅化
1.demo效果如上图,绘制了一个顶点不同颜色的三角形.是使用varying变量在顶点着色器给片元着色器传值绘制的图形 2.varying介绍之前已经学习了attribute变量和uniform变 ...
【《WebGL编程指南》读书笔记——着色器和程序对象的准备】
本文为<WebGL编程指南>第九章下半部分读书笔记总目录链接:https://blog.csdn.net/floating_heart/article/details/124001572 ...
【WebGL编程指南】GLSL ES语法基础
[WebGL之巅]20-GLSL ES着色器语言语法详解查看原文:[WebGL之巅]20-GLSL ES着色器语言语法详解对应<WebGL编程指南>第六章 GLSL ES 总览本章知 ...
【WebGL】《WebGL编程指南》读书笔记——第2章
一.前言最近看了<WebGL编程指南>这本书,发现还是很有意思的,故每章阅读后做个笔记. 二.正文 Example1:在canvas中绘制2D矩形 <!DOCTYPE html&g ...