WebGL 变量uniform、gl.getUniformLocation、gl.uniform4f及其同族函数相关

目录

uniform变量命名规范

获取 uniform 变量的存储地址 gl.getUniformLocation

向uniform变量赋值 gl.uniform4f

​编辑 gl.uniform4f()的同族函数

demo:点击webgl坐标系的四个象限绘制各自不同颜色的点


uniform变量命名规范

 

var FSHADER_SOURCE ='uniform vec4 u_FragColor;\n' + 'void main() {\n' +'  gl_FragColor = u_FragColor;\n' +'}\n';

着色器将 uniform 变量 u_FragColor 赋值给 gl_FragColor,后者直接决定点的颜色,向 uniform 变量传数据的方式与向 attribute 变量传数据相似:首先获取变量的存储地址,然后在JS程序中按照地址将数据传递过去

获取 uniform 变量的存储地址 gl.getUniformLocation

可以使用以下方法来获取uniform变量的存储地址。

 

 var u_FragColor = gl.getUniformLocation(gl.program, 'u_FragColor');if (!u_FragColor) {console.log('Failed to get the storage location of u_FragColor');return;}

这个函数的功能和参数与 gl.getAttribLocation() 一样,但是如果uniform变量不存在或者其命名使用了保留字前缀,那么函数的返回值将是null而不是-1(gl.getAttribLocation()在此情况下返回-1)。因此,在获取uniform变量的存储地址后,需要检查其是否为null

向uniform变量赋值 gl.uniform4f

有了uniform变量的存储地址,就可以使用WebGL函数 gl.uniform4f() 向变量中写入数据,该函数的功能和参数与 gl.vertexAttrib[1234]f() 类似

gl.uniform4f(u_FragColor, r, g, b, a);

 gl.uniform4f()的同族函数

gl.uniform4f()也有一系列同族函数。gl.uniform1f()函数用来传输1个值(v0),gl.uniform2f()传输2个值(v0和v1),gl.uniform3f()传输3个值(v0,v1和v2)。

demo:点击webgl坐标系的四个象限绘制各自不同颜色的点

 

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() {var canvas = document.getElementById('webgl');var 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 intialize shaders.');return;}var a_Position = gl.getAttribLocation(gl.program, 'a_Position');if (a_Position < 0) {console.log('Failed to get the storage location of a_Position');return;}var u_FragColor = gl.getUniformLocation(gl.program, 'u_FragColor');if (!u_FragColor) {console.log('Failed to get the storage location of u_FragColor');return;}// 注册点击事件canvas.onmousedown = function(ev){ click(ev, gl, canvas, a_Position, u_FragColor) };gl.clearColor(0.0, 0.0, 0.0, 1.0);// Clear <canvas>gl.clear(gl.COLOR_BUFFER_BIT);
}var g_points = [];  // The array for the position of a mouse press
var g_colors = [];  // The array to store the color of a point
function click(ev, gl, canvas, a_Position, u_FragColor) {var x = ev.clientX; // x coordinate of a mouse pointervar y = ev.clientY; // y coordinate of a mouse pointervar rect = ev.target.getBoundingClientRect();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, 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, 1.0, 0.0, 1.0]);  // 绿色} else {                         // 否则g_colors.push([1.0, 1.0, 1.0, 1.0]);  // 白色}// 每次绘制前必须显示清除gl.clear(gl.COLOR_BUFFER_BIT);var len = g_points.length;for(var i = 0; i < len; i++) {var xy = g_points[i];var rgba = g_colors[i];// 将点的位置传递给a_position变量gl.vertexAttrib3f(a_Position, xy[0], xy[1], 0.0);// 将点的颜色传递给u_FragColor变量gl.uniform4f(u_FragColor, rgba[0], rgba[1], rgba[2], rgba[3]);// Drawgl.drawArrays(gl.POINTS, 0, 1);}
}

 

 

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

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

相关文章

word文件怎么免费转换为pdf格式?

