WEBGL(2):绘制单个点

代码如下:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="js/glMatrix-0.9.6.min.js"></script><script>//顶点着色器let vertexstring = `attribute vec4 a_position;uniform     mat4    proj;void main(void){gl_Position =proj *  a_position;gl_PointSize=60.0;}`;//片元着色器let fragmentstring = `void main(void){gl_FragColor = vec4(0,0,1.0,1.0);}`;var projMat4 = mat4.create();var webgl;//function init() {initWebgl();initShader();initBuffer();draw();}//webgl初始化function initWebgl() {//获取webgl的容器对象let webglDiv = document.getElementById('myCanvas');//获取webGL对象webgl = webglDiv.getContext("webgl");//webGL视觉区域webgl.viewport(0, 0, webglDiv.clientWidth, webglDiv.clientHeight);//设置webgl投影坐标系mat4.ortho(0, webglDiv.clientWidth, webglDiv.clientHeight, 0, -1.0, 1.0, projMat4)}//Shader初始化function initShader() {//定义Shader//顶点shaderlet vsshader = webgl.createShader(webgl.VERTEX_SHADER);//片元shaderlet fsshader = webgl.createShader(webgl.FRAGMENT_SHADER);//	绑定shaderwebgl.shaderSource(vsshader, vertexstring);webgl.shaderSource(fsshader, fragmentstring);//	编译shaderwebgl.compileShader(vsshader);webgl.compileShader(fsshader);if (!webgl.getShaderParameter(vsshader, webgl.COMPILE_STATUS)) {var err = webgl.getShaderInfoLog(vsshader);alert(err);return;}if (!webgl.getShaderParameter(fsshader, webgl.COMPILE_STATUS)) {var err = webgl.getShaderInfoLog(fsshader);alert(err);return;}//创建shaderlet program = webgl.createProgram();//着色器绑定shaderwebgl.attachShader(program, vsshader);webgl.attachShader(program, fsshader)webgl.linkProgram(program);webgl.useProgram(program);webgl.program = program}//Buffer初始化 将数据绑定到shaderfunction initBuffer() {let pointPosition = new Float32Array([100.0, 100.0, 0.0, 1.0]);let aPsotion = webgl.getAttribLocation(webgl.program, "a_position");webgl.vertexAttrib4fv(aPsotion, pointPosition);let uniformProj = webgl.getUniformLocation(webgl.program, "proj");webgl.uniformMatrix4fv(uniformProj, false, projMat4);}//webgl绘制function draw() {webgl.clearColor(0.0, 0.0, 0.0, 1.0);webgl.clear(webgl.COLOR_BUFFER_BIT | webgl.DEPTH_BUFFER_BIT);webgl.drawArrays(webgl.POINTS, 0, 1);}</script>
</head><body onload="init()"><canvas id='myCanvas' width="1024" height='768'></canvas>
</body></html>

效果如下:

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

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

相关文章

Java单元测试及常用语句 | 京东物流技术团队

1 前言 编写Java单元测试用例&#xff0c;即把一段复杂的代码拆解成一系列简单的单元测试用例&#xff0c;并且无需启动服务&#xff0c;在短时间内测试代码中的处理逻辑。写好Java单元测试用例&#xff0c;其实就是把“复杂问题简单化&#xff0c;建单问题深入化“。在编写的…

英国选校8.27|8.29

目录 IC帝国理工学院 UCL伦敦大学学院​​​​​​​ Band A B C 专业院系 爱丁堡 曼彻斯特 KCL伦敦国王学院 Bristol布里斯托 华威 南安普顿 IC帝国理工学院 UCL伦敦大学学院 24qs专业位置双非雅思气候备注9 MSc Scientific and Data Intensive Computing MSc Ur…

在k8s中使用secret存储敏感数据与四种用法

当需要存储敏感数据时可以使用&#xff0c;secret会以密文的方式存储数据。 创建secret的四种方法 &#xff08;1&#xff09;通过--from-literal #每个--from-literal对应一个信息条目 kubectl create secret generic mysecret --from-literalusernameadmin --from-litera…

Spring Boot 中 Nacos 配置中心使用实战

官方参考文档 https://nacos.io/zh-cn/docs/quick-start-spring-boot.html 本人实践 1、新建一个spring boot项目 我的spirngboot版本为2.5.6 2、添加一下依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-…

无涯教程-JavaScript - CUBEMEMBERPROPERTY函数

描述 CUBEMEMBERPROPERTY函数从多维数据集返回成员属性的值。使用此函数可以验证多维数据集中是否存在成员名称,并返回该成员的指定属性。 语法 CUBEMEMBERPROPERTY (connection, member_expression, property)争论 Argument描述Required/OptionalconnectionName of the co…

JavaScript基础语法03——JS注释、结束符

哈喽&#xff0c;大家好&#xff0c;我是雷工&#xff01; 今天继续学习JavaScript基础语法知识&#xff0c;注释和结束符&#xff0c;以下为学习笔记。 一、JavaScript注释 JavaScript注释有什么作用&#xff1f; JavaScript注释可以提高代码的可读性&#xff0c;能够帮助像…

arduino仿真 SimulIDE1.0仿真器

SimulIDE 是一个开源的电子电路模拟器&#xff0c;支持模拟各种电子元器件的行为&#xff0c;可以帮助电子工程师和爱好者进行电路设计和测试。以下是 SimulIDE 的安装和使用说明&#xff1a; 安装 SimulIDE SimulIDE 可以在 Windows、Linux 和 Mac OS X 等操作系统上安装。您…

