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

webgl-画任意多边形

news 2026/3/31 23:52:55

注意：

let canvas = document.getElementById('webgl')

canvas.width = window.innerWidth

canvas.height = window.innerHeight

let radio = window.innerWidth/window.innerHeight;

let ctx = canvas.getContext('webgl')

由于屏幕长宽像素不一样，导致了长宽像素比不是1，进而导致每个像素四边形不是正方形，画出来的图形有误差

需要let radio = window.innerWidth/window.innerHeight;计算

关键代码

for (let index = 0; index < n; index++) {

let angle = Math.PI*2/n * index;

let x = 0.5 * Math.cos(angle)/radio //解决像素比不是1的问题，导致画出的图形与预期不一致，如画圆可能画出来的时椭圆

let y = 0.5 * Math.sin(angle)

vertexs.push(x, y, (Math.random() -0.5) * 2, (Math.random() -0.5) * 2, (Math.random() -0.5) * 2)

}

控制多边形

let n = 3;

html

<!DOCTYPE html>

<head>

<style>

*{

margin: 0px;

padding: 0px;

}

</style>

</head>

<body>

<canvas id = 'webgl'>

您的浏览器不支持HTML5,请更换浏览器

</canvas>

<script src="./main.js"></script>

</body>

main.js

let canvas = document.getElementById('webgl')

canvas.width = window.innerWidth

canvas.height = window.innerHeight

let radio = window.innerWidth/window.innerHeight;

let ctx = canvas.getContext('webgl')

//创建顶点资源和像素资源（颜色）

let vertexSource = `

attribute vec2 a_Position;

attribute vec3 a_Position_color;

varying vec3 a_color;

void main() {

a_color = a_Position_color;

gl_Position = vec4(a_Position, 0.0, 1.0);

gl_PointSize = 10.0;

}

`

let fragmentSource = `

precision mediump float;

uniform vec3 u_color;

varying vec3 a_color;

void main (){

gl_FragColor = vec4(a_color, 1.0);

}

`

if (initShader(ctx, vertexSource, fragmentSource)) {

//设置颜色

let color = ctx.getUniformLocation(ctx.program, "u_color2")

ctx.uniform3f(color, 1.0, 0.0, 0.0)

//画三角形

let vertexs = []

let n = 3;

for (let index = 0; index < n; index++) {

let angle = Math.PI*2/n * index;

let x = 0.5 * Math.cos(angle)/radio

let y = 0.5 * Math.sin(angle)

vertexs.push(x, y, (Math.random() -0.5) * 2, (Math.random() -0.5) * 2, (Math.random() -0.5) * 2)

}

// //画三角形

// let vertexs = [

// // x y R G B

// -0.5, 0.5, 1.0, 0.0, 0.0, //第一个点的信息

// -0.5, -0.5, 0.0, 1.0, 0.0, //第二个点的信息

// 0.5, -0.5, 0.0, 0.0, 1.0,//第三个点的信息

// 0.5, 0.5, 1.0, 1.0, 1.0 //第三个点的信息

// ]

let float32Array = new Float32Array(vertexs)

//创建buffer

let buffer = ctx.createBuffer()

//绑定buffer

ctx.bindBuffer(ctx.ARRAY_BUFFER, buffer)

//往buffer中填充值，并指定数据用途

ctx.bufferData(ctx.ARRAY_BUFFER, float32Array, ctx.STATIC_DRAW)

//获取vertexShader指定变量内存

let a_Position = ctx.getAttribLocation(ctx.program, "a_Position")

//指定每两个数组元素为一个点

/*

* 当数组元素不需进行分割拆分的时候最后两位可以指定为0，0

*

*

*/

ctx.vertexAttribPointer(

a_Position, //location: vertex Shader里面的attributes变量的location

2, ctx.FLOAT, //size: attribute变量的长度 vec2长度2 vec3长度3

false, //normalized: 正交化 true或false , [1, 2] => [1/根号5， 2/根号5]

5 * float32Array.BYTES_PER_ELEMENT, //stride: 每个点的信息所占的BYTES

0 //offset: 每个点的信息，从第几个BYTES开始数

)

ctx.enableVertexAttribArray(a_Position);

//获取vertexShader指定变量内存

let a_Position_color = ctx.getAttribLocation(ctx.program, "a_Position_color")

ctx.vertexAttribPointer(

a_Position_color, //location: vertex Shader里面的attributes变量的location

3, ctx.FLOAT, //size: attribute变量的长度 vec2长度2 vec3长度3

false, //normalized: 正交化 true或false , [1, 2] => [1/根号5， 2/根号5]

5 * float32Array.BYTES_PER_ELEMENT, //stride: 每个点的信息所占的BYTES

2 * float32Array.BYTES_PER_ELEMENT //offset: 每个点的信息，从第几个BYTES开始数

)

//确认吧带有数据的buffer赋值给a_Position

ctx.enableVertexAttribArray(a_Position_color);

ctx.drawArrays(ctx.TRIANGLE_FAN, 0, n)

}

