WebGl 使用uniform变量动态修改点的颜色

在WebGL中,uniform变量用于在顶点着色器和片元着色器之间传递全局状态信息,这些信息在渲染过程中不会随着顶点的变化而变化。uniform变量可以用来设置变换矩阵、光照参数、材料属性等。由于它们在整个渲染过程中共享,因此可以被所有使用该着色器程序的顶点和片元访问。

1. 声明uniform变量

// 片源着色器源码
const fragmentShaderSource = `// 声明uniform变量,一定要加分号!!!uniform vec4 uColor;void main() {gl_FragColor = uColor; // r, g, b, a}`

2. 获取 uniform 变量存储地址

// gl.getUniformLocation(program, name)
// 此方法使用和入参与 gl.getAttribLocation 相同
// program: 包含顶点和片元着色器的程序对象
// name:uniform 变量的名称const ucolor = gl.getUniformLocation(program, 'ucolor');

3. 给uniform变量赋值

// gl.uniform4f(location, vO, v1, v2, v3 )  v1, v2, v3,v4分别代表r, g, b, a
// location:变量
// v1:第一个分量的值
// v2:第二个分量的值
// v3:第三个分量的值
// v4:第四个分量的值gl.uniform4f(uColor,1.0, 0.0, 0.0, 1.0);

     赋值需要注意的点:声明和赋值是对应的,同时main()中的gl_FragColor也需要对应修改。

  1. uniform float uColor 对应  gl.uniform1f(uColor,1.0, 0.0, 0.0, 1.0);
  2. uniform vec2 uColor 对应  gl.uniform2f(uColor,1.0, 0.0);
  3. uniform ve34 uColor 对应  gl.uniform3f(uColor,1.0, 0.0, 0.0);
  4. uniform vec4 uColor 对应  gl.uniform4f(uColor,1.0, 0.0, 0.0, 1.0);
uniform float uColor;
void main() {gl_FragColor = vec(uColor, 0.0, 0.0, 1.0);
}uniform vec2 uColor;
void main() {gl_FragColor = vec(uColor.r, uColor.g, 0.0, 1.0);
}uniform vec3 uColor;
void main() {gl_FragColor = vec(uColor.r, uColor.g, uColor.b, 1.0);
}uniform vec4 uColor;
void main() {gl_FragColor = uColor;
}

4. 设置精度

// 高精度:highp
// 中精度:mediump
// 低精度:lowp
const fragmentShaderSource = `   precision mediump float;// 设置精度uniform vec4 uColor;void main() {gl_FragColor = uColor; // r, g, b, a}`

 5. 完整代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>* {margin: 0;padding: 0;}canvas {margin: 50px auto;display: block;background: pink;}</style><title>修改点的颜色</title>
</head><body><canvas id="canvas" width="400" height="400">此浏览器不支持canvas</canvas><script src="./js/index.js"></script><script>const ctx = document.getElementById('canvas')const gl = ctx.getContext('webgl')// 顶点着色器源码const vertexShaderSource = `attribute vec4 aPosition;void main() {gl_Position = aPosition; gl_PointSize = 5.0;}`// 片源着色器源码const fragmentShaderSource = `// 4.设置精度precision mediump float;// 1.声明uniform变量,一定要加分号!!!uniform vec4 uColor;void main() {gl_FragColor = uColor; // r, g, b, a}`const program = initShader(gl, vertexShaderSource, fragmentShaderSource)const aPosition = gl.getAttribLocation(program, 'aPosition');// 2.获取返回变量的存储地址const uColor = gl.getUniformLocation(program, 'uColor');const points = [];ctx.onclick = function (e) {const x = e.clientX;const y = e.clientY;const domPosition = e.target.getBoundingClientRect();const domx = x - domPosition.left;const domy = y - domPosition.top;const halfWidth = ctx.offsetWidth / 2;const halfHeigth = ctx.offsetHeight / 2;const clickX = (domx - halfWidth) / halfWidth;const clickY = (halfHeigth - domy) / halfHeigth;points.push({ clickX, clickY })points.forEach(element => {gl.vertexAttrib2f(aPosition, element.clickX, element.clickY)// 3.给uniform变量赋值gl.uniform4f(uColor, element.clickX, element.clickY, 0.0, 1.0);gl.drawArrays(gl.POINTS, 0, 1);});}// 着色器 function initShader(gl, vertexShaderSource, fragmentShaderSource) {const vertexShader = gl.createShader(gl.VERTEX_SHADER);const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);gl.shaderSource(vertexShader, vertexShaderSource);gl.shaderSource(fragmentShader, fragmentShaderSource);gl.compileShader(vertexShader);gl.compileShader(fragmentShader);const program = gl.createProgram();gl.attachShader(program, vertexShader);gl.attachShader(program, fragmentShader);gl.linkProgram(program);gl.useProgram(program);return program;}</script>
</body></html>

