当前位置：首页 > news >正文

WebGL编程指南 - 入门续

news 2025/8/10 15:22:22

相关内容：在attribute变量传递参数的基础上，通过JavaScript获取鼠标事件的坐标，再经过坐标转换传递给attribute变量；Web颜色缓冲区每次绘制之后都会重置
相关函数：JavaScript鼠标事件onmousedown/onmouseup/onclick

html代码还是老一套

js代码：

// ClickedPoints.js
// 顶点着色器
var VSHADER_SOURCE ='attribute vec4 a_Position;\n' +'void main() {\n' +' gl_Position = a_Position;\n' +' gl_PointSize = 10.0;\n' +'}\n'
// 片元着色器
var FSHADER_SOURCE ='void main() {\n' +' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + // 设置颜色'}\n'
// 主函数
function main() {// 获取<canvas>元素let canvas = document.getElementById('webgl')// 获取WebGL绘图上下文let gl = getWebGLContext(canvas)if (!gl) {console.log('Failed to get the rendering context for WebGL')return}// 初始化着色器if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {console.log('Failed to initialize shaders')return}// 获取a_Position变量的存储位置let a_Position = gl.getAttribLocation(gl.program, 'a_Position')if (a_Position < 0) {console.log('Failed to get the storage location of a_Position')}// 注册鼠标点击事件响应函数canvas.onmousedown = function (ev) {// console.log(ev)click(ev, gl, canvas, a_Position)}// 设置背景色gl.clearColor(0.0, 0.0, 0.0, 1.0)// 清空绘图区域gl.clear(gl.COLOR_BUFFER_BIT)
}
var g_points = [] // 鼠标点击位置数组
function click(ev, gl, canvas, a_Position) {let x = ev.clientX // 鼠标点击处的x坐标let y = ev.clientY // 鼠标点击处的y坐标let rect = ev.target.getBoundingClientRect() //cnavas边界坐标// 坐标转换x = (x - rect.left - canvas.width / 2) / (canvas.width / 2)y = (canvas.height / 2 - (y - rect.top)) / (canvas.height / 2)// 将坐标存储到g_points数组中g_points.push(x)g_points.push(y)// 清空绘图区gl.clear(gl.COLOR_BUFFER_BIT)// 绘制数组中的点let len = g_points.lengthfor (let i = 0; i < len; i += 2) {// 将点的位置传递到变量中a_Positiongl.vertexAttrib3f(a_Position, g_points[i], g_points[i + 1], 0.0)// 绘制点gl.drawArrays(gl.POINTS, 0, 1)}
}

此处将x和y坐标通过JavaScript自带的鼠标点击事件来获取，通过坐标转换传递到着色器中。

注册事件响应函数：

// 注册鼠标点击事件响应函数canvas.onmousedown = function (ev) {// console.log(ev)click(ev, gl, canvas, a_Position)}

此处用ev作为函数的形参接收，ev中挂载了许多关于这一事件的属性，包括触发对象(target)、坐标等，不同事件传递的事件对象不同

改变点的颜色与uniform变量(动态设置片元着色器)

相关内容：JavaScript设置点的颜色；JavaScript传递点的颜色给片元着色器(通过uniform变量)
相关函数：gl.getUniformLocation(), gl.uniform4f()

在片元着色器中准备 uniform 变量
用这个 uniform 变量向 gl_FragColor 赋值
将颜色数据从 JavaScript 传给 uniform 变量

根据位置不同显示不同地颜色

// ClickedPoints.js
// 顶点着色器
var VSHADER_SOURCE ='attribute vec4 a_Position;\n' +'void main() {\n' +' gl_Position = a_Position;\n' +' gl_PointSize = 10.0;\n' +'}\n'
// 片元着色器
var FSHADER_SOURCE ='precision mediump float;\n' +'uniform vec4 u_FragColor;\n' +'void main() {\n' +' gl_FragColor = u_FragColor;\n' + // 设置颜色'}\n'
// 主函数
function main() {// 获取<canvas>元素let canvas = document.getElementById('webgl')// 获取WebGL绘图上下文let gl = getWebGLContext(canvas)if (!gl) {console.log('Failed to get the rendering context for WebGL')return}// 初始化着色器if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {console.log('Failed to initialize shaders')return}// 获取a_Position变量的存储位置let a_Position = gl.getAttribLocation(gl.program, 'a_Position')if (a_Position < 0) {console.log('Failed to get the storage location of a_Position')}//获取u_FragColor 变量的存储位置let u_FragColor = gl.getUniformLocation(gl.program,'u_FragColor');if(u_FragColor < 0) {console.log('Failed to get the storage location of u_FragColor');}// 注册鼠标点击事件响应函数canvas.onmousedown = function (ev) {// console.log(ev)click(ev, gl, canvas, a_Position,u_FragColor);}// 设置背景色gl.clearColor(0.0, 0.0, 0.0, 1.0)// 清空绘图区域gl.clear(gl.COLOR_BUFFER_BIT)
}
var g_points = [] // 鼠标点击位置数组
var g_colors = [];// 存储点颜色的数组
function click(ev, gl, canvas, a_Position,u_FragColor) {let x = ev.clientX // 鼠标点击处的x坐标let y = ev.clientY // 鼠标点击处的y坐标let rect = ev.target.getBoundingClientRect() //cnavas边界坐标// 坐标转换x = (x - rect.left - canvas.width / 2) / (canvas.width / 2)y = (canvas.height / 2 - (y - rect.top)) / (canvas.height / 2)// 将坐标存储到g_points数组中g_points.push(x)g_points.push(y)// 将点的颜色存储到g_colors中
if (x >= 0.0 && y >= 0.0) {// 第一象限g_colors.push([1.0, 0.0, 0.0, 1.0]) // 红色} else if (x < 0.0 && y < 0.0) {// 第三象限g_colors.push([0.0, 0.0, 1.0, 1.0]) // 绿色} else {// 其他g_colors.push([1.0, 1.0, 1.0, 1.0]) // 白色}// 清空绘图区gl.clear(gl.COLOR_BUFFER_BIT)// 绘制数组中的点let len = g_points.lengthfor (let i = 0; i < len; i += 2) {let rgba = g_colors[i/2];// 将点的位置传递到变量中a_Positiongl.vertexAttrib3f(a_Position, g_points[i], g_points[i + 1], 0.0);gl.uniform4fv(u_FragColor,rgba);// 绘制点gl.drawArrays(gl.POINTS, 0, 1)}
}

uniform 变量

// 片元着色器
var FSHADER_SOURCE ='precision mediump float;\n' +'uniform vec4 u_FragColor;\n' + // uniform变量'void main() {\n' +' gl_FragColor = u_FragColor;\n' +'}\n'

uniform变量的声明遵循与attribute变量相同的格式<存储限定符><类型><变量名>

获取uniform变量的存储地址

  // 获取u_FragColor变量的存储位置let u_FragColor = gl.getUniformLocation(gl.program, 'u_FragColor')if (!u_FragColor) {console.log('Failed to get the storage location of u_FragColor')}