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

WEBGL（2）：绘制单个点

news 2026/3/30 23:23:47

代码如下：

<!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）：绘制单个点

代码如下&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevi…...

编程日记 2023/9/1 11:32:58

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;…...

编程日记 2023/9/1 11:31:56

界面控件DevExpress WinForms（v23.2）下半年发展路线图

本文主要概述了官方在下半年&#xff08;v23.2&#xff09;中一些与DevExpress WinForms相关的开发计划&#xff0c;重点关注的领域将是可访问性支持和支持.NET 8。 DevExpress WinForms有180组件和UI库&#xff0c;能为Windows Forms平台创建具有影响力的业务解决方案。同时能…...

编程日记 2023/9/1 11:30:55

vue实现按需加载的多种方式

1.import动态导入 const Home () > import( /* webpackChunkName: "Home" */ /views/Home.vue); 2.使用vue异步组件resolve 这种方式没有成功 //const 组件名 resolve > require([‘组件路径’],resolve) //&#xff08;这种情况下一个组件生成一个js文件…...

编程日记 2023/9/1 11:29:53

el-switch组件在分页情况下的使用

1.需求： 系统使用者在点击发布状态的开关后，可以对应的发布或者取消发布试卷 2.前端代码： html代码（这里不贴其他表单项的代码了，直接贴el-Switch组件的代码）： <!-- qwy: 使用Switch组件，设置发布状态，业务逻辑：在页面初始渲染的时候应该查询发布状态，以根据状…...

编程日记 2023/9/1 11:28:52

【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 带…...

编程日记 2023/9/1 11:27:51

sql 查重以及删除重复

查重 select count(1),content from t_mall_longping group by content having count(1)>1 稳重删除重复&#xff08;技术来源于 百度文心一言&#xff0c;好屌呀&#xff09; CREATE TABLE tmp_duplicates ( hxid INT PRIMARY KEY );INSERT INTO tmp_duplicates SEL…...

编程日记 2023/9/1 11:26:50

Flux语言 -- InfluxDB笔记二

1. 基础概念理解 1.1 语序和MySQL不一样&#xff0c;像净水一样通过管道一层层过滤 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 // 等于…...

编程日记 2023/9/1 11:25:49

18.Oauth2-微服务认证

1.Oauth2 OAuth 2.0授权框架支持第三方支持访问有限的HTTP服务&#xff0c;通过在资源所有者和HTTP服务之间进行一个批准交互来代表资源者去访问这些资源&#xff0c;或者通过允许第三方应用程序以自己的名义获取访问权限。 为了方便理解&#xff0c;可以想象OAuth2.0就是在用…...

编程日记 2023/9/1 11:24:48

vue和node使用websocket实现数据推送，实时聊天

需求&#xff1a;node做后端根据websocket&#xff0c;连接数据库&#xff0c;数据库的字段改变后&#xff0c;前端不用刷新页面也能更新到数据&#xff0c;前端也可以发送消息给后端&#xff0c;后端接受后把前端消息做处理再推送给前端展示 1.初始化node&#xff0c;生成pac…...

编程日记 2023/9/1 11:23:47

汽车电子笔记之：基于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、截至时…...

编程日记 2023/9/1 11:22:46

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…...

编程日记 2023/9/1 11:21:43

SpringMVC概述与简单使用

1.SpringMVC简介 SpringMVC也叫做Spring web mvc,是 Spring 框架的一部分&#xff0c;是在 Spring3.0 后发布的。 2.SpringMVC优点 1.基于 MVC 架构 基于 MVC 架构&#xff0c;功能分工明确。解耦合&#xff0c; 2.容易理解&#xff0c;上手快&#xff1b;使用简单。 就可以…...

编程日记 2023/9/1 11:20:42

传输层—UDP原理详解