大家在编辑word文件的时候&#xff0c;可能需要进行格式的转换&#xff0c;比如将word转换为pdf格式这时候需要使用工具软件。接下来小编就给大家介绍word文件怎么免费转换为pdf格式&#xff0c;免费word转pdf格式的方法。 免费word转pdf格式的方法 我们需要在电脑中安装并打开…

Failed to load property source from location ‘classpath:/application.yml‘

项目场景&#xff1a; 今天到公司启动项目&#xff0c;突然发现项目起不起来了 问题描述 出现 Failed to load property source from location ‘classpath:/application.yml’ 错误 原因分析&#xff1a; 刚开始以为是 application.yml 中格式错误&#xff0c;但是发现同…

python matlab 画坐标图

画一个坐标系&#xff0c;同时显示两条直线&#xff0c;效果图如下&#xff1a; 功能点&#xff1a; 同时显示两个纵坐标数据 显示图片名称 图片最大化保存 到本地 在图片某个位置显示字符信息 不同的线名称提示 代码如下&#xff1a; import matplotlib.pyplot as pltde…

uniapp微信小程序点击右上角菜单分享功能权限配置

个人项目地址&#xff1a; SubTopH前端开发个人站 &#xff08;自己开发的前端功能和UI组件&#xff0c;一些有趣的小功能&#xff0c;感兴趣的伙伴可以访问&#xff0c;欢迎提出更好的想法&#xff0c;私信沟通&#xff0c;网站属于静态页面&#xff09; SubTopH前端开发个人站…

ubuntu18.04安装keil5并迁移stm32项目(踩坑)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、安装winewine的总结 二、安装Keil5总结 前言 切记看完再享用&#xff0c;别直接上手&#xff0c;不然安装的时候会和我一样踩坑的&#xff08;走了很多弯路…

七夕特辑(一)浪漫表白方式 用神经网络生成一首情诗

目录 一、准备工作二、用神经网络生成一首诗&#xff0c;代码说明 牛郎织女相会&#xff0c;七夕祝福要送来。祝福天下有情人&#xff0c;终成眷属永相伴。 七夕是中国传统的情人节&#xff0c;也是恋人们表达爱意的好时机。在这个特别的日子里&#xff0c;送上温馨的祝福&…

社科院与美国杜兰大学金融管理硕士项目——畅游于金融世界

随着社会经济的不断发展&#xff0c;职场竞争愈发激烈&#xff0c;很多同学都打算通过报考研究生来实现深造&#xff0c;提升自己的综合能力和竞争优势&#xff0c;获得优质的证书。而对于金融专业的学生和在职人员来说&#xff0c;社科院与美国杜兰大学金融管理硕士项目是一个…

12.串,串的存储结构与模式匹配算法

目录 一. 一些术语 二. 串的类型定义 &#xff08;1&#xff09;串的顺序存储结构 &#xff08;2&#xff09;串的链式存储结构 三. 串的模式匹配算法 &#xff08;1&#xff09;BF算法 &#xff08;2&#xff09;KMP算法 四. 案例实现 串(String)---零个或多个任意字符…

函数式编程-Stream流学习第一节

1 为什么学习 1.现在很多公司在编程中大量使用函数式编程-Stream流格式代码&#xff0c;所以为了能够看懂公司的代码 2.大量数据下处理集合效率高--因为有并行流 3.代码可读性高 4.消灭嵌套地狱 2 函数式编程思想 2.1 概念 面向对象编程是关注于用对象完成什么事情。而函数式…

pm4py使用指南(非机翻)

目录 1. 日志数据读取及预处理&#xff08;1&#xff09;查看case和event数量&#xff08;2&#xff09;查看起始事件和结束事件&#xff08;3&#xff09;时间戳格式的问题 2. 日志数据过滤3. 流程发现4. 模型转化5. 模型可视化 1. 日志数据读取及预处理 通过 pandas库 读取c…

数据结构-Java逆天操作

