首先我们要知道，限定颜色变量的限定符叫uniform。
uniform 翻译过来是一致、统一的意思。
接下来咱们说一下用js 控制顶点颜色的步骤。
1、用js控制顶点颜色的步骤
1.在片元着色器里把控制顶点颜色的变量暴露出来。
<script id="fragmentShader" type="x-shader/x-fragment">
precision mediump float;
uniform vec4 u_FragColor;
void main() {
gl_FragColor = u_FragColor;
}
</script>
上面的uniform 就是咱们刚才说过的限定符，vec4 是4维的变量类型，u_FragColor 就是变量名。
这里还要注意一下，第一行的precision mediump float 是对浮点数精度的定义，mediump 是中等精度的意思，这个必须要有，不然画不出东西来。
2.在js 中获取片元着色器暴露出的uniform 变量
const u_FragColor=gl.getUniformLocation(gl.program,'u_FragColor');
上面的getUniformLocation() 方法就是用于获取片元着色器暴露出的uniform 变量的，其第一个参数是程序对象，第二个参数是变量名。这里的参数结构和获取attribute 变量的getAttributeLocation() 方法是一样的。
3.修改uniform 变量
gl.uniform4f(u_FragColor,1.0,1.0,0.0,1.0);
用js 控制顶点的颜色的基本步骤就是这样，其整体思路和控制顶点点位是一样的。
下面为整体代码
<!--顶点着色器-->
<script id="vertexShader" type="x-shader/x-vertex">
attribute vec4 a_position;
attribute float a_pointSize;
void main() {
gl_Position = a_position;// 顶点位置
gl_PointSize = a_pointSize;// 顶点大小
}
</script>
<!--片元着色器-->
<script id="fragmentShader" type="x-shader/x-fragment">
precision mediump float;
uniform vec4 u_FragColor;
void main() {
gl_FragColor = u_FragColor;// 片元颜色
}
</script>
<script type="module">
//在js中获取canvas画布
import {initShaders} from "../utils.js"
const canvas = document.getElementById("canvas");
// 直接设置在canvas的属性上
canvas.width = window.innerWidth * 0.8;
canvas.height = window.innerHeight * 0.6;
// 获取webgl 上下文
const gl = canvas.getContext("webgl");
// 获取顶点着色器文本
const vsSource = document.getElementById("vertexShader").innerText;
// 获取片元着色器文本
const fsSource = document.getElementById("fragmentShader").innerText;
// 初始化着色器
initShaders(gl, vsSource, fsSource);
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
const pointArray = [];
// 获取鼠标在 canvas 画布中的 css 位置
canvas.addEventListener('click', evt => {
const {clientX, clientY} = evt;
// 获取画布的原点位置
const {left, top, width, height} = canvas.getBoundingClientRect();
// 计算鼠标点击位置在画布的相对坐标
const [cssX, cssY] = [clientX - left, clientY - top];
/**
* 1.解决坐标原点的差异
* [halfWidth, halfHeight] canvas 画布的中心
* [XBaseCenter, YBaseCenter] 鼠标位置减去画布的中心位，得到鼠标基于画布的位置
*/
const [halfWidth, halfHeight] = [width / 2, height / 2];
const [XBaseCenter, YBaseCenter] = [cssX - halfWidth, cssY - halfHeight];
/**
* 2. 解决Y方向的差异
* 因为WebGL的Y轴和 canvas 2d 的Y轴方向相反，所以对Y轴取反
*/
const yBaseCenterTop = -YBaseCenter;
/**
* 3.解决坐标基底的差异
* 由于canvas 2d的坐基底的两个分量分别是 1PX，而WebGL的坐标基底的两个分量是画布的宽高
* 所以需要通过求比值获取
*/
const [x, y] = [XBaseCenter / halfWidth, yBaseCenterTop / halfHeight];
pointArray.push({
x: x,
y: y,
size: getRandomInt(10, 60),
raga: { r:1.0, g:1.0, b:0.0, a:1.0 }
})
renderPoint();
});
/**
* @description: 绘制点位
* @date 2024/7/25 11:39
* @version 1.0
*/
const renderPoint = () => {
gl.clear(gl.COLOR_BUFFER_BIT);
// 顶点位置
const a_position = gl.getAttribLocation(gl.program, 'a_position');
// 顶点属性
const a_pointSize = gl.getAttribLocation(gl.program, 'a_pointSize');
// 在js中获取片元着色器暴漏处的 uniform 变量
const u_FragColor = gl.getUniformLocation(gl.program, 'u_FragColor');
pointArray.forEach(({x, y, size, raga}) => {
console.log(raga)
gl.vertexAttrib2f(a_position, x, y);
gl.vertexAttrib1f(a_pointSize, size);
gl.uniform4f(u_FragColor, raga.r, raga.g, raga.b, raga.a);
gl.drawArrays(gl.POINTS, 0, 1);
})
}
const getRandomInt = (min, max) => {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
</script>
其中 utils.js 代码如下：
/**
* 初始化着色器
* 功能：解析着色器文本，整合到程序对象里，关联webgl上下文对象，实现两种语言的相互通信
*/
function initShaders(gl, vsSource, fsSource) {
// 创建程序对象
const program = gl.createProgram();
// 建立顶点着色器对象
const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
// 建立片元着色器对象
const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
//把顶点着色对象装进程序对象中
gl.attachShader(program, vertexShader);
//把片元着色对象装进程序对象中
gl.attachShader(program, fragmentShader);
//连接webgl上下文对象和程序对象
gl.linkProgram(program);
//启动程序对象
gl.useProgram(program);
//将程序对象挂到上下文对象上
gl.program = program;
return true;
}
function loadShader(gl, type, source) {
// 根据着色类型，建立着色器对象
const shader = gl.createShader(type);
// 将着色器源文件传入着色器对象中
gl.shaderSource(shader, source);
//编译着色器对象
gl.compileShader(shader);
// 返回着色器对象
return shader;
}
export { initShaders };
知道了这个原理后，我们就可以用鼠标随机改变顶点的颜色。
<!--顶点着色器-->
<script id="vertexShader" type="x-shader/x-vertex">
attribute vec4 a_position;
attribute float a_pointSize;
void main() {
gl_Position = a_position;// 顶点位置
gl_PointSize = a_pointSize;// 顶点大小
}
</script>
<!--片元着色器-->
<script id="fragmentShader" type="x-shader/x-fragment">
precision mediump float;
uniform vec4 u_FragColor;
void main() {
gl_FragColor = u_FragColor; // 片元颜色
}
</script>
<script type="module">
//在js中获取canvas画布
import {initShaders} from "../utils.js"
const canvas = document.getElementById("canvas");
// 直接设置在canvas的属性上
canvas.width = window.innerWidth * 0.8;
canvas.height = window.innerHeight * 0.6;
// 获取webgl 上下文
const gl = canvas.getContext("webgl");
// 获取顶点着色器文本
const vsSource = document.getElementById("vertexShader").innerText;
// 获取片元着色器文本
const fsSource = document.getElementById("fragmentShader").innerText;
// 初始化着色器
initShaders(gl, vsSource, fsSource);
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
const pointArray = [];
// 获取鼠标在 canvas 画布中的 css 位置
canvas.addEventListener('click', evt => {
const {clientX, clientY} = evt;
// 获取画布的原点位置
const {left, top, width, height} = canvas.getBoundingClientRect();
// 计算鼠标点击位置在画布的相对坐标
const [cssX, cssY] = [clientX - left, clientY - top];
/**
* 1.解决坐标原点的差异
* [halfWidth, halfHeight] canvas 画布的中心
* [XBaseCenter, YBaseCenter] 鼠标位置减去画布的中心位，得到鼠标基于画布的位置
*/
const [halfWidth, halfHeight] = [width / 2, height / 2];
const [XBaseCenter, YBaseCenter] = [cssX - halfWidth, cssY - halfHeight];
/**
* 2. 解决Y方向的差异
* 因为WebGL的Y轴和 canvas 2d 的Y轴方向相反，所以对Y轴取反
*/
const yBaseCenterTop = -YBaseCenter;
/**
* 3.解决坐标基底的差异
* 由于canvas 2d的坐基底的两个分量分别是 1PX，而WebGL的坐标基底的两个分量是画布的宽高
* 所以需要通过求比值获取
*/
const [x, y] = [XBaseCenter / halfWidth, yBaseCenterTop / halfHeight];
pointArray.push({
x: x,
y: y,
size: getRandomInt(10, 60),
raga: getRandomRGBA(),
})
renderPoint();
});
/**
* @description: 绘制点位
* @date 2024/7/25 11:39
* @version 1.0
*/
const renderPoint = () => {
gl.clear(gl.COLOR_BUFFER_BIT);
// 顶点位置
const a_position = gl.getAttribLocation(gl.program, 'a_position');
// 顶点属性
const a_pointSize = gl.getAttribLocation(gl.program, 'a_pointSize');
// 在js中获取片元着色器暴漏处的 uniform 变量
const u_FragColor = gl.getUniformLocation(gl.program, 'u_FragColor');
pointArray.forEach(({x, y, size, raga}) => {
console.log(raga)
gl.vertexAttrib2f(a_position, x, y);
gl.vertexAttrib1f(a_pointSize, size);
gl.uniform4f(u_FragColor, raga.r, raga.g, raga.b, raga.a);
gl.drawArrays(gl.POINTS, 0, 1);
})
}
const getRandomInt = (min, max) => {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
const getRandomRGBA = () => {
return {
r: Math.random(),
g: Math.random(),
b: Math.random(),
a: Math.random().toFixed(2),
}
}
</script>
在上面的代码中，我们使用uniform4fv() 修改的顶点颜色，类似的代码结构咱们之前提到过，在这里再给大家详细介绍一下。
2、nuiform4fv()方法
我们在改变uniform 变量的时候，既可以用uniform4f() 方法一个个的写参数，也可以用uniform4fv() 方法传递类型数组。
- uniform4f 中，4 是有4个数据，f 是float 浮点类型，在我们上面的例子里就是r、g、b、a 这四个颜色数据。
- uniform4fv 中，4f 的意思和上面一样，v 是vector 矢量的意思，这在数学里就是向量的意思。由之前的4f
可知，这个向量由4个浮点类型的分量构成。
在上面的案例中，我们可以知道，在修改uniform变量的时候，这两种写法是一样的：
gl.uniform4f(u_FragColor,1.0,1.0,0.0,1.0);
//等同于
const color=new Float32Array([1.0,1.0,0.0,1.0]);
gl.uniform4fv(u_FragColor,color);
uniform4f() 和uniform4fv() 也有着自己的同族方法，其中的4 可以变成1|2|3。
uniform4fv() 方法的第二个参数必须是Float32Array 数组，不要使用普通的Array 对象。
Float32Array 是一种32 位的浮点型数组，它在浏览器中的运行效率要比普通的Array 高很多
完成代码如下：
- demo03-用js控制顶点颜色.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>WebGL 用js控制顶点颜色</title>
</head>
<style type="text/css">
html,
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
overflow: hidden; /* 防止滚动条 */
}
.body-canvas {
margin-top: 5%;
margin-left: 5%;
padding: 0;
display: block; /* 防止底部空隙 */
}
</style>
<body>
<canvas id="canvas" class="body-canvas"></canvas>
<!--顶点着色器-->
<script id="vertexShader" type="x-shader/x-vertex">
attribute vec4 a_position;
attribute float a_pointSize;
void main() {
gl_Position = a_position;// 顶点位置
gl_PointSize = a_pointSize;// 顶点大小
}
</script>
<!--片元着色器-->
<script id="fragmentShader" type="x-shader/x-fragment">
precision mediump float;
uniform vec4 u_FragColor;
void main() {
gl_FragColor = u_FragColor; // 片元颜色
}
</script>
<script type="module">
//在js中获取canvas画布
import {initShaders} from "../utils.js"
const canvas = document.getElementById("canvas");
// 直接设置在canvas的属性上
canvas.width = window.innerWidth * 0.8;
canvas.height = window.innerHeight * 0.6;
// 获取webgl 上下文
const gl = canvas.getContext("webgl");
// 获取顶点着色器文本
const vsSource = document.getElementById("vertexShader").innerText;
// 获取片元着色器文本
const fsSource = document.getElementById("fragmentShader").innerText;
// 初始化着色器
initShaders(gl, vsSource, fsSource);
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
const pointArray = [];
// 获取鼠标在 canvas 画布中的 css 位置
canvas.addEventListener('click', evt => {
const {clientX, clientY} = evt;
// 获取画布的原点位置
const {left, top, width, height} = canvas.getBoundingClientRect();
// 计算鼠标点击位置在画布的相对坐标
const [cssX, cssY] = [clientX - left, clientY - top];
/**
* 1.解决坐标原点的差异
* [halfWidth, halfHeight] canvas 画布的中心
* [XBaseCenter, YBaseCenter] 鼠标位置减去画布的中心位，得到鼠标基于画布的位置
*/
const [halfWidth, halfHeight] = [width / 2, height / 2];
const [XBaseCenter, YBaseCenter] = [cssX - halfWidth, cssY - halfHeight];
/**
* 2. 解决Y方向的差异
* 因为WebGL的Y轴和 canvas 2d 的Y轴方向相反，所以对Y轴取反
*/
const yBaseCenterTop = -YBaseCenter;
/**
* 3.解决坐标基底的差异
* 由于canvas 2d的坐基底的两个分量分别是 1PX，而WebGL的坐标基底的两个分量是画布的宽高
* 所以需要通过求比值获取
*/
const [x, y] = [XBaseCenter / halfWidth, yBaseCenterTop / halfHeight];
pointArray.push({
x: x,
y: y,
size: getRandomInt(10, 60),
raga: getRandomRGBA(),
})
renderPoint();
});
/**
* @description: 绘制点位
* @author Meiduo Ke
* @date 2024/7/25 11:39
* @version 1.0
*/
const renderPoint = () => {
gl.clear(gl.COLOR_BUFFER_BIT);
// 顶点位置
const a_position = gl.getAttribLocation(gl.program, 'a_position');
// 顶点属性
const a_pointSize = gl.getAttribLocation(gl.program, 'a_pointSize');
// 在js中获取片元着色器暴漏处的 uniform 变量
const u_FragColor = gl.getUniformLocation(gl.program, 'u_FragColor');
pointArray.forEach(({x, y, size, raga}) => {
gl.vertexAttrib2f(a_position, x, y);
gl.vertexAttrib1f(a_pointSize, size);
// gl.uniform4f(u_FragColor, raga.r, raga.g, raga.b, raga.a);
// 使用uniform4fv() 方法
// Float32Array 是一种32 位的浮点型数组，它在浏览器中的运行效率要比普通的Array 高很多
const colors = new Float32Array([raga.r, raga.g, raga.b, raga.a]);
gl.uniform4fv(u_FragColor, colors);
gl.drawArrays(gl.POINTS, 0, 1);
})
}
const getRandomInt = (min, max) => {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
const getRandomRGBA = () => {
return {
r: Math.random(),
g: Math.random(),
b: Math.random(),
a: Math.random().toFixed(2),
}
}
</script>
</body>
</html>
utils.js
/**
* 初始化着色器
* 功能：解析着色器文本，整合到程序对象里，关联webgl上下文对象，实现两种语言的相互通信
*/
function initShaders(gl, vsSource, fsSource) {
// 创建程序对象
const program = gl.createProgram();
// 建立顶点着色器对象
const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
// 建立片元着色器对象
const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
//把顶点着色对象装进程序对象中
gl.attachShader(program, vertexShader);
//把片元着色对象装进程序对象中
gl.attachShader(program, fragmentShader);
//连接webgl上下文对象和程序对象
gl.linkProgram(program);
//启动程序对象
gl.useProgram(program);
//将程序对象挂到上下文对象上
gl.program = program;
return true;
}
function loadShader(gl, type, source) {
// 根据着色类型，建立着色器对象
const shader = gl.createShader(type);
// 将着色器源文件传入着色器对象中
gl.shaderSource(shader, source);
//编译着色器对象
gl.compileShader(shader);
// 返回着色器对象
return shader;
}
export { initShaders };
本文章为B站 李伟_Li慢慢 关于《WebGL+图形学》课程的学习笔记
详情请参考：https://juejin.cn/post/7067369376697024548
扫一扫
546
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