6. 效果如下

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/55047.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

一文解读PMP认证,到底值不值得考?

随着项目管理在各行各业的普及&#xff0c;PMP证书作为项目管理领域的“金字招牌”备受关注&#xff0c;但PMP证书真的值得你去考取吗&#xff1f; 一、PMP是什么&#xff1f; PMP证书由美国项目管理协会&#xff08;PMI&#xff09;颁发&#xff0c;旨在评估项目管理者的专业…

【C#网络编程】基础概念2

文章目录 网络、数据包和协议网络数据包协议TCP、UDP 地址客户端和服务器套接字 网络、数据包和协议 计算机网络通过通信通道互连的机器组成&#xff0c;通常把这些机器称为主机和路由器&#xff0c;主机是是运行应用程序&#xff08;如 Web 浏览器&#xff09;的计算机。路由器…

决战Linux操作系统

前言&#xff1a; 你是否也曾经为Linux所困扰过&#xff0c;在网上找的资料零零散散&#xff0c;是否学完Linux后还是懵懵懂懂&#xff0c;别怕&#xff0c;这篇博客是博主精心为你准备的&#xff0c;现在&#xff0c;就让我们一起来走进Linux的世界&#xff0c;决战Linux&…

一文详解数据库范式

背景 在开发中&#xff0c;我们经常需要考虑如何设计合适的表结构&#xff0c;而则往往需要考虑数据库的范式。数据库的三范式&#xff08;3NF&#xff09;是数据库设计过程中用来减少数据冗余和提高数据一致性的重要规则。它们分别是第一范式&#xff08;1NF&#xff09;、第二…

SpringSecurity框架核心组件详解

Spring Security 是一个功能强大且灵活的身份验证和访问控制框架&#xff0c;在很多项目中都会采用该框架来实现权限控制功能。 Authentication&#xff08;身份验证&#xff09;&#xff1a;用于验证用户的身份&#xff0c;通常通过用户名和密码进行身份验证。Authorization&…

oracle数据坏块处理(一)-通过rman备份修复

表有坏块时&#xff0c;全表查询会报错&#xff1a; 这时候如果有前面正常的rman备份&#xff0c;那么我们就可以通过rman备份直接对数据文件块做恢复 先对数据文件做个逻辑检查&#xff1a; RMAN> backup check logical VALIDATE DATAFILE EXB_DATA/exb/datafile/cuteinf…

C#中Assembly3个获取路径的方法

在C#中&#xff0c;经常要获取路径 &#xff0c;可以通过Assembly的三个重载方法来获取&#xff0c;如下所示这三个分别是GetCallingAssembly、GetEntryAssembly和GetExecutingAssembly。 string tmpEntryPath Assembly.GetEntryAssembly().Location;string tmpExeasmPath As…

【VUE】会员管理(增删改查)

前端 router/index.js import { createRouter, createWebHistory } from vue-router import {userInfoStore} from "/stores/user.js";const router createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: /login,name: login,comp…

SpringBoot智能推荐:健康生活新趋势

摘要 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息系统的实施在技术上已逐步成熟。本文介绍了基于智能推荐的卫生健康系统的开发全过程。通过分析基于智能推荐的卫生健康系统管理的不足&#xff0c;创建了一个计算机管理基于智能推荐的卫生健康系统的方案。…

STM32CubeIDE使用ADC采用DMA重大BUG