本文章会对Java线性表的相关知识进行讲解&#xff0c;也会以Java代码示例来进行解释 对线性表的讲解分析 定义 线性表是一种数据结构&#xff0c;它是由一系列具有相同类型的元素组成的有序集合。线性表中的元素按照线性的顺序 排列&#xff0c;每个元素只有一个前驱元素和一…

对于pycharm 运行的时候不在cmd中运行,而是在python控制台运行的情况,如何处理?

对于pycharm 运行的时候不在cmd中运行&#xff0c;而是在python控制台运行的情况&#xff0c;如何处理&#xff1f; 比如&#xff0c;你在运行你的代码的时候 它总在python控制台运行&#xff0c;十分难受 解决方法 在pycharm中设置下即可&#xff0c;很简单 选择运行点击…

python爬虫10:selenium库

python爬虫10&#xff1a;selenium库 前言 ​ python实现网络爬虫非常简单&#xff0c;只需要掌握一定的基础知识和一定的库使用技巧即可。本系列目标旨在梳理相关知识点&#xff0c;方便以后复习。 申明 ​ 本系列所涉及的代码仅用于个人研究与讨论&#xff0c;并不会对网站产…

LeetCode--HOT100题(34)

目录 题目描述&#xff1a;94. 二叉树的中序遍历&#xff08;简单&#xff09;题目接口解题思路1代码解题思路2代码 PS: 题目描述&#xff1a;94. 二叉树的中序遍历&#xff08;简单&#xff09; 给定一个二叉树的根节点 root &#xff0c;返回 它的 中序 遍历 。 LeetCode做…

爆火「视频版ControlNet」开源了!靠提示词精准换画风,全华人团队出品

“视频版ControlNet”来了&#xff01; 让蓝衣战神秒变迪士尼公举&#xff1a; 视频处理前后&#xff0c;除了画风以外&#xff0c;其他都不更改。 女孩说话的口型都保持一致。 正在插剑的姜文&#xff0c;也能“下一秒”变猩球崛起了。 这就是由全华人团队打造的最新视频处理…

性能调优篇 二、Jvm监控及诊断工具-命令行篇

目录 一、概述1、简单命令行工具 二、jps&#xff1a;查看正在运行的Java程序&#xff08;掌握&#xff09;1、是什么&#xff1f;2、测试3、基本语法 三、jstat&#xff1a;查看jvm统计信息&#xff08;掌握&#xff09;1、是什么&#xff1f;2、基本语法3、补充 四、jinfo&am…

记录Taro大坑2丢失api无法启动

现象 解决方案 看了很多。很多说要改成一致的版本号。其实没什么用。 正确方案 再新建一个模板跑起来对比config的配置&#xff0c;以及package.json发现关闭预编译即可。预编译导致api丢失

javaWeb差缺补漏(一)【针对于自身知识点掌握情况】

前端三大件部分 1、a标签的target属性iframe标签的name属性 2、textarea标签&#xff1a;表示多行文本输入。起始标签和结束标签中的内容是默认值。 rows&#xff1a;属性设置可以显示多少行。 cols&#xff1a;属性设置每行显示多少列。 3、form表单的action提交的时候&a…

使用proxman对iOS真机进行抓包

1 打开手机的safari 输入地址 http://proxy.man/ssl 2 下载证书代开设置页面&#xff0c;安装证书 设置信任证书 打开手机设置 &#xff0c;点击通用 点击关于本机、 点击证书信任设置 打开信任设置开关 4 设置手机代理 查看需要设置的代理地址 打开界面 在手机中按…

Redis过期数据的删除策略

1 介绍 Redis 是一个kv型数据库&#xff0c;我们所有的数据都是存放在内存中的&#xff0c;但是内存是有大小限制的&#xff0c;不可能无限制的增量。 想要把不需要的数据清理掉&#xff0c;一种办法是直接删除&#xff0c;这个咱们前面章节有详细说过&#xff1b;另外一种就是…