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

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

news 2025/11/6 23:31:30

在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. 效果如下

相关文章：

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

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

编程日记 2024/10/15 16:59:41

Leetcode 划分字母区间

题目要求&#xff1a; 将字符串 s 划分成尽量多的片段&#xff0c;保证每个片段中出现的字母不会出现在其他片段中。 具体解释如下&#xff1a; 尽量多的片段&#xff1a;题目要求的是在划分过程中&#xff0c;我们要尽量让划分的片段数量最大化&#xff0c;而不是最少化。每…...

编程日记 2024/10/15 16:58:40

可编辑div遇到的那些事

在日常开发中有时可能会遇到input 或 textarea 不能满足的开发场景&#xff0c;比如多行输入的情况下&#xff0c;textarea 的右下角icon 无法去除, 所以此时可以使用div 设置可编辑状态&#xff0c;完成功能开发&#xff0c;在开发的过程中仍会遇到一下问题。 1&#xff0c;如…...

编程日记 2024/10/15 16:56:38

什麼是高速HTTP代理？

高速HTTP代理是一種用於加速和優化互聯網連接的技術。它通過在用戶和目標網站之間充當仲介伺服器&#xff0c;幫助用戶快速訪問網路資源。HTTP代理不僅可以提高訪問速度&#xff0c;還能提供一定程度的隱私保護和安全性。 高速HTTP代理的工作原理 HTTP代理伺服器位於用戶設備…...

编程日记 2024/10/15 16:55:36

三子棋（C 语言）

目录 一、游戏设计的整体思路二、各个步骤的代码实现1. 菜单及循环选择的实现2. 棋盘的初始化和显示3. 轮流下棋及结果判断实现4. 结果判断实现 三、所有代码四、总结 一、游戏设计的整体思路 &#xff08;1&#xff09;提供一个菜单让玩家选择人机对战、玩家对战或者退出游戏…...

编程日记 2024/10/15 16:54:34

HWS赛题 入门 MIPS Pwn-Mplogin(MIPS_shellcode)

解题所涉知识点&#xff1a; 泄露或修改内存数据&#xff1a; 堆地址&#xff1a;栈地址&#xff1a;栈上数据的连带输出(Stack Leak) && Stack溢出覆盖内存libc地址&#xff1a;BSS段地址&#xff1a; 劫持程序执行流程&#xff1a;[[MIPS_ROP]] 获得shell或flag&am…...

编程日记 2024/10/15 16:52:32

纯血鸿蒙启动公测，爱加密鸿蒙加固平台发布，助力鸿蒙应用安全运营！

鸿蒙系统打破了移动操作系统两极格局&#xff0c;实现操作系统核心技术的自主可控、安全可靠&#xff0c;在神州大地上掀起一波科技革新的浪潮&#xff0c;HarmonyOS NEXT成为大型企业必须要布局的应用系统之一。 HarmonyOS NEXT于10月8日正式开启公测&#xff0c;距离面向全体…...

编程日记 2024/10/15 16:49:29

MySQL中 truncate、drop和delete的区别

MySQL中 truncate、drop和delete区别 truncate 执行速度快&#xff0c;删除所有数据&#xff0c;但是保留表结构不记录日志事务不安全&#xff0c;不能回滚可重置自增主键计数器 drop 执行速度较快&#xff0c;删除整张表数据和结构不记录日志事务不安全&#xff0c;不能回…...

编程日记 2024/10/15 16:48:28

什么开放式耳机值得买？开放式耳机推荐排行榜！

长时间佩戴传统入耳式耳机有时可能会影响耳道健康&#xff0c;鉴于此&#xff0c;转而选择不入耳设计的开放式耳机就成了不少人的新倾向&#xff0c;它们有助于减少细菌滋生和耳道闷热的烦恼。为了帮助大家找到合适的选项&#xff0c;下面我将列举一些市面上口碑不错的开放式耳…...

编程日记 2024/10/15 16:41:22

Apache Doris的分区与分桶详解

目录 第一章 Doris介绍和分区分桶作用 1.1 Doris背景介绍 1.2 分区与分桶的意义 第二章 原理解析 2.1 分区机制 2.1.1 定义 2.1.2 类型 2.1.3 工作原理 2.2 分桶机制 2.2.1 概念 2.2.2 实现方式 2.2.3 与分区的关系 第三章 手动分区与自动分区对比 3.1 手动分区 …...

编程日记 2024/10/15 16:38:14

docker详解介绍+基础操作 （二）info详解

1 docker相关信息和优化配置 1&#xff09;查看docker版本详解 rootzz:~# docker version Client: Docker Engine - CommunityVersion: 27.3.1API version: 1.47Go version: go1.22.7Git commit: ce12230Built: Fri Sep 20 11:40:…...

编程日记 2024/10/15 16:37:13

C0023.在Clion中创建控件，对控件进行提升为自定义控件的步骤

新建Ui界面文件 修改新生成的ui文件头文件 关闭之前打开的ui文件&#xff0c;如上图Qt Designer中打开的&#xff0c;然后修改新生成的ui文件对应的头文件&#xff0c;改成自己需要的控件类即可。 提升控件为自定义类 将如下头文件中的类名和头文件名输入到提升窗口中&#…...

编程日记 2024/10/15 16:36:11

探索 C# 常用第三方库与框架

