webGlL变量的声明与使用

抢先观看:

变量的声明格式:<存储限定符><类型限定符><变量名>

        存储限定符:const, attribute, uniform, varying, buffer。

        类型限定符:void, bool, int, float, double, vec2, vec3, vec4, mat2, mat3, mat4, sampler1D, sampler2D, sampler3D, samplerCube, sampler2DShadow。

        变量名:由字母,数字和下划线组成,不能以数字开头,需见名知意。

                举个栗子:attribute vec4 a_Position

约定:attribute变量名以a_开头,uniform变量名以u_开头,varying变量名以v_开头。

        attribute: 传输的是那些与顶点相关的数据,如顶点坐标,法线,颜色等,局部变量,只能在顶点着色器中使用,在片元着色器中无法访问。

        uniform: 传输的是那些与顶点无关的数据或者是那些对于每个顶点都相同的值,如光照参数,变换矩阵等,全局变量,可以在顶点着色器和片元着色器中共享访问。

        varying: 传输的是那些由顶点着色器计算并传递给片元着色器的插值变量,用于从顶点着色器传递到片元着色器的插值数据。

页面内容:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>测试</title><script src="./lib/webgl-utils.js"></script><script src="./lib/webgl-debug.js"></script><script src="./lib/cuon-utils.js"></script><script src="./js/helloPoints.js"></script>
</head><body onload="main()"><canvas id="canvas" width="400" height="400"></canvas>
</body></html>

脚本内容:


// helloPoints.js
// 如何在JavaScript 和着色器之间传递数据
/*** 变量:attribute, uniform, varying* attribute: 传输的是那些与顶点相关的数据,如顶点坐标,法线,颜色等* uniform: 传输的是那些与顶点无关的数据或者是那些对于每个顶点都相同的值,如光照参数,变换矩阵等* varying: 传输的是那些由顶点着色器计算并传递给片元着色器的插值变量*/
// 存储限定符:const, attribute, uniform, varying, buffer’
// 类型限定符:void, bool, int, float, double, vec2, vec3, vec4, mat2, mat3, mat4, sampler1D, sampler2D, sampler3D, samplerCube, sampler2DShadow
// 变量名:由字母,数字和下划线组成,不能以数字开头,需见名知意
//attribute vec4 a_Position;
// 其中,attribute是存储限定符,vec4是类型限定符,a_Position是变量名
// 变量的声明格式:<存储限定符><类型限定符><变量名>
// 约定:attribute变量名以a_开头,uniform变量名以u_开头,varying变量名以v_开头
var vshader_source = `
// 声明attribute变量
attribute vec4 a_Position;
attribute float a_PointSize;
void main(){// 将attribute变量赋值给顶点着色器内建变量gl_Positiongl_Position = a_Position;gl_PointSize = a_PointSize;
}
`
var fshader_source = `
void main(){gl_FragColor = vec4(1.0,0.0,0.0,1.0);
}
`
function main () {var canvas = document.getElementById('canvas')var gl = getWebGLContext(canvas)if (!gl) {console.log('获取webGl绘图上下文失败')return}if (!initShaders(gl, vshader_source, fshader_source)) {console.log('初始化着色器失败')return}/*** 获取attribute变量的存储位置* gl.getAttribLocation (program, name)* @param program 指定色含顶点着色器和片元着色器的着色器程序对象* @param name 指定想要获取其存储地址的attribute变量的名称* @returns 大于等于0 attribute变量的存储地址* @returns -1 获取失败 指定的attribute变量不存在,或者其命名具有gl或webgl 前缀* @err INVALID OPERATION 程序对象未能成功连接* @err INVALID VALUE name参数的长度大于attribute变量名的最大长度(默认)256字节* */var a_Position = gl.getAttribLocation(gl.program, 'a_Position')if (a_Position < 0) {console.log('获取attribute变量a_Position失败')return}// 将顶点位置传输给attribute变量//  a_Position属于vec4类型,gl.vertexAttrib3f()函数只能传输前三个分量(x,y,z),第四个分量默认为1.0/*** 将数据传输给location参数指定的attribute变量。* gl.vertexAttriblf()仅传输一个值,这个值将被填充到attribute变量的第1个分量中,第2、3个分量将相支设为0.0,第4个分量将被设为1.0。* 类似地,gl.vertexAttrib2f()将填充前两个分量,第3个分量为0.0,第4个分量为1.0。* gl.vertexAttrib4f()填充了所有四个分量。* gl.vertexAttriblf (location, v0)* gl.vertexAttrib2f(location,v0,v1)* gl.vertexAttrib3f(location, v0,v1,v2)* gl.vertexAttrib4f(location,v0,v1,v2,v3)* @param location 指定attribute变量的存储位置* @param v0,v1,v2,v3 指定传输给attribute变量的四个分量的值* @error 错误 INVALID VALUE location大于等于attribute变量的最大数目(默认为8)*/gl.vertexAttrib3f(a_Position, 0.0, 0.0, 0.0); // 也可以使用gl.vertexAttrib4f(a_Position, 0.0, 0.0, 0.0, 1.0);/*** WebGL相关函数的命名规范* WebGL中的函数命名遵循OpenGLES2.0中的函数名,我们都知道后者是前者的基础规范。* OpenGL中的函数名由三个部分组成:* <基础函数名><参数个数><参数类型>,WebGL的函数命名使用同样的结构,* gl.vertexAttrib3f(location, v0, v1, v2)* 参数类型* gl.vertexAttrib基础函数名* 3参数个数* f 表示浮点数* i 表示整数*/var a_PointSize = gl.getAttribLocation(gl.program, 'a_PointSize')gl.vertexAttrib1f(a_PointSize, 10.0)gl.clearColor(0.0, 0.0, 0.0, 1.0)gl.clear(gl.COLOR_BUFFER_BIT)gl.drawArrays(gl.POINTS, 0, 1)
}