//创建顶点阴影和像素阴影

function createShader(ctx, type, source) {

//创建shader

let shader = ctx.createShader(type)

//绑定

ctx.shaderSource(shader, source)

//编译shader

ctx.compileShader(shader)

//获取编译结果

let compiler = ctx.getShaderParameter(shader, ctx.COMPILE_STATUS)

if (compiler) {

return shader

} else {

let log = ctx.getShaderInfoLog(shader)

console.log("compile shaders error", log)

//删除异常的shader,防止内存泄露

ctx.deleteShader(shader)

return null

}

}

function createProgram(ctx, vertexShader, fragmentShader) {

//创建program

let program = ctx.createProgram()

if (!program) {

return null

}

//点资源和像素资源合并

ctx.attachShader(program, vertexShader)

ctx.attachShader(program, fragmentShader)

ctx.linkProgram(program)

//获取linked的结果

let linked = ctx.getProgramParameter(program, ctx.LINK_STATUS)

if (linked) {

return program

} else {

//获取link错误信息

let log = ctx.getProgramInfoLog(program)

console.log("link program error", log)

//删除防止内存泄漏

ctx.delete(program)

ctx.deleteShader(vertexShader)

ctx.deleteShader(fragmentShader)

return null

}

}

function initShader(ctx, vertexSource, fragmentSource) {

let vertexShader = createShader(ctx, ctx.VERTEX_SHADER, vertexSource)

let fragmentShader = createShader(ctx, ctx.FRAGMENT_SHADER, fragmentSource)

let program = createProgram(ctx, vertexShader, fragmentShader)

if (program) {

ctx.useProgram(program)

//挂载到ctx

ctx.program = program

return true

} else {

return false

}

}

效果

n=3

n=4

n=6

n=50

webgl-画任意多边形

注意： let canvas document.getElementById(webgl) canvas.width window.innerWidth canvas.height window.innerHeight let radio window.innerWidth/window.innerHeight; let ctx canvas.getContext(webgl) 由于屏幕长宽像素不一样，导致了长宽像素…...

编程日记 2023/5/27 5:47:31

代码随想录打卡第51天|309.最佳买卖股票时机含冷冻期；714.买卖股票的最佳时机含手续费

309.最佳买卖股票时机含冷冻期关键点1：dp数组的含义 1-1：dp[i][0] 第i天持有股票的最大金钱 1-2：dp[i][1] 第i天卖出股票的最大金钱 1-3：dp[i][2] 第i天处于冷冻期的最大金钱 1-4：dp[i][3] 第i天保持卖出股票的最大金…...

编程日记 2023/5/29 23:21:51

Spark Shuffle介绍

文章目录1. 简介2. Hash Shuffle和Sort Shuffle2.1 Hash Shuffle2.1.1 未经优化的hashShuffleManager2.1.2 经优化的hashShuffleManager2.1.3 优化前后磁盘文件数对比2.2 Srot Shuffle Manager3. Shuffle配置选项1. 简介 Spark在DAG调度阶段会将一个Job划分为多个Stage&#x…...

编程日记 2023/5/13 20:43:43

【数据库原理 • 三】关系数据库标准语言SQL

前言数据库技术是计算机科学技术中发展最快，应用最广的技术之一，它是专门研究如何科学的组织和存储数据，如何高效地获取和处理数据的技术。它已成为各行各业存储数据、管理信息、共享资源和决策支持的最先进，最常用的技术。当前…...

编程日记 2023/5/16 14:59:45

ThreeJS-战争导弹飞行演示（三十四）

