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

Webgl利用缓冲区绘制三角形

news 2026/5/14 15:12:10

在这里插入图片描述

什么是attribute 变量

它是一种存储限定符，表示定义一个attribute的全局变量，这种变量的数据将由外部向顶点着色器内传输，并保存顶点相关的数据，只有顶点着色器才能使用它

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><canvas id="webgl" width="200" height="200"></canvas><script>const webgl = document.getElementById('webgl')const gl = webgl.getContext('webgl')// 创建着色器const vertexShader = gl.createShader(gl.VERTEX_SHADER)const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)// 绑定数据源gl.shaderSource(vertexShader, `attribute vec4 a_Position;void main(){gl_Position = a_Position;}`)gl.shaderSource(fragmentShader, `void main(){gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);}`)// 编译着色器gl.compileShader(vertexShader)gl.compileShader(fragmentShader)// 创建着色器程序const program = gl.createProgram()// 绑定着色器gl.attachShader(program, vertexShader)gl.attachShader(program, fragmentShader).// 连接着色器gl.linkProgram(program)// 使用着色器gl.useProgram(program)// 定义一个类型数组保存顶点坐标值const vertices = new Float32Array([0.0, 0.5, -0.5, -0.5, 0.5, -0.5])// 创建缓冲区const vertexBuffer = gl.createBuffer()// 绑定缓冲区gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)// 存入数据gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)// 获取到顶点着色器中变量const a_Position = gl.getAttribLocation(program, 'a_Position')// 从当前绑定的缓冲区中读取顶点数据(index, size, type, normalized, stride, offset)gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0)// 激活变量的使用gl.enableVertexAttribArray(a_Position)// 绘制指定位置的三角图形gl.drawArrays(gl.TRIANGLES, 0, 3)</script>
</body></html>

相关文章：

Webgl利用缓冲区绘制三角形

什么是attribute 变量 它是一种存储限定符&#xff0c;表示定义一个attribute的全局变量&#xff0c;这种变量的数据将由外部向顶点着色器内传输&#xff0c;并保存顶点相关的数据&#xff0c;只有顶点着色器才能使用它 <!DOCTYPE html> <html lang"en"&g…...

编程日记 2023/8/29 1:43:27

正则表达式应用