效果:

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

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

相关文章

基于SSM的成都市旅游信息管理系统-计算机毕业设计源码65815

SSM成都市旅游信息管理系统 摘 要 本论文主要论述了如何使用SSM框架开发一个旅游信息管理系统&#xff0c;严格按照软件开发流程进行各个阶段的工作&#xff0c;采用B/S架构JAVA技术&#xff0c;面向对象编程思想进行项目开发。在引言中&#xff0c;作者将论述旅游信息管理系…

91.【C语言】数据结构之单向链表的头删和尾删

目录 1.尾删函数SLTPopBack 代码示例(写入SList.c) 在SList.h中写入该函数的声明 main.c部分代码改为 ​编辑 分析 解决方法 方法1:双指针算法(快指针tail,慢指针pretail) 方法2 2.头删函数SLTPopFront 一个节点示意图 多个节点示意图 代码示例(写入SList.c) 在S…

DEVOPS: 集群伸缩原理

概述 阿里云 K8S 集群的一个重要特性&#xff0c;是集群的节点可以动态的增加或减少有了这个特性&#xff0c;集群才能在计算资源不足的情况下扩容新的节点&#xff0c;同时也可以在资源利用 率降低的时候&#xff0c;释放节点以节省费用理解实现原理&#xff0c;在遇到问题的…

华为OD机试 - 无向图染色(Java 2024 E卷 100分)

华为OD机试 2024E卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&#xff08;E卷D卷A卷B卷C卷&#xff09;》。 刷的越多&#xff0c;抽中的概率越大&#xff0c;私信哪吒&#xff0c;备注华为OD&#xff0c;加…

云智慧完成华为原生鸿蒙系统的适配, 透视宝 APM 为用户体验保驾护航

2024 年 10 月 22 日&#xff0c;首个国产移动操作系统 —— 华为原生鸿蒙操作系统 HarmonyOS NEXT 正式面世&#xff0c;成为继 iOS 和 Android 后的全球第三大移动操作系统。HarmonyOS NEXT&#xff0c;从系统内核、数据库根基&#xff0c;到编程语言创新、AI&#xff08;人工…

无人机之任务分配算法篇

无人机的任务分配算法是无人机系统中的重要组成部分&#xff0c;它决定了无人机如何高效、合理地执行各种任务。以下是一些常见的无人机任务分配算法&#xff1a; 一、合同网协议&#xff08;Contract Net Protocol, CNP&#xff09; 基本概念&#xff1a;CNP算法是一种分布式…

【WRF数据处理】基于GIS4WRF插件将geotiff数据转为tiff(geogrid,WPS所需数据)

【WRF数据处理】基于GIS4WRF插件将geotiff数据转为tiff&#xff08;geogrid&#xff0c;WPS所需数据&#xff09; 数据准备&#xff1a;以叶面积指数LAI为例QGis实操&#xff1a;基于GIS4WRF插件将geotiff数据转为tiff警告&#xff1a;GIS4WRF: Input layer had an unexpected …

【MySQL基础】高级查询

文章目录 一、聚合函数&#xff1a;COUNT、SUM、AVG、MIN、MAX1. 统计总数&#xff1a;COUNT2. 计算总和&#xff1a;SUM3. 计算平均值&#xff1a;AVG4. 找最小值&#xff1a;MIN5. 找最大值&#xff1a;MAX 综合使用聚合函数的例子小结 二、分组查询——GROUP BY 和 HAVING1.…

ElasticSearch备考 -- Index shrink

一、题目 索引task包括5个分片一个副本&#xff0c;对索引执行shrink压缩操作&#xff0c;压缩后索引为1主分片&#xff0c;索引名称为task-new 二、思考 在执行shrink前必须满足三个前置条件 The index must be read-only.A copy of every shard in the index must reside o…