零知识证明(zk-SNARK)(二)

From Computational Problem to zk-SNARK 本部分就是将计算难题转换为多项式&#xff0c;然后使用zk-SNARK。 &#xff08;注&#xff1a;以下用 P&#xff0c;V 替代 Prover&#xff0c;Verifier&#xff09; 计算难题->R1CS R1CS(Rank-1 Constraint System)是一种能够…

jvm的内存区域

JVM 内存分为线程私有区和线程共享区&#xff0c;其中方法区和堆是线程共享区&#xff0c;虚拟机栈、本地方法栈和程序计数器是线程隔离的数据区。 1&#xff09;程序计数器 程序计数器&#xff08;Program Counter Register&#xff09;也被称为 PC 寄存器&#xff0c;是一块…

基于RabbitMQ的模拟消息队列之二---创建项目及核心类

一、创建项目 创建一个SpringBoot项目&#xff0c;环境&#xff1a;JDK8&#xff0c;添加依赖&#xff1a;Spring Web、MyBatis FrameWork(最主要&#xff09; 二、创建核心类 1.项目分层 2.核心类 在mqserver包中添加一个包&#xff0c;名字为core&#xff0c;表示核心类…

MIPI D-PHY的初始化(MIPI Alliance Xilinx)

DPHY的基本介绍及使用已有很多文章&#xff0c;基本是基于《MIPI Alliance Specification for D-PHY 》的内容&#xff0c;学习时也以此为准&#xff0c;可参考CSDN上的文章。着重讲述MIPI D-PHY的初始化部分 1 D-PHY的功能及使用 下面的文章讲的不错&#xff0c;既有理论&…

iOS swift5 扫描二维码

文章目录 1.生成二维码图片2.扫描二维码&#xff08;含上下扫描动画&#xff09;2.1 记得在info.plist中添加相机权限描述 1.生成二维码图片 import UIKit import CoreImagefunc generateQRCode(from string: String) -> UIImage? {let data string.data(using: String.En…

重要变更 | Hugging Face Hub 的 Git 操作不再支持使用密码验证

在 Hugging Face&#xff0c;我们一直致力于提升服务安全性&#xff0c;因此&#xff0c;我们将修改 Hugging Face Hub 的 Git 交互认证方式。 从 2023 年 10 月 1 日 开始&#xff0c;我们将不再接受密码作为命令行 Git 操作的认证方式。我们推荐使用更安全的认证方法&#xf…

A Mathematical Framework for Transformer Circuits—Part (1)

A Mathematical Framework for Transformer Circuits 前言Summary of ResultsREVERSE ENGINEERING RESULTSCONCEPTUAL TAKE-AWAYS Transformer OverviewModel SimplificationsHigh-Level ArchitectureVirtual Weights and the Residual Stream as a Communication ChannelVIRTU…

跳出Lambda表达式forEach()循环解决思路

背景 在一次需求开发时&#xff0c;发现使用Lambda的forEach()跳不出循环。如下示例代码&#xff0c;想在遍历满足条件时跳出循环。 public static void main(String[] args) {List<Integer> list Arrays.asList(1, 4, 5, 7, 9, 11);list.forEach(e -> {if (e % 2 …

ip route get ip地址 应用案例

应用场景 在做虚拟化实验用的虚拟机和实际的ECS云主机一般都会有多个网卡&#xff0c;网络的联通性是经常碰到的问题。比如在一个VM上有3个网卡&#xff0c;分别为ens160(和寄主机进行桥接的网卡10.0.0.128)、ens224&#xff08;连接仅主机网络10.0.0.0/24的网卡10.0.0.128&…

C语言面试题值反转字符串

知识捡漏本 1.C语言优先级 &#xff1a;左高于高于 右 2.定义宏函数product&#xff0c;调用product后&#xff0c;里面的i和i都是加两次1&#xff0c;i就是两个加2后的i相乘&#xff0c;i是开始的i和1后的i相乘。 3.用i (j4,k 8,m 16);这种定义方法&#xff0c;最终i和最后一…

2023最新Python重点知识万字汇总

这是一份来自于 SegmentFault 上的开发者 二十一 总结的 Python 重点。由于总结了太多的东西&#xff0c;所以篇幅有点长&#xff0c;这也是作者"缝缝补补"总结了好久的东西。 **Py2 VS Py3** * print成为了函数&#xff0c;python2是关键字* 不再有unicode对象…

AI图像行为分析算法 opencv

AI图像行为分析算法通过pythonopencv深度学习框架对现场操作行为进行全程实时分析&#xff0c;AI图像行为分析算法通过人工智能视觉能够准确判断出现场人员的作业行为是否符合SOP流程规定&#xff0c;并对违规操作行为进行自动抓拍告警。OpenCV是一个基于Apache2.0许可&#xf…

【Linux】多路IO转接问题-select

select&#xff1a; 首先设置一个lfd绑定服务端地址结构&#xff0c;用于监听新的连接。select函数调用&#xff0c;用于对整个fd数组进行监听&#xff0c;该数组最大限制1024&#xff0c;通过遍历&#xff0c;来确定是哪个fd有变化&#xff1a; 1.如果是lfd&#xff1a;那么可…