在 C# 开发中&#xff0c;第三方库和框架极大地提高了开发效率和代码质量。通过这些库&#xff0c;开发者可以快速处理 JSON 数据、简化对象映射、记录日志、以及高效地与数据库交互。本文将介绍四个常用的 C# 第三方库&#xff1a;Newtonsoft.Json、AutoMapper、NLog/Serilog …...

编程日记 2024/10/15 16:34:09

NodeJS GRPC简单的例子

1. 定义 .proto 文件 首先&#xff0c;创建一个 .proto 文件&#xff0c;定义服务和消息&#xff1a; syntax "proto3";package helloworld;service Greeter {rpc SayHello (HelloRequest) returns (HelloReply) {}rpc SayHelloAgain (HelloRequest) returns (Hel…...

编程日记 2024/10/15 16:33:08

无人机之三维航迹规划篇

一、基本原理 飞行环境建模&#xff1a;在三维航迹规划中&#xff0c;首先需要对飞行环境进行建模。这包括对地形、障碍物、气象等因素进行准确的测量和分析&#xff0c;以获得可行的飞行路径。 飞行任务需求分析&#xff1a;根据无人机的任务需求&#xff0c;确定航迹规划的…...

编程日记 2024/10/15 16:32:07

风格迁移-StyTr 2 : Image Style Transfer with Transformers

风格迁移-StyTr 2 : Image Style Transfer with Transformers 论文链接&#xff1a;Image Style Transfer with Transformers 源码链接&#xff1a;StyTR-2 文章目录 风格迁移-StyTr 2 : Image Style Transfer with TransformersStyTR架构图图像内容编码器内容感知位置编码&…...

编程日记 2024/10/15 16:31:06

上百种【基于YOLOv8/v10/v11的目标检测系统】目录（python+pyside6界面+系统源码+可训练的数据集+也完成的训练模型）

待更新(持续更新&#xff09;&#xff0c;早关注&#xff0c;不迷路............................................................................... 目标检测系统操作说明【用户使用指南】&#xff08;pythonpyside6界面系统源码可训练的数据集也完成的训练模型&#xff…...

编程日记 2024/10/15 16:30:03

记录搜罗到的Matlab 对散点进行椭圆拟合

需要基于一些散点拟合椭圆估计并计算出椭圆的参数和周长&#xff0c;搜罗到直接上代码 &#xff08;1&#xff09;有用的椭圆拟合及参数计算函数 function W fitellipse(x,y) % 构造矩阵 D [x.*x, x.*y, y.*y, x, y,ones(size(x))]; S D*D; G zeros(6); G(1,3) 2; G(3,1)…...

编程日记 2024/10/15 16:27:00

分享我最近使用《柬埔寨语翻译通》App的体验，不会说高棉语也能去柬埔寨旅游，畅通无阻！

最近&#xff0c;我尝试了一款名为《柬埔寨语翻译通》的应用程序&#xff0c;它旨在帮助用户进行中文和高棉语之间的翻译。以下是我使用这款应用的一些体验和感受。 双向翻译功能&#xff1a;我首先测试了它的翻译功能。《柬埔寨语翻译通》能够将中文翻译成高棉语&#xff0c;反…...

编程日记 2024/10/15 16:23:57

文本语义检索系统的搭建过程，涵盖了召回、排序以及Milvus召回系统、短视频推荐等相关内容

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下本文详细介绍了文本语义检索系统的搭建过程&#xff0c;涵盖了召回、排序以及Milvus召回系统的相关内容。通过使用PyTorch框架&#xff0c;我们提供了样例代码&#xff0c;以帮助读者更好地理解和实践。该系统具有广…...

编程日记 2024/10/15 16:22:54

零门槛NAS搭建：WinNAS如何让普通电脑秒变私有云？

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

编程新知 2025/9/22 15:46:39

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎&#xff08;Physics Engine&#xff09; 物理引擎 是一种通过计算机模拟物理规律&#xff08;如力学、碰撞、重力、流体动力学等&#xff09;的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互&#xff0c;广泛应用于 游戏开发、动画制作、虚…...

编程新知 2025/11/4 8:03:35

MFC内存泄露

1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

编程新知 2025/10/31 16:39:39

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

编程新知 2025/11/3 16:41:29

条件运算符

C中的三目运算符&#xff08;也称条件运算符&#xff0c;英文&#xff1a;ternary operator&#xff09;是一种简洁的条件选择语句&#xff0c;语法如下&#xff1a; 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true&#xff0c;则整个表达式的结果为“表达式1”…...

编程新知 2025/9/19 12:51:08

srs linux

下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935&#xff0c;SRS管理页面端口是8080&#xff0c;可…...

编程新知 2025/10/31 20:51:54

【算法训练营Day07】字符串part1

文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接&#xff1a;344. 反转字符串 双指针法&#xff0c;两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

编程新知 2025/8/27 14:38:58

Rust 异步编程

Rust 异步编程 引言 Rust 是一种系统编程语言，以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天，异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...

编程新知 2025/10/20 1:24:05

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

编程新知 2025/10/28 23:13:01

Android15默认授权浮窗权限

我们经常有那种需求&#xff0c;客户需要定制的apk集成在ROM中&#xff0c;并且默认授予其【显示在其他应用的上层】权限&#xff0c;也就是我们常说的浮窗权限&#xff0c;那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...

编程新知 2025/10/30 7:54:56