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

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

news 2026/3/31 22:24:20

在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

我的上课记

...

编程新知 2026/3/31 21:41:08

扩散模型之（十八）ControlNet 原理与指南

概述在当今瞬息万变的科技环境中&#xff0c;如何在人类创造力和机器精确性之间取得平衡变得日益重要。而这正是我们ControlNet发挥作用的地方——它如同“引导之手”&#xff0c;为基于扩散的文本到图像合成模型提供指导&#xff0c;从而解决传统图像生成模型中常见的局限性。…...

编程新知 2026/3/31 20:05:35

基于STM32H743的调试记录2——从CubeMX到MDK：构建现代化工程模板的实战指南

1. 为什么需要现代化工程模板 最近在折腾STM32H743的时候&#xff0c;发现一个很有意思的现象&#xff1a;很多开发者还在使用几年前的老旧工程模板。我自己刚开始用某原子的开发板学习时也踩过这个坑&#xff0c;板子配套的例程跑起来没问题&#xff0c;但一旦想实现些复杂功…...

编程新知 2026/3/31 19:45:28

强化学习实战：用Python手把手实现值迭代与策略迭代算法（附完整代码）

强化学习实战&#xff1a;用Python手把手实现值迭代与策略迭代算法&#xff08;附完整代码&#xff09; 强化学习作为机器学习的重要分支&#xff0c;近年来在游戏AI、自动驾驶、机器人控制等领域展现出惊人潜力。对于初学者而言&#xff0c;理解算法原理固然重要&#xff0c;但…...

编程新知 2026/3/31 19:27:09

DSQC346G 3HAB8101-8 机器人伺服驱动单元

DSQC346G 3HAB8101‑8 机器人伺服驱动单元介绍DSQC346G&#xff08;3HAB8101‑8&#xff09;是一款专用于工业机器人伺服系统的驱动单元&#xff0c;用于控制伺服电机的运动与输出&#xff0c;实现机器人关节或轴的精确位置、速度和力矩控制&#xff0c;是机器人驱动链中的核心…...

编程新知 2026/3/31 19:20:54

手把手教你编译运行openHiTLS社区的FrodoKEM源码（附完整环境配置）

从零构建FrodoKEM开发环境&#xff1a;openHiTLS社区源码实战指南 当量子计算机从理论走向现实&#xff0c;传统加密算法正面临前所未有的挑战。FrodoKEM作为后量子密码学领域的明星算法&#xff0c;以其坚实的数学基础和简洁的实现逻辑&#xff0c;成为开发者探索抗量子加密技…...

编程新知 2026/3/31 19:18:54

HelixDB安全特性解析：类型安全查询如何确保生产环境可靠性

HelixDB安全特性解析&#xff1a;类型安全查询如何确保生产环境可靠性 【免费下载链接】helix-db HelixDB is a powerful, graph-vector database built entirely in Rust for millisecond query latency and ease of use. 项目地址: https://gitcode.com/gh_mirrors/he/heli…...

编程新知 2026/3/31 18:15:54

大模型部署成本优化：面向测试从业者的云服务省钱技巧

随着大模型在自动化测试、缺陷智能分析、测试用例生成等领域的应用日益深入&#xff0c;其部署与调用成本已成为测试团队必须面对的核心挑战。高昂的GPU算力费用、未被充分利用的资源以及复杂的定价模型&#xff0c;都可能使技术创新的预算捉襟见肘。一、理解成本构成&#xff…...

编程新知 2026/3/31 18:15:53

突破工厂建设瓶颈：FactoryBluePrints蓝图库带来的自动化生产革命

突破工厂建设瓶颈&#xff1a;FactoryBluePrints蓝图库带来的自动化生产革命 【免费下载链接】FactoryBluePrints 游戏戴森球计划的**工厂**蓝图仓库 项目地址: https://gitcode.com/GitHub_Trending/fa/FactoryBluePrints FactoryBluePrints是戴森球计划的开源工厂蓝图…...

编程新知 2026/3/31 18:11:46

AI与数据库融合：从经典论文到前沿实践

1. AI与数据库融合的起源与演进 数据库和人工智能这两个看似独立的领域&#xff0c;其实早在计算机科学发展的初期就已经产生了交集。上世纪70年代&#xff0c;当关系型数据库理论刚刚确立时&#xff0c;研究者们就开始探索如何让数据库系统具备一定的"智能"。当时的…...

编程新知 2026/3/31 17:17:04