关键代码： function animate() { requestAnimationFrame(animate); // 使用渲染器渲染相机看这个场景的内容渲染出来 renderer.render(scene, camera); // controls.update(); // 获取delay时间 const delay clock.getDelta(); // 获取总共耗时 const time clock.…...

编程日记 2023/5/28 18:20:50

代码随想录_226翻转二叉树、101对称二叉树

leetcode 226. 翻转二叉树 226. 翻转二叉树给你一棵二叉树的根节点 root ，翻转这棵二叉树，并返回其根节点。示例 1： 输入：root [4,2,7,1,3,6,9] 输出：[4,7,2,9,6,3,1]示例 2： 输入：r…...

编程日记 2023/5/22 0:51:49

Docker 容器日志查看

1、容器日志查看命令 Usage: docker logs [OPTIONS] CONTAINERFetch the logs of a containerOptions:--details Show extra details provided to logs-f, --follow Follow log output--since string Show logs since timestamp (e.g. 2013-01-02T13:23:37Z…...

编程日记 2023/5/12 16:07:07

【Maven】1—Maven概述下载配置

⭐⭐⭐⭐⭐⭐ Github主页👉https://github.com/A-BigTree 笔记链接👉https://github.com/A-BigTree/Code_Learning ⭐⭐⭐⭐⭐⭐ 如果可以，麻烦各位看官顺手点个star~😊 如果文章对你有所帮助，可以点赞👍…...

编程日记 2023/5/29 23:22:30

【Spark】RDD缓存机制

1. RDD缓存机制是什么？ 把RDD的数据缓存起来，其他job可以从缓存中获取RDD数据而无需重复加工。 2. 如何对RDD进行缓存？ 有两种方式，分别调用RDD的两个方法：persist 或 cache。注意：调用这两个方法后并不…...

编程日记 2023/5/15 11:16:19

学成在线：第六天（p94-p102）

1、面试：为什么要用 Freemarker 静态化?如何做的？ 页面静态化是指使用模板引擎技术将一个动态网页生成 html 静态页面。满足下边的条件可以考虑使用静态化： 1、该页面被访问频率高，比如：商品信息展示、专家介绍页面等…...

编程日记 2023/5/27 13:59:01

读懂AUTOSAR：PduR模块--使用FIFO

简介： 现在的汽车越来越智能化和复杂化，这得益于汽车软件和电子控制系统的发展。为了帮助汽车制造商和供应商更好地开发和管理汽车软件，全球性的汽车软件开发标准——AUTOSAR（AUTomotive Open System ARchitecture）应…...

编程日记 2023/5/31 13:37:56

对象的比较（数据结构系列12）

目录前言： 1.PriorityQueue 1.1PriorityQueue的特性 1.2PriorityQueue的构造器 1.3大根堆的创建 1.4PriorityQueue中函数的说明 2.java中对象的比较 2.1基本类型的比较 2.2对象的比较 2.2.1覆写基类的equals 2.2.2基于Comparable接口类的比较 2.2.3基于…...

编程日记 2023/5/28 10:13:16

31.下一个排列

1. 题目整数数组的一个排列就是将其所有成员以序列或线性顺序排列。例如，arr [1,2,3] ，以下这些都可以视作 arr 的排列：[1,2,3]、[1,3,2]、[3,1,2]、[2,3,1] 。整数数组的下一个排列是指其整数的下一个字典序更大的排列。更正式地&…...

编程日记 2023/4/22 16:42:33

ToBeWritten之理解嵌入式Web HTTP协议

也许每个人出生的时候都以为这世界都是为他一个人而存在的，当他发现自己错的时候，他便开始长大少走了弯路，也就错过了风景，无论如何，感谢经历转移发布平台通知：将不再在CSDN博客发布新文章，敬…...

编程日记 2023/5/26 3:21:40

顶级程序员的成长之路1

本文关注的问题是程序员的水平究竟应该按照什么样的不同层级而逐渐提高？或者说，在学习编程的过程中，每一个阶段究竟应当设定什么样的目标才比较合理？本文的内容主要借鉴了周伟明先生的专栏文章《程序员的十层楼》[86]。注意本文讨…...

编程日记 2023/4/22 16:43:48

第三代api自动化测试框架使用教程（pytest+allure+sql+yaml）

使用教程一、配置1、环境配置2、框架配置3、启动入口二、用例编写1、用例模板2、参数依赖写法2、函数（方法插件）写法3、接口上传文件和表单参数4、接口上传json参数5、接口无数据填写6、code断言7、body断言7、json断言8、sql断言9、完整断言写法&#x…...

编程日记 2023/5/17 21:03:10

Qt——实现一个获取本机网络信息的界面

效果展现代码实现 networkinformation.h： #ifndef NETWORKINFORMATION_H #define NETWORKINFORMATION_H#include <QMainWindow> #include <QLabel> #include <QLineEdit> #include <QPushButton>class NetworkInformation : public QMai…...

编程日记 2023/5/27 14:00:34

全面深入了解接口自动化，看完还不会我报地址

一、自动化分类 （1）接口自动化 python/javarequestsunittest框架来实现 python/javaRF（RobotFramework）框架来实现——对于编程要求不高 （2）Web UI功能自动化 python/javaseleniumunittestddtPO框架来实…...

编程日记 2023/6/1 6:45:13

Python 小型项目大全 61~65

六十一、ROT13 密码原文：http://inventwithpython.com/bigbookpython/project61.html ROT13 密码是最简单的加密算法之一，代表“旋转 13 个空格”密码将字母A到Z表示为数字 0 到 25，加密后的字母距离明文字母 13 个空格： A变成N&…...

编程日记 2023/4/22 16:46:39

Hlog

Hlog 简介 Hlog是Hbase实现WAL(Write ahead log )方式产生的日志信息 ， 内部是一个简单的顺序日志。每个RegionServer对应1个Hlog(备注：1.X版本的可以开启MultiWAL功能，允许对应多个Hlog),所有对于该RegionServer的写入都会被记录到Hlog中。H…...

编程日记 2023/5/22 0:55:20

软件测试高频面试题 2026 最新整理（功能 + 自动化）

目录一、功能测试高频题（必背） 1. 什么是软件测试？测试的目的是什么？ 2. 黑盒测试 vs 白盒测试，区别与适用场景？ 3. 测试用例设计方法有哪些？各适合什么场景？ 4. 一个完整的测试用例包含哪些要素？ 5. 什么是 Bug？Bug 的生命周期是什么？ 6. 功能测试的核心流…...

编程新知 2026/3/31 21:20:58

旧Mac如何重获新生？开源工具实现系统升级完整指南

旧Mac如何重获新生？开源工具实现系统升级完整指南【免费下载链接】OpenCore-Legacy-Patcher Experience macOS just like before 项目地址: https://gitcode.com/GitHub_Trending/op/OpenCore-Legacy-Patcher 随着苹果不断推出新的macOS版本，许多…...

编程新知 2026/3/31 20:40:07

Qwen3-4B极速体验：流式输出+多轮记忆，打造丝滑文本交互

Qwen3-4B极速体验：流式输出多轮记忆，打造丝滑文本交互在当今AI技术快速发展的背景下，文本交互模型已经成为日常工作和创作的重要助手。Qwen3-4B-Instruct-2507作为阿里通义千问系列中的纯文本优化版本，通过移除视觉模块冗余&…...

编程新知 2026/3/31 20:05:35

Python高效实现：质因数分解的三种算法对比

1. 质因数分解：从数学概念到Python实现质因数分解是数学中一个基础但重要的概念。简单来说，就是把一个正整数分解成若干个质数相乘的形式。比如数字28可以分解为227，这里的2和7都是质数，也就是28的质因数。这个概念在密码学、数据…...

编程新知 2026/3/31 19:08:31

OpenAPI状态机建模指南：用有限状态机设计RESTful API的终极方法 [特殊字符]

OpenAPI状态机建模指南：用有限状态机设计RESTful API的终极方法 🚀 【免费下载链接】OpenAPI-Specification The OpenAPI Specification Repository 项目地址: https://gitcode.com/gh_mirrors/op/OpenAPI-Specification OpenAPI Specification 是…...

编程新知 2026/3/31 18:21:59

小程序对商家私域运营到底有多重要？

小程序对商家私域运营到底有多重要？在企业持续获取客户成本不断上升的背景下，越来越多商家开始关注“私域运营”，而小程序也逐渐成为这一体系中的核心工具。小程序对商家私域运营的重要性，本质上体现在“用户沉淀能力与转化效率的…...

编程新知 2026/3/31 17:19:07

AI赋能开发：让快马平台智能理解并生成产区标准图交互应用

AI赋能开发：让快马平台智能理解并生成产区标准图交互应用最近在做一个农产品产区标准查询系统的项目，发现用传统方式开发这类需求特别费时。比如要处理用户自然语言查询、动态生成地图、实现智能推荐逻辑，光写基础代码就得花好几天。后来尝…...

编程新知 2026/3/31 16:42:22

【Feign】⭐️ 混合编码实战：SpringFormEncoder 同时支持 MultipartFile 与 @RequestBody 参数传递

1. 混合编码场景下的Feign实战痛点最近在重构微服务项目时，遇到个特别典型的场景：服务A需要调用服务B的接口，其中有些接口要上传Excel文件（MultipartFile类型），另一些接口又要传递复杂的JSON对象&#xf…...

编程新知 2026/3/31 14:50:13

别再只看波形了！用Maxwell+Matlab深度分析电机空载气隙磁密的谐波极对数分布

电机电磁设计进阶：从Maxwell FFT到Matlab谐波极对数分析的工程实践在电机设计领域，空载气隙磁密的谐波分析一直是评估电磁性能的核心手段。传统方法往往止步于波形观察和简单频谱分析，却忽略了谐波极对数分布这一关键维度——它直接关联着电…...

编程新知 2026/3/31 13:53:11

实战指南：基于快马平台，快速构建可部署的unet卫星图像分割系统

今天想和大家分享一个实战项目：基于UNet的卫星图像建筑物分割系统。这个项目特别适合在InsCode(快马)平台上快速搭建，因为它涉及从数据处理到模型部署的完整流程，而平台的一键部署功能正好能省去繁琐的环境配置工作。项目背景与需求分析卫星…...

编程新知 2026/3/31 11:23:12

相关文章：