名词(术语)了解--CSSOM (CSS Object Model)

名词&#xff08;术语&#xff09;了解–CSSOM (CSS Object Model) CSSOM 概述 CSSOM 是一个与 DOM (Document Object Model) 相对应的、用于 CSS 的 API 集合。 它提供了一种程序化的方式来读取和修改文档的样式信息。 CSSOM 的主要组成部分 样式规则树 document └── …

智能化超声波影像分析,优化医疗决策的开源AI解决方案

思通数科的医疗信息精准抽取系统是一款基于人工智能的开源软件&#xff0c;旨在自动化处理医疗数据&#xff0c;特别是从超声波影像到诊断报告的信息提取。该系统集成了图像识别、自然语言处理和知识图谱等先进技术&#xff0c;能够从医疗影像中提取关键数据&#xff0c;并将这…

Objective-C 音频爬虫:实时接收数据的 didReceiveData_ 方法

在互联网技术领域&#xff0c;数据的获取和处理是至关重要的。尤其是对于音频内容的获取&#xff0c;实时性和效率是衡量一个爬虫性能的重要指标。本文将深入探讨在Objective-C中实现音频爬虫时&#xff0c;如何高效地使用didReceiveData:方法来实时接收数据&#xff0c;并通过…

Python轴承故障诊断 (15)基于CNN-Transformer的一维故障信号识别模型

往期精彩内容&#xff1a; Python-凯斯西储大学&#xff08;CWRU&#xff09;轴承数据解读与分类处理 Pytorch-LSTM轴承故障一维信号分类(一)-CSDN博客 Pytorch-CNN轴承故障一维信号分类(二)-CSDN博客 Pytorch-Transformer轴承故障一维信号分类(三)-CSDN博客 三十多个开源…

如何在 Elasticsearch Ruby 客户端中使用 ES|QL Helper

作者&#xff1a;来自 Elastic Fernando Briano 了解如何使用 Elasticsearch Ruby 客户端编写 ES|QL 查询并处理其结果。 简介 Elasticsearch Ruby 客户端可用于编写 EQ|QL 查询&#xff0c;使处理从 esql.query 返回的数据更加容易。ES|QL 允许开发人员通过查询过滤、转换和分…

【elkb】ELKB安装token过期

问题 elastic启动时候生成的token 有效期只有30分钟。 30分钟后提示&#xff1a; Couldnt configure Elastic Generate a new enrollment token or configure manually. 相关版本信息 elasticsearch&#xff1a;8.8.1kibana&#xff1a;8.8.1logstash&#xff1a;8.8.1file…

交易所开发:开启数字金融新时代

当今数字化高速发展的时代&#xff0c;交易所作为金融市场的核心枢纽&#xff0c;发挥着至关重要的作用。而随着区块链技术的兴起&#xff0c;数字货币交易所的开发更是为金融领域带来了全新的变革与机遇。 一、数字货币交易所的重要性 数字货币交易所是连接数字货币世界与传统…

企业内训|LLM大模型在服务器和IT网络运维中的应用-某日企IT运维部门

本课程是为某在华日资企业集团的IT运维部门专门定制开发的企业培训课程&#xff0c;本课程旨在深入探讨大型语言模型&#xff08;LLM&#xff09;在服务器及IT网络运维中的应用&#xff0c;结合当前技术趋势与行业需求&#xff0c;帮助学员掌握LLM如何为运维工作赋能。通过系统…

网上商城设计小程序ssm+论文源码调试讲解

2相关技术 2.1微信小程序 小程序是一种新的开放能力&#xff0c;开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播&#xff0c;同时具有出色的使用体验。尤其拥抱微信生态圈&#xff0c;让微信小程序更加的如虎添翼&#xff0c;发展迅猛。 2.2 MYSQL数据…

大贤3D家谱——让修家谱不再困难

修家谱作为一种文化传统&#xff0c;承载着家族的历史和文化记忆&#xff0c;但近年来确实面临一些困难&#xff0c;导致很多人不愿意修家谱。以下是一些主要原因&#xff1a; 1、信息获取难度&#xff1a; 家谱的修订需要大量的历史资料和族谱记录。许多家庭的老谱由于时间久…

Node + HTML搭建自己的ChatGPT [基础版]

文章目录 明明外面的ChatGPT产品那么多了&#xff0c;为什么要在本地搭建自己的ChatGPT呢&#xff1f;整体架构流程1. 获取APIKey1.1 常见的AI模型1.2 为什么选DeepSeek1.3 怎么获取DeepSeek的APIKey1.3.1 注册并登录DeepSeek开放平台1.3.2 选择API keys1.3.3 创建API key1.3.4…