目录 前言 1.netstat 2.pidof 3.UDP协议格式 4.UDP的特点 5.面向数据报 6.UDP的缓冲区 7.UDP使用注意事项 8.基于UDP的应用层协议 总结 前言 在之前的文章中为大家介绍了关于网络协议栈第一层就是应用层&#xff0c;包含套接字的使用&#xff0c;在应用层编码实现服务…...

编程日记 2023/9/1 11:19:41

CK-GW06-E03与汇川PLC的EtherNet/IP通信

准备阶段&#xff1a; CK-GWO6-E03网关POE交换机网线汇川PLC编程软件汇川AC801-0221-U0R0型号PLC 1.打开汇川PLC编程软件lnoProShop(V1.6.2)SP2 新建工程&#xff0c;选择对应的PLC型号&#xff0c;编程语言选择为“结构化文本&#xff08;ST&#xff09;语言”&#xff0c;然…...

编程日记 2023/9/1 11:18:40

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…...

编程日记 2023/9/1 11:17:39

北京开发APP的费用明细

开发APP项目时&#xff0c;在功能确定后需要知道有哪些可能的费用&#xff0c;安排项目预算。北京开发APP的费用明细可能会包括以下几个部分&#xff0c;每个部分都会产生一些费用。今天和大家分享APP费用明细有哪些&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&…...

编程日记 2023/9/1 11:16:38

2023年MySQL核心技术第一篇

目录 一 . 存储&#xff1a;一个完整的数据存储过程是怎样的&#xff1f; 1.1 数据存储过程 1.1.1 创建MySQl 数据库 1.1.1.1 为什么我们要先创建一个数据库&#xff0c;而不是直接创建数据表&#xff1f; 1.1.1.2基本操作部分 1.2 选择索引问题 二 . 字段&#xff1a;这么多的…...

编程日记 2023/9/1 11:15:36

通讯协议056——全网独有的OPC HDA知识一之接口（十一）IOPCHDA_Playback

本文简单介绍OPC HDA规范的IOPCHDA_Playback&#xff08;可选&#xff09;接口方法&#xff0c;更多通信资源请登录网信智汇(wangxinzhihui.com)。 此接口支持历史服务器的播放功能。这提供了从历史服务器获得初始数据集的能力&#xff0c;然后获得历史数据的持续更新。这与异…...

编程日记 2023/9/1 11:14:34

数学建模：数据的预处理

&#x1f506; 文章首发于我的个人博客&#xff1a;欢迎大佬们来逛逛 文章目录 数据预处理数据变换数据清洗缺失值处理异常值处理 数据预处理 数据变换 常见的数据变换的方式&#xff1a;通过某些简单的函数进行数据变换。 x ′ x 2 x ′ x x ′ log ⁡ ( x ) ∇ f ( x k )…...

编程日记 2023/9/1 11:13:33

Proteus仿真C51单片机：用汇编实现一个简易的脉冲计数器（附完整代码和电路图）

Proteus仿真C51单片机&#xff1a;用汇编实现一个简易的脉冲计数器&#xff08;附完整代码和电路图&#xff09; 当你第一次接触单片机编程时&#xff0c;可能会被各种寄存器、中断和端口配置搞得晕头转向。今天&#xff0c;我们就用一个实实在在的脉冲计数器项目&#xff0c;带…...

编程新知 2026/3/30 23:22:30

用Multisim 14.0和AD620/OP07，手把手教你搭建一个能用的简易心电放大电路

从零开始构建心电放大电路&#xff1a;Multisim 14.0与AD620/OP07实战指南 在生物医学信号处理领域&#xff0c;心电信号采集一直是极具挑战性的课题。想象一下&#xff0c;当医生将电极贴在你胸口时&#xff0c;那些微弱的电信号是如何被放大并转化为清晰波形图的&#xff1f;…...

编程新知 2026/3/30 23:20:29

COMSOL激光烧蚀激光融覆选区激光融化 激光直接沉积过程中，快速熔化凝固和多组分粉末的加入导...

