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

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

news 2025/7/7 8:45: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

【JavaEE】-- HTTP

1. HTTP是什么&#xff1f; HTTP&#xff08;全称为"超文本传输协议"&#xff09;是一种应用非常广泛的应用层协议&#xff0c;HTTP是基于TCP协议的一种应用层协议。 应用层协议&#xff1a;是计算机网络协议栈中最高层的协议&#xff0c;它定义了运行在不同主机上…...

编程新知 2025/7/4 10:49:50

如何在看板中有效管理突发紧急任务

在看板中有效管理突发紧急任务需要&#xff1a;设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP&#xff08;Work-in-Progress&#xff09;弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中&#xff0c;设立专门的紧急任务通道尤为重要&#xff0c;这能…...

编程新知 2025/7/6 0:01:32

Web中间件--tomcat学习

Web中间件–tomcat Java虚拟机详解 什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机&#xff0c;它可以执行Java字节码。Java虚拟机是Java平台的一部分&#xff0c;Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...

编程新知 2025/7/6 17:21:04

探索Selenium：自动化测试的神奇钥匙

目录 一、Selenium 是什么1.1 定义与概念1.2 发展历程1.3 功能概述 二、Selenium 工作原理剖析2.1 架构组成2.2 工作流程2.3 通信机制 三、Selenium 的优势3.1 跨浏览器与平台支持3.2 丰富的语言支持3.3 强大的社区支持 四、Selenium 的应用场景4.1 Web 应用自动化测试4.2 数据…...

编程新知 2025/7/7 4:16:25

论文阅读笔记——Muffin: Testing Deep Learning Libraries via Neural Architecture Fuzzing

Muffin 论文 现有方法 CRADLE 和 LEMON&#xff0c;依赖模型推理阶段输出进行差分测试&#xff0c;但在训练阶段是不可行的&#xff0c;因为训练阶段直到最后才有固定输出&#xff0c;中间过程是不断变化的。API 库覆盖低&#xff0c;因为各个 API 都是在各种具体场景下使用。…...

编程新知 2025/7/6 6:24:56

android RelativeLayout布局

<?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"match_parent"android:gravity&…...

编程新知 2025/7/4 14:24:21

SQL Server 触发器调用存储过程实现发送 HTTP 请求

文章目录 需求分析解决第 1 步：前置条件，启用 OLE 自动化方式 1：使用 SQL 实现启用 OLE 自动化方式 2：Sql Server 2005启动OLE自动化方式 3：Sql Server 2008启动OLE自动化第 2 步：创建存储过程第 3 步：创建触发器扩展 - 如何调试？第 1 步：登录 SQL Server 2008第 2 步…...

编程新知 2025/6/21 2:10:03

Windows电脑能装鸿蒙吗_Windows电脑体验鸿蒙电脑操作系统教程

鸿蒙电脑版操作系统来了&#xff0c;很多小伙伴想体验鸿蒙电脑版操作系统&#xff0c;可惜&#xff0c;鸿蒙系统并不支持你正在使用的传统的电脑来安装。不过可以通过可以使用华为官方提供的虚拟机&#xff0c;来体验大家心心念念的鸿蒙系统啦&#xff01;注意&#xff1a;虚拟…...

编程新知 2025/7/5 18:25:35

WEB3全栈开发——面试专业技能点P4数据库

一、mysql2 原生驱动及其连接机制 概念介绍 mysql2 是 Node.js 环境中广泛使用的 MySQL 客户端库&#xff0c;基于 mysql 库改进而来&#xff0c;具有更好的性能、Promise 支持、流式查询、二进制数据处理能力等。 主要特点&#xff1a; 支持 Promise / async-await&#xf…...

编程新知 2025/6/16 12:43:13

【java面试】微服务篇

【java面试】微服务篇 一、总体框架二、Springcloud&#xff08;一&#xff09;Springcloud五大组件&#xff08;二&#xff09;服务注册和发现1、Eureka2、Nacos &#xff08;三&#xff09;负载均衡1、Ribbon负载均衡流程2、Ribbon负载均衡策略3、自定义负载均衡策略4、总结 …...

编程新知 2025/7/7 7:10:29