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>效果如下：
相关文章：
WEBGL（2）：绘制单个点
代码如下： <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevi…...
C# task多线程创建，暂停，继续，结束使用
1、多线程任务创建 private void button1_Click(object sender, EventArgs e) //创建线程{CancellationToken cancellationToken tokensource.Token;Task.Run(() > //模拟耗时任务{for (int i 0; i < 100; i){if (cancellationToken.IsCancellationRequested){return;…...
界面控件DevExpress WinForms（v23.2）下半年发展路线图
本文主要概述了官方在下半年（v23.2）中一些与DevExpress WinForms相关的开发计划，重点关注的领域将是可访问性支持和支持.NET 8。 DevExpress WinForms有180组件和UI库，能为Windows Forms平台创建具有影响力的业务解决方案。同时能…...
vue实现按需加载的多种方式
1.import动态导入 const Home () > import( /* webpackChunkName: "Home" */ /views/Home.vue); 2.使用vue异步组件resolve 这种方式没有成功 //const 组件名 resolve > require([‘组件路径’],resolve) //（这种情况下一个组件生成一个js文件…...
el-switch组件在分页情况下的使用
1.需求： 系统使用者在点击发布状态的开关后，可以对应的发布或者取消发布试卷 2.前端代码： html代码（这里不贴其他表单项的代码了，直接贴el-Switch组件的代码）： <!-- qwy: 使用Switch组件，设置发布状态，业务逻辑：在页面初始渲染的时候应该查询发布状态，以根据状…...
【100天精通python】Day49：python web编程_web框架，Flask的使用
目录 1 Web 框架 2 python 中常用的web框架 3 Flask 框架的使用 3.1 Flask框架安装 3.2 第一个Flask程序 3.3 路由 3.3.1 基本路由 3.3.2 动态路由 3.3.3 HTTP 方法 3.3.4 多个路由绑定到一个视图函数 3.3.5 访问URL 参数的路由 3.3.6 带默认值的动态路由 3.3.7 带…...
sql 查重以及删除重复
查重 select count(1),content from t_mall_longping group by content having count(1)>1 稳重删除重复（技术来源于 百度文心一言，好屌呀） CREATE TABLE tmp_duplicates ( hxid INT PRIMARY KEY );INSERT INTO tmp_duplicates SEL…...
Flux语言 -- InfluxDB笔记二
1. 基础概念理解 1.1 语序和MySQL不一样，像净水一样通过管道一层层过滤 1.2 不同版本FluxDB的语法也不太一样 2. 基本表达式 import "array" s 10 * 3 // 浮点型只能与浮点型进行运算 s1 9.0 / 3.0 s2 10.0 % 3.0 // 等于 1 s3 10.0 ^ 3.0 // 等于…...
18.Oauth2-微服务认证
1.Oauth2 OAuth 2.0授权框架支持第三方支持访问有限的HTTP服务，通过在资源所有者和HTTP服务之间进行一个批准交互来代表资源者去访问这些资源，或者通过允许第三方应用程序以自己的名义获取访问权限。 为了方便理解，可以想象OAuth2.0就是在用…...
vue和node使用websocket实现数据推送，实时聊天
需求：node做后端根据websocket，连接数据库，数据库的字段改变后，前端不用刷新页面也能更新到数据，前端也可以发送消息给后端，后端接受后把前端消息做处理再推送给前端展示 1.初始化node，生成pac…...
汽车电子笔记之：基于AUTOSAR的多核监控机制
目录 1、概述 2、系统监控的目标 2.1、任务的状态机 2.2、任务服务函数 2.3、任务周期性事件 2.4、时间监控的指标 2.5、时间监控的原理 2.6、CPU负载率监控原理 2.6.1、设计思路 2.6.2、监控方法的评价 3、基于WDGM模块热舞时序监控方法 3.1、活跃监督 3.2、截至时…...
GDB 源码分析 -- 断点源码解析
文章目录 一、断点简介1.1 硬件断点1.2 软件断点 二、断点源码分析2.1 断点相关结构体2.1.1 struct breakpoint2.1.2 struct bp_location 2.2 断点源码简介2.3 break设置断点2.4 enable break2.5 disable breakpoint2.6 delete breakpoint2.7 info break 命令源码解析 三、Linu…...
SpringMVC概述与简单使用
1.SpringMVC简介 SpringMVC也叫做Spring web mvc,是 Spring 框架的一部分，是在 Spring3.0 后发布的。 2.SpringMVC优点 1.基于 MVC 架构 基于 MVC 架构，功能分工明确。解耦合， 2.容易理解，上手快；使用简单。 就可以…...
传输层—UDP原理详解
目录 前言 1.netstat 2.pidof 3.UDP协议格式 4.UDP的特点 5.面向数据报 6.UDP的缓冲区 7.UDP使用注意事项 8.基于UDP的应用层协议 总结 前言 在之前的文章中为大家介绍了关于网络协议栈第一层就是应用层，包含套接字的使用，在应用层编码实现服务…...
CK-GW06-E03与汇川PLC的EtherNet/IP通信
准备阶段： CK-GWO6-E03网关POE交换机网线汇川PLC编程软件汇川AC801-0221-U0R0型号PLC 1.打开汇川PLC编程软件lnoProShop(V1.6.2)SP2 新建工程，选择对应的PLC型号，编程语言选择为“结构化文本（ST）语言”，然…...
UI界面自动化BagePage
常用basepage模块代码 # -*- coding: utf-8 -*- # Desc: UI自动化测试的一些基础浏览器操作方法# 第三方库导入 import time from logging import config import randomimport allure from selenium.webdriver.common.alert import Alert from selenium.webdriver.remote.webe…...
北京开发APP的费用明细
开发APP项目时，在功能确定后需要知道有哪些可能的费用，安排项目预算。北京开发APP的费用明细可能会包括以下几个部分，每个部分都会产生一些费用。今天和大家分享APP费用明细有哪些，希望对大家有所帮助。北京木奇移动技术有限公司&…...
2023年MySQL核心技术第一篇
目录 一 . 存储：一个完整的数据存储过程是怎样的？ 1.1 数据存储过程 1.1.1 创建MySQl 数据库 1.1.1.1 为什么我们要先创建一个数据库，而不是直接创建数据表？ 1.1.1.2基本操作部分 1.2 选择索引问题 二 . 字段：这么多的…...
通讯协议056——全网独有的OPC HDA知识一之接口（十一）IOPCHDA_Playback
本文简单介绍OPC HDA规范的IOPCHDA_Playback（可选）接口方法，更多通信资源请登录网信智汇(wangxinzhihui.com)。 此接口支持历史服务器的播放功能。这提供了从历史服务器获得初始数据集的能力，然后获得历史数据的持续更新。这与异…...
数学建模：数据的预处理
🔆 文章首发于我的个人博客：欢迎大佬们来逛逛 文章目录 数据预处理数据变换数据清洗缺失值处理异常值处理 数据预处理 数据变换 常见的数据变换的方式：通过某些简单的函数进行数据变换。 x ′ x 2 x ′ x x ′ log ( x ) ∇ f ( x k )…...
3个真实场景告诉你，Avogadro 2分子建模软件如何改变化学研究方式
3个真实场景告诉你，Avogadro 2分子建模软件如何改变化学研究方式 【免费下载链接】avogadroapp Avogadro is an advanced molecular editor designed for cross-platform use in computational chemistry, molecular modeling, bioinformatics, materials science, …...
指纹浏览器缓存机制原理与环境数据安全管控策略
引言绝大多数使用者在日常运用指纹浏览器搭建独立虚拟浏览环境时，重点注意力都集中在硬件指纹修改、代理网络绑定、基础参数调试等显性操作之上，往往忽略了软件内部缓存运行机制带来的各类隐性影响。虚拟环境运行过程中自动生成的页面缓存、站点数据、本…...
枚举进阶：从常量集合到业务逻辑承载者的实战扩展技巧
1. 项目概述：从“能用”到“好用”的枚举进阶之路在软件开发中，枚举（Enum）是我们再熟悉不过的基础工具了。它把一组有限的、具名的常量组织在一起，让代码意图更清晰，避免“魔法数字”满天飞。但不知道你有没…...
别再傻傻重启了！用JRebel给IDEA装上‘秒级热更新’，Spring Boot开发效率翻倍
告别低效重启：用JRebel解锁Spring Boot开发的终极热更新体验 每次修改几行代码就要等待漫长的应用重启？Spring Boot DevTools的热加载功能已经无法满足你对开发效率的极致追求？作为长期奋战在Java开发一线的工程师，我深知这种重复…...
如何用Path of Building物品制作系统打造终极装备：5个简单步骤
如何用Path of Building物品制作系统打造终极装备：5个简单步骤 【免费下载链接】PathOfBuilding Offline build planner for Path of Exile. 项目地址: https://gitcode.com/gh_mirrors/pat/PathOfBuilding 你是否曾为《流放之路》中装备制作耗费大量通货却得…...
从1秒到60ms：手把手教你用STM32硬件SPI驱动GC9A01 LCD，性能飙升实战
从1秒到60ms：STM32硬件SPI驱动GC9A01 LCD的性能优化实战 当你在嵌入式项目中遇到屏幕刷新缓慢的问题时，那种卡顿感简直让人抓狂。想象一下，你刚拿到一块1.28寸的GC9A01 LCD屏幕，满心欢喜地准备展示你的项目成果，却发现…...
深度解读｜当增强现实遇上美妆教学：帕克西的AR美妆实训解决方案
在职业院校的形象设计、美容化妆等专业中，实训教学长期面临耗材成本高、练习机会有限、考核标准难量化等难题。学生每练习一次就消耗一次化妆品；教师逐个检查妆容步骤，费时费力。 增强现实（AR）技术的介入，正…...
Lenovo Legion Toolkit 维护版继续升级
Lenovo Legion Toolkit 维护版在继续更新。 项目地址：https://github.com/SSC-STUDIO/LenovoLegionToolkit 下载地址：https://github.com/SSC-STUDIO/LenovoLegionToolkit/releases/latest 这个版本面向 Windows 上的 Legion / IdeaPad Gaming / LOQ …...
Anaconda安装后必做的两件事：快速配置清华镜像源和验证环境（附常用conda命令清单）
Anaconda安装后的高效配置指南：镜像加速与环境验证全攻略 当你第一次打开Anaconda Prompt时，那种面对全新工具既兴奋又忐忑的心情我深有体会。作为Python数据科学领域的瑞士军刀，Anaconda的强大功能背后隐藏着许多新手容易忽略的配置细节。本…...
终极指南：HS2-HF_Patch汉化补丁完全免费使用手册
终极指南：HS2-HF_Patch汉化补丁完全免费使用手册 【免费下载链接】HS2-HF_Patch Automatically translate, uncensor and update HoneySelect2! 项目地址: https://gitcode.com/gh_mirrors/hs/HS2-HF_Patch 还在为Honey Select 2的日文界面而烦恼吗ÿ…...