问题描述 STM32CubeIDE 1.8.0问题 大牛攻城狮最近调试STM32L151CBT6。由于项目上使用该款芯片做控制电源使用&#xff0c;其中涉及到多路ADC的数据采样。使用STM32CubeIDE 1.8.0版本详细如下图所示 这里大概率是STM32CubeMX版本太低了&#xff0c;从图上看才是6.4.0 注意这里…

五、UI弹窗提示

一、制作弹窗UI 二、创建脚本 1、继承WindowRoot&#xff08;UI基类&#xff09; 获取UI上面的组件 2、初始化 将这个文本失活 3、写一个提示出现的方法 这个派生类中&#xff0c;继承了基类的两个方法&#xff0c;设置显示和设置文本 对应基类的这两个方法 将动画赋值给动…

shell $ 用法

Shell脚本中$符号的几种用法小结_linux shell_脚本之家 Shell 传递参数 | 菜鸟教程 $ 符号说明$0Shell 的命令本身1到9表示 Shell 的第几个参数$?显示最后命令的执行情况$#传递到脚本的参数个数$$脚本运行的当前进程 ID 号$*以一个单字符串显示所有向脚本传递的参数$!后台运行…

25.1 降低采集资源消耗的收益和无用监控指标的判定依据

本节重点介绍 : 降低采集资源消耗的收益哪些是无用指标&#xff0c;什么判定依据 通过 grafana的 mysql 表获取所有的 查询表达式expr通过 获取所有的prometheus rule文件获取所有的 告警表达式expr通过 获取所有的prometheus 采集器接口 获取所有的采集metrics计算可得到现在…

机器学习、深度学习评价指标汇总:TP、TN、FP、FN、AP、mAP、IoU、mAP@3、Prec@10、 Acc@10

系列文章目录 文章目录 系列文章目录一、真正例&#xff08;True Positive&#xff09;、假正例&#xff08;False Positive&#xff09;、真负例&#xff08;True Negative&#xff09;和假负例&#xff08;False Negative&#xff09;是评估分类模型性能的重要概念。1. 定义2…

前端学习-css的元素显示模式(十五)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 前言 什么是元素显示模式 块元素 常见的块元素 块元素的特点 注意 行内元素 行内元素的特点 注意 行内块元素 行内块元素的特点 元素显示模式的转换 语法格…

MySQL 删除数据库

1.使用命令行删除一个数据库 1.1 首先登陆进入 MySQL 操作界面&#xff0c;命令如下&#xff1a; 命令 : mysql -utest -p;1.2 登陆成功之后可以使用如下命令查看当前已有数据库&#xff1a; 命令 : SHOW DATABASES; 执行结果如下图: 如图所示当前已包含 MySQL 系统数据库和…

盛元广通化学实验室样品LIMS管理系统

盛元广通化学实验室样品LIMS管理系统旨在提高实验室样品管理的效率、准确性和可追溯性。通过自动化和智能化的手段&#xff0c;系统能够简化样品管理流程&#xff0c;减少人为错误&#xff0c;确保样品的安全性和完整性。样品管理的具体实施方法包括样品接收与登记、样品储存与…

「Ubuntu」文件权限说明(drwxr-xr-x)

我们在使用Ubuntu 查看文件信息时&#xff0c;常常使用 ll 命令查看&#xff0c;但是输出的详细信息有些复杂&#xff0c;特别是 类似与 drwxr-xr-x 的字符串&#xff0c;在此进行详细解释下 属主&#xff1a;所属用户 属组&#xff1a;文件所属组别 drwxr-xr-x 7 apps root 4…

基于SSM的商场鞋店管理系统的设计与实现

文未可获取一份本项目的java源码和数据库参考。 题目简介&#xff1a; 服装鞋帽在我国的国民经济的发展中有着重要的地位&#xff0c;是发展规模较为宏大的行业。随着我国制鞋企业的发展和规模的扩大&#xff0c;经营区域分散&#xff0c;传统的管理模式严重制约了企业的快速…

Android SELinux——Sepolicy基础语法(四)

通过前面的文章内容,我们对 SELinux 目录和 te 文件有一个初步的了解,这里我们继续研究Sepolicy 的语法规范。 一、Sepolicy语言介绍 Linux 中有两种东西,一种死的(Inactive),一种活的(Active)。活的东西就是进程,而死的东西就是文件(Linux 哲学,万物皆文件。注意,…