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')
由于屏幕长宽像素不一样，导致了长宽像素比不是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) 由于屏幕长宽像素不一样，导致了长宽像素…...
代码随想录打卡第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天保持卖出股票的最大金…...
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…...
【数据库原理 • 三】关系数据库标准语言SQL
前言 数据库技术是计算机科学技术中发展最快，应用最广的技术之一，它是专门研究如何科学的组织和存储数据，如何高效地获取和处理数据的技术。它已成为各行各业存储数据、管理信息、共享资源和决策支持的最先进，最常用的技术。 当前…...
ThreeJS-战争导弹飞行演示（三十四）
关键代码： function animate() { requestAnimationFrame(animate); // 使用渲染器渲染相机看这个场景的内容渲染出来 renderer.render(scene, camera); // controls.update(); // 获取delay时间 const delay clock.getDelta(); // 获取总共耗时 const time clock.…...
代码随想录_226翻转二叉树、101对称二叉树
leetcode 226. 翻转二叉树 226. 翻转二叉树 给你一棵二叉树的根节点 root ，翻转这棵二叉树，并返回其根节点。 示例 1： 输入：root [4,2,7,1,3,6,9] 输出：[4,7,2,9,6,3,1]示例 2： 输入：r…...
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…...
【Maven】1—Maven概述下载配置
⭐⭐⭐⭐⭐⭐ Github主页👉https://github.com/A-BigTree 笔记链接👉https://github.com/A-BigTree/Code_Learning ⭐⭐⭐⭐⭐⭐ 如果可以，麻烦各位看官顺手点个star~😊 如果文章对你有所帮助，可以点赞👍…...
【Spark】RDD缓存机制
1. RDD缓存机制是什么？ 把RDD的数据缓存起来，其他job可以从缓存中获取RDD数据而无需重复加工。 2. 如何对RDD进行缓存？ 有两种方式，分别调用RDD的两个方法：persist 或 cache。 注意：调用这两个方法后并不…...
学成在线：第六天（p94-p102）
1、面试：为什么要用 Freemarker 静态化?如何做的？ 页面静态化是指使用模板引擎技术将一个动态网页生成 html 静态页面。 满足下边的条件可以考虑使用静态化： 1、该页面被访问频率高，比如：商品信息展示、专家介绍页面等…...
读懂AUTOSAR：PduR模块--使用FIFO
简介： 现在的汽车越来越智能化和复杂化，这得益于汽车软件和电子控制系统的发展。为了帮助汽车制造商和供应商更好地开发和管理汽车软件，全球性的汽车软件开发标准——AUTOSAR（AUTomotive Open System ARchitecture）应…...
对象的比较（数据结构系列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基于…...
31.下一个排列
1. 题目 整数数组的一个 排列 就是将其所有成员以序列或线性顺序排列。 例如，arr [1,2,3] ，以下这些都可以视作 arr 的排列：[1,2,3]、[1,3,2]、[3,1,2]、[2,3,1] 。 整数数组的 下一个排列 是指其整数的下一个字典序更大的排列。更正式地&…...
ToBeWritten之理解嵌入式Web HTTP协议
也许每个人出生的时候都以为这世界都是为他一个人而存在的，当他发现自己错的时候，他便开始长大 少走了弯路，也就错过了风景，无论如何，感谢经历 转移发布平台通知：将不再在CSDN博客发布新文章，敬…...
顶级程序员的成长之路1
本文关注的问题是程序员的水平究竟应该按照什么样的不同层级而逐渐提高？或者说，在学习编程的过程中，每一个阶段究竟应当设定什么样的目标才比较合理？本文的内容主要借鉴了周伟明先生的专栏文章《程序员的十层楼》[86]。注意本文讨…...
第三代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…...
Qt——实现一个获取本机网络信息的界面
效果展现 代码实现 networkinformation.h： #ifndef NETWORKINFORMATION_H #define NETWORKINFORMATION_H#include <QMainWindow> #include <QLabel> #include <QLineEdit> #include <QPushButton>class NetworkInformation : public QMai…...
全面深入了解接口自动化，看完还不会我报地址
一、自动化分类 （1）接口自动化 python/javarequestsunittest框架来实现 python/javaRF（RobotFramework）框架来实现——对于编程要求不高 （2）Web UI功能自动化 python/javaseleniumunittestddtPO框架来实…...
Python 小型项目大全 61~65
六十一、ROT13 密码 原文：http://inventwithpython.com/bigbookpython/project61.html ROT13 密码是最简单的加密算法之一，代表“旋转 13 个空格”密码将字母A到Z表示为数字 0 到 25，加密后的字母距离明文字母 13 个空格： A变成N&…...
Hlog
Hlog 简介 Hlog是Hbase实现WAL(Write ahead log )方式产生的日志信息 ， 内部是一个简单的顺序日志。每个RegionServer对应1个Hlog(备注：1.X版本的可以开启MultiWAL功能，允许对应多个Hlog),所有对于该RegionServer的写入都会被记录到Hlog中。H…...
收藏！小白程序员必看：读懂AI岗位JD，精准投递不陪跑
本文针对AI岗位认知模糊、JD理解困难等问题，为读者提供六步解析法，包括明确岗位性质、了解公司类型、评估薪资水平、硬性条件筛选、分析岗位职责和技能匹配。通过这些步骤，帮助读者精准定位适合自己的AI岗位，避免盲目投递。同时&a…...
为OpenClaw智能体工作流配置Taotoken作为模型供应商的步骤
🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度 为OpenClaw智能体工作流配置Taotoken作为模型供应商的步骤 1. 准备工作：获取必要的凭证与信息 在开始配置之前&#x…...
Python try...except ImportError 语句详解
在Python编程中，ImportError 是与模块导入相关的核心异常。优雅地处理它，是编写健壮、可维护和跨平台代码的关键。try...except ImportError 结构正是实现这一目标的标准工具。本文将为你抽丝剥茧，从基础概念到高级实践，全面解析这…...
Unity游戏接入TapTap登录，从后台配置到打包上线的完整避坑指南
Unity游戏接入TapTap登录的全流程避坑指南：从配置到上线的实战经验 在独立游戏开发领域，TapTap平台凭借其庞大的用户基础和便捷的登录系统，已成为许多开发者的首选接入方案。然而，从后台配置到最终打包上线的完整流程中࿰…...
Speechless：三步完成微博PDF备份的终极免费Chrome扩展
Speechless：三步完成微博PDF备份的终极免费Chrome扩展 【免费下载链接】Speechless 把新浪微博的内容，导出成 PDF 文件进行备份的 Chrome Extension。 项目地址: https://gitcode.com/gh_mirrors/sp/Speechless 在数字时代，我们的社交…...
ncmdumpGUI：3分钟解锁网易云音乐ncm格式，让你的音乐无处不在
ncmdumpGUI：3分钟解锁网易云音乐ncm格式，让你的音乐无处不在 【免费下载链接】ncmdumpGUI C#版本网易云音乐ncm文件格式转换，Windows图形界面版本 项目地址: https://gitcode.com/gh_mirrors/nc/ncmdumpGUI 还在为网易云音乐下载的nc…...
Windows Cleaner终极指南：三步告别C盘爆红，让电脑运行如飞！
Windows Cleaner终极指南：三步告别C盘爆红，让电脑运行如飞！ 【免费下载链接】WindowsCleaner Windows Cleaner——专治C盘爆红及各种不服！ 项目地址: https://gitcode.com/gh_mirrors/wi/WindowsCleaner 还在为Windows系统…...
SVG与CSS变量驱动的自动化品牌视觉生成技术实践
1. 项目概述：一分钟品牌塑造的实践宝库在品牌营销和创意设计领域，一个常见的痛点是如何快速、高效地生成高质量的视觉品牌资产。无论是初创公司需要一个临时的Logo，还是内容创作者想为新的系列视频设计一个统一的片头，传统的品牌设…...
mg3640s,ts8080,ts8100,g5080,g3800,g4800,ix6780,ts8180报错5B00,P07,E08，5b02,1704,1700，5b04佳能V6.200,亲测有用
下载：点这里下载 备用下载：https://pan.baidu.com/s/1WrPFvdV8sq-qI3_NgO2EvA?pwd0000 常见型号如下： G系列 G1000、G1100、G1200、G1400、G1500、G1800、G1900、G1010、G1110、G1120、G1410、G1420、G1411、G1510、G1520、G1810、G1820、…...
开源提示词管理工具：本地化部署与AI工作流效率提升实践
1. 项目概述：一个为AI工作流设计的提示词管理利器如果你和我一样，每天都在和ChatGPT、Claude、Midjourney这些AI模型打交道，那你一定有过这样的烦恼：昨天精心调试好的、能稳定输出高质量代码的提示词，今天想用的时候&a…...