正则表达式应用 正则匹配以{开头&#xff0c;以}结尾 \{.*?\}正则匹配以[开头&#xff0c;以]结尾 \[.*?\]校验数字的表达式 数字&#xff1a;^[0-9]*$n位的数字&#xff1a;^\d{n}$至少n位的数字&#xff1a;^\d{n,}$m-n位的数字&#xff1a;^\d{m,n}$零和非零开头的数字…...

编程日记 2023/8/29 1:42:26

9.4 【C语言】用指针处理链表

9.4.1 什么是链表 它是动态地进行存储分配的一种结构。 链表中各元素在内存中的地址是不连续的。要找某一元素&#xff0c;必须先找到上一个元素&#xff0c;根据它提供的下一元素地址才能找到下一个元素。 如果不提供“头指针”&#xff0c;则整个链表无法访问。 9.4.2 建…...

编程日记 2023/8/29 1:41:25

后端面试话术集锦第四篇：rabbitmq面试话术

🚗后端面试集锦目录 💖后端面试话术集锦第一篇：spring面试话术💖 💖后端面试话术集锦第二篇：spring boot面试话术💖 💖后端面试话术集锦第三篇：spring cloud面试话术💖 💖后端面试话术集锦第四篇：ElasticSearch面试话术💖 💖后端面试话术集锦第五篇：r…...

编程日记 2023/8/29 1:40:24

Linux目录结构与文件管理（01） （三）

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 前言 一、Linux 系统的组成 二、目录结构 根目录 三、文件管理 目录管理 总结 前言 今天主要学习了Linux的目录结构&#xff0c;主要是一些命令的含义和用法&am…...

编程日记 2023/8/29 1:39:22

OpenCV为老照片，黑白照片增加色彩

Colorful Image Colorization 图片的颜色上色&#xff0c;主要使用到了CNN卷积神经网络&#xff0c;作者在ImageNet数据集上进行了大量的训练&#xff0c;并将此问题使用在分类任务中&#xff0c;以解决问题的潜在的不确定性&#xff0c;并在训练时使用颜色重新平衡的损失函数方…...

编程日记 2023/8/29 1:38:21

HTML之VSCode简单配置与创建

目录 插件下载 然后输入源码&#xff1a; 使用 效果 插件下载 下载这个插件后可以直接运行&#xff1a; 然后创建一个文件&#xff1a; 然后输入源码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"…...

编程日记 2023/8/29 1:37:19

2023亿发一体化新零售POS收银解决方案，打造连锁门店经营新未来

在零售业不断演变的今天&#xff0c;门店形态繁多&#xff0c;收银环节的共通性与差异性并存。传统的通用解决方案已不适应多样化的业态需求&#xff0c;而在线上线下一体化的时代背景下&#xff0c;全渠道经营能力也成为商家的迫切需求。 一体化新零售POS收银系统&#xff0c…...

编程日记 2023/8/29 1:36:18

Android ---使用Jenkins 打包release版本不能安装或者安装后不显示APP

大家在用 Jenkins的时候&#xff0c;是不是会觉得很爽&#xff0c;因为他在用的过程中&#xff0c;是无脑的&#xff0c;毕竟一键触发&#xff01;&#xff01;&#xff01;&#xff01; 这边记录一个昨天&#xff0c;今天遇到的一个坑货问题&#xff0c;别人提交了所有代码&am…...

编程日记 2023/8/29 1:35:15

【Spring】什么是 AOP(面向切面编程) ? 为什么要有 AOP ? 如何实现 Spring AOP ?

文章目录 前言一、什么是 AOP ?二、为什么要使用 AOP ?三、 AOP 的组成四、Spring AOP 的实现1, 添加依赖2, 定义切面3, 定义切点4, 定义通知5, 创建连接点 总结 前言 各位读者好, 我是小陈, 这是我的个人主页, 希望我的专栏能够帮助到你: &#x1f4d5; JavaSE基础: 基础语法…...

编程日记 2023/8/29 1:34:14

11.并发：自旋锁

原子操作和自旋锁的区别 相同点都是保护共享资源。 不同点在于&#xff1a; 原子操作简单易用&#xff0c;但只能做计数操作&#xff0c;保护的东西太少。 自旋锁主要用于多核处理器。短时期的轻量级加锁&#xff0c;加锁失败时原地打转、忙等待。避免了上下文调度和系统开销较…...

编程日记 2023/8/29 1:33:13

使用EF Core更新与修改生产数据库

使用EF Core的Code First&#xff0c;在设计阶段&#xff0c;直接使用Database.EnsureCreated()和EnsureDeleted()可以快速删除、更新最新的数据结构。由于没有什么数据&#xff0c;删除的风险非常低。但是对于已经投入生产的数据库&#xff0c;这个方法就绝对不可行了。 考虑…...

编程日记 2023/8/29 1:32:12

法律小程序开发：让法律咨询更便捷

在现代社会&#xff0c;法律咨询服务越来越受到人们的重视和需求。为了方便用户预约法律咨询&#xff0c;很多律所都开始使用小程序来提供在线预约服务。那么&#xff0c;如何制作一款律所预约小程序呢&#xff1f; 首先&#xff0c;我们可以选择乔拓云网作为制作小程序的平台。…...

编程日记 2023/8/29 1:31:09

【C++多线程】C++11互斥锁和条件变量实现生产者消费者模型

先看几个问题&#xff0c;第三个问题可以先看代码然后再理解 Q1&#xff1a;临界区在哪 A1: 队列中元素在「生产者生产&#xff08;push&#xff09;」和「消费者消费&#xff08;pop&#xff09;」时就是临界区 Q2&#xff1a;同步操作在哪 A2: 很显然&#xff0c;队列只有…...

编程日记 2023/8/29 1:30:08

Webpack迁移Vite采坑指南

前言 本文不介绍什么是webpack、什么是vite&#xff0c;也不分析为什么要迁移。如果你想从webpack迁移到vite&#xff0c;你可能会遇到一些坑&#xff0c;这里我会尽量详细地介绍每一种可能遇到的坑以及解决办法。 老规矩&#xff0c;先说AI的评价&#xff1a;这篇从webpack迁…...

编程日记 2023/8/29 1:29:07

设计模式-职责链模式

文章目录 职责链模式模式概述主要角色适用场景实现步骤优点注意事项 定义职责链结构示例总结 职责链模式 职责链模式是一种行为设计模式&#xff0c;它可以将请求的发送者和请求的处理者解耦&#xff0c;并按照预定义的顺序处理请求。职责链模式常用于需要逐级审批或转交处理的…...

编程日记 2023/8/29 1:28:06

CMake学习笔记-VSCode使用Cmake编译C++工程

环境 Win MinGW CMake Git 单文件工程 # 1 指定最小版本号 cmake_minimum_required(VERSION 3.10) # 2 指定工程名 project(Tutorial) # 3 设置编译器路径 set(CMAKE_C_COMPILER "D:/ProgramPackage/mingw64/mingw64/bin/gcc.exe") set(CMAKE_CXX_COMPILER &q…...

编程日记 2023/8/29 1:27:05

redis相关

如果redis没有设置expire&#xff0c;他是否默认永不过期&#xff1f; 清理线上Redis没有设置过期时间的key_青苔小榭的博客-CSDN博客 如何给Redis中未设置过期时间key添加过期时间&#xff1f; - 知乎 Redis中的几种更新策略_如何实现redis数据的局部更新_LG_985938339的博客…...

编程日记 2023/8/29 1:26:04

【VRTK4.0运动专题】轴移动AxisMove（真实身体的移动）

文章目录 1、概览2、释义3、属性设置 1、概览 2、释义 “竖直轴”控制的行为“水平轴”控制的行为1Vertical-Slide 滑动Horizontal-Slide 滑动2Vertical-Slide 滑动Horizontal-SmoothRotate 转动3Vertical-Slide 滑动Horizontal-SnapRotate 转动&#xff08;不连续&#xff09…...

编程日记 2023/8/29 1:24:59

【vue2-helper插件】提供Mixins和组件库相关的类型提示、智能补全、跳转等功能~

Vue2-helper - 为你的 Vue2 开发增添智慧 ✨ &#x1f680; 辅助Vue2开发中的Mixins、组件库、Vue-router的智能补全、语义高亮、跳转支持、Hover 提示等&#xff0c;提升Vue2开发体验。 功能特色 ✨ ✅ 配置式缓存设计&#xff1a;秒级切换体验&#xff0c;让开发如丝般顺滑…...

编程日记 2023/8/29 1:23:58

从STM32移植过来：在GD32F450上快速跑通USB主机MSC（含完整代码）

从STM32到GD32F450的USB主机MSC移植实战指南 对于长期使用STM32进行嵌入式开发的工程师而言&#xff0c;当项目需要迁移至GD32平台时&#xff0c;既有的代码资产如何高效复用成为关键挑战。本文将以USB主机模式下Mass Storage Class&#xff08;MSC&#xff09;功能为例&#x…...

编程新知 2026/5/14 14:22:25

Android WMS实战：一个取巧的closeSystemDialogs，解决透明Activity横屏导致桌面布局错乱

Android WMS实战&#xff1a;巧用closeSystemDialogs解决透明Activity横屏导致的桌面布局错乱 在Android系统开发中&#xff0c;窗口管理服务&#xff08;WindowManagerService&#xff0c;简称WMS&#xff09;一直是开发者需要深入理解的核心模块。今天我们要探讨的是一个非常…...

编程新知 2026/5/14 14:17:06

Gemini Pro v1.5 vs v1.0 API性能对比实测（延迟↓42%，成本↑还是↓？这份报告仅限本周开放）

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;Gemini Pro高级功能解锁指南 Gemini Pro 作为 Google 推出的高性能多模态大模型&#xff0c;其高级功能需通过 API 配置与结构化提示工程协同激活。以下为关键能力启用路径及实践要点。 启用多轮上下文…...

编程新知 2026/5/14 13:06:13

白细胞介素（Interleukins, ILs）的研究进展与生物学功能

白细胞介素&#xff08;Interleukins, ILs&#xff09;是一类由白细胞产生并参与细胞间信号传导的细胞因子&#xff0c;自1979年命名以来&#xff0c;已成为免疫学研究的核心领域。目前已发现至少38种白细胞介素&#xff0c;其作为小分子多肽或糖蛋白&#xff0c;通过调控免疫细…...

编程新知 2026/5/14 12:36:49

PyInstaller打包PyTorch项目，为什么我最终放弃了单文件exe？

PyInstaller打包PyTorch项目&#xff1a;为什么单文件exe不是最佳选择&#xff1f; 当我们需要将基于PyTorch的AI应用分发给终端用户时&#xff0c;打包工具的选择往往决定了最终用户体验的好坏。许多开发者最初会被PyInstaller的单文件exe方案吸引——毕竟&#xff0c;谁不想给…...

编程新知 2026/5/14 9:33:57

ARM GICD_CTLR寄存器详解与中断控制实践

1. GICD_CTLR寄存器概述GICD_CTLR是ARM通用中断控制器(GIC)中Distributor模块的核心控制寄存器&#xff0c;作为中断系统的"总开关"&#xff0c;它直接决定了整个中断控制器的行为模式。在GICv3/v4架构中&#xff0c;这个32位寄存器主要实现三大核心功能&#xff1a;…...

编程新知 2026/5/14 9:29:18

AI记忆系统健康管理：行为数据驱动的OpenClaw记忆污染解决方案

1. 项目概述&#xff1a;为AI记忆系统装上“听诊器”如果你正在用OpenClaw&#xff0c;或者任何类似的AI智能体开发框架&#xff0c;那你肯定对它的记忆系统又爱又恨。爱的是&#xff0c;它能记住你项目里的关键代码片段、常用指令&#xff0c;下次对话时能直接调出来用&#x…...

编程新知 2026/5/14 9:20:27

基于RAG的企业级知识问答系统：从向量检索到LLM生成的完整实践

1. 项目概述&#xff1a;一个AI驱动的企业级知识管理与问答系统最近在GitHub上看到一个挺有意思的项目&#xff0c;叫akshata29/entaoai。乍一看这个名字&#xff0c;可能有点摸不着头脑&#xff0c;但稍微拆解一下就能明白它的核心定位。entaoai&#xff0c;我猜是“Enterpris…...

编程新知 2026/5/14 9:03:30

DeepRTL：基于分层注意力机制的Verilog代码生成模型解析

1. DeepRTL模型架构解析DeepRTL模型基于CodeT5架构进行改进&#xff0c;专门针对Verilog代码的生成和理解任务进行了优化。模型采用encoder-decoder结构&#xff0c;其中encoder负责理解Verilog代码的语义&#xff0c;decoder则用于生成符合硬件设计规范的Verilog代码。1.1 模型…...

编程新知 2026/5/14 7:23:39

半导体行业如何应对政策不确定性：从游说策略到企业决策

1. 从一篇旧报道看半导体行业的“华盛顿困局”最近整理资料时&#xff0c;翻到一篇2012年EE Times的旧文&#xff0c;标题是《硅谷国度&#xff1a;选举后的政治僵局或将持续——SIA CEO如是说》。文章不长&#xff0c;但里面半导体行业协会&#xff08;SIA&#xff09;时任CEO…...

编程新知 2026/5/14 5:45:05