COMSOL激光烧蚀激光融覆选区激光融化 激光直接沉积过程中&#xff0c;快速熔化凝固和多组分粉末的加入导致了熔池中复杂的输运现象。 热行为对凝固组织和性能有显著影响。 通过三维数值模型来模拟在316L上直接激光沉积过程中的传热、流体流动、凝固过程。 通过瞬态热分布可以获…...

编程新知 2026/3/30 23:08:17

Packet Tracer实战：交换机基础配置与常见问题排查

1. Packet Tracer与交换机配置入门 第一次接触网络设备配置的朋友可能会觉得交换机是个神秘的黑盒子。其实用Cisco Packet Tracer这个仿真工具&#xff0c;你完全可以在自己的电脑上搭建一个虚拟实验室。我刚开始学习时也是从这个工具入手的&#xff0c;它比真机操作更友好——…...

编程新知 2026/3/30 23:02:16

原创：黄大年茶思屋难题揭榜第11期｜5道核心题精简公开·被退稿求技术指正

黄大年茶思屋难题揭榜第11期&#xff5c;5道核心题精简公开被退稿求技术指正 作者&#xff1a;华夏之光永存 摘要 这五道题我们已完整解题并提交黄大年茶思屋难题揭榜&#xff0c;最终被直接退稿&#xff0c;但平台未给出任何具体技术驳回理由、未指明缺陷、未提供修改方向。我…...

编程新知 2026/3/30 23:02:16

智能驾驶之红绿灯识别 斑马线识别 减速带识别 yolo数据集 深度学习数据集 第10625期

智能驾驶之红绿灯识别 斑马线识别 减速带识别 yolo第10625期 README 项目概述 本数据集聚焦于智能驾驶核心道路要素的识别任务&#xff0c;提供高质量标注图像&#xff0c;专为训练和评估目标检测模型而设计。数据涵盖城市道路常见交通设施与标记&#xff0c;适用于自动驾驶感知…...

编程新知 2026/3/30 22:09:41

SenseVoice-Small ONNX标点评测：CT-Transformer在不同文本长度下的F1值

SenseVoice-Small ONNX标点评测&#xff1a;CT-Transformer在不同文本长度下的F1值 1. 引言 语音识别技术已经深入到我们工作和生活的方方面面&#xff0c;从手机语音助手到会议纪要自动生成&#xff0c;都离不开它的身影。然而&#xff0c;对于很多开发者和小型团队来说&…...

编程新知 2026/3/30 21:39:04

OpenClaw 的模型预训练中，是否使用了对比学习与自回归的混合目标？

关于OpenClaw模型预训练中是否使用了对比学习与自回归的混合目标&#xff0c;这个问题其实触及了当前大语言模型训练方法中一个比较核心的演进方向。从公开的技术报告和论文细节来看&#xff0c;OpenClaw的设计思路确实体现了将不同训练目标融合的趋势&#xff0c;但具体到“对…...

编程新知 2026/3/30 21:24:59

ICP配准遇到点云尺度不一致？3步搞定相似变换矩阵（附OpenCV代码）

ICP配准中处理点云尺度不一致的实战指南 在三维视觉开发领域&#xff0c;点云配准是SLAM、三维重建等应用中的基础操作。但当我们面对来自不同传感器或采集条件的点云数据时&#xff0c;经常会遇到一个棘手问题——两组点云的尺度不一致。这就像试图用厘米尺和英寸尺测量同一物…...

编程新知 2026/3/30 20:00:23

终极免费开源图像修复工具：ComfyUI-BrushNet完整使用指南

终极免费开源图像修复工具&#xff1a;ComfyUI-BrushNet完整使用指南 【免费下载链接】ComfyUI-BrushNet ComfyUI BrushNet nodes 项目地址: https://gitcode.com/gh_mirrors/co/ComfyUI-BrushNet 想要快速掌握AI图像编辑的核心技术&#xff1f;ComfyUI-BrushNet作为一款…...

编程新知 2026/3/30 17:58:28