WebGL 绘制矩形

上一节绘制了圆点,调用的绘制方法如下:gl.drawArrays(gl.POINTS, 0, 1);   第一个参数明显是个枚举类型,肯定还有其他值,如下所示:

  • POINTS 可视的点
  • LINES 单独线段
  • LINE_STRIP 线条
  • LINE_LOOP 闭合线条
  • TRIANGLES 单独三角形
  • TRIANGLE_STRIP 三角带
  • TRIANGLE_FAN 三角扇

这小节尝试一下 绘制单独线段、线条、闭合线条、三角带(可构成矩形)

代码如下所示:

<template><div class="wrapper"><div class="point-wrapper"><div style="margin-bottom: 20px">绘制点</div><canvas id="point" width="280" height="250"></canvas></div><div class="point-mouse"><div style="margin-bottom: 20px">鼠标绘制点</div><canvas id="pointByMouse" width="280" height="250"></canvas></div></div>
</template><script>
export default {name: "point",
};
</script><script setup>
import { onMounted } from "vue";
import { initShaders } from "@/utils/myGL.js";const vertexShaderSrc = `
attribute vec4 a_Position;
attribute float a_PointSize;
void main() {gl_Position = a_Position;gl_PointSize = a_PointSize;
}
`;const fragmentShaderSrc = `
precision mediump float;
uniform vec4 u_FragColor;
void main() {gl_FragColor = u_FragColor;
}
`;const fragmentShaderSrcCircle = `
precision mediump float;
void main() {float d = distance(gl_PointCoord, vec2(0.5, 0.5));if(d < 0.5) {gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);} else { discard; }
}
`;const drawPointStatic = () => {const canvas = document.getElementById("point");// webgl画笔const gl = canvas.getContext("webgl");// 初始化着色器initShaders(gl, vertexShaderSrc, fragmentShaderSrc);const a_position = gl.getAttribLocation(gl.program, "a_Position");const a_pointSize = gl.getAttribLocation(gl.program, "a_PointSize");const u_FragColor = gl.getUniformLocation(gl.program, "u_FragColor");gl.vertexAttrib3f(a_position, 0, 0.0, 0.0);gl.vertexAttrib1f(a_pointSize, 20.0);gl.uniform4f(u_FragColor, 1.0, 0.0, 0.0, 1.0);// 指定将要用来清理绘图区的颜色gl.clearColor(0.0, 0.0, 0.0, 1.0);// 清理绘图区gl.clear(gl.COLOR_BUFFER_BIT);// 绘制顶点gl.drawArrays(gl.POINTS, 0, 1);setTimeout(() => {initShaders(gl, vertexShaderSrc, fragmentShaderSrcCircle);// 指定将要用来清理绘图区的颜色gl.clearColor(0.0, 0.0, 0.0, 1.0);// 清理绘图区gl.clear(gl.COLOR_BUFFER_BIT);// 绘制顶点gl.drawArrays(gl.POINTS, 0, 1);}, 2000);
};const drawPointByMouse = () => {const canvas = document.getElementById("pointByMouse");// webgl画笔const gl = canvas.getContext("webgl");// 初始化着色器initShaders(gl, vertexShaderSrc, fragmentShaderSrc);// // 指定将要用来清理绘图区的颜色gl.clearColor(0.0, 0.0, 0.0, 1.0);// // 清理绘图区gl.clear(gl.COLOR_BUFFER_BIT);let pointArrs = [];document.addEventListener("click", (event) => {const { clientX, clientY } = event;const { left, top, width, height } = canvas.getBoundingClientRect();const [cssX, cssY] = [clientX - left, clientY - top];const [halfWidth, halfHeight] = [width / 2, height / 2];const [xBaseCenter, yBaseCenter] = [cssX - halfWidth, cssY - halfHeight];const yBaseCenterTop = -yBaseCenter;const [x, y] = [xBaseCenter / halfWidth, yBaseCenterTop / halfHeight];const a_Position = gl.getAttribLocation(gl.program, "a_Position");const a_pointSize = gl.getAttribLocation(gl.program, "a_PointSize");const u_FragColor = gl.getUniformLocation(gl.program, "u_FragColor");pointArrs.push({x,y,z: Math.random() * 50,color: {r: Math.random() * 1,g: Math.random() * 1,b: Math.random() * 1,},});gl.clear(gl.COLOR_BUFFER_BIT);pointArrs.forEach((item) => {gl.vertexAttrib2f(a_Position, item.x, item.y);gl.vertexAttrib1f(a_pointSize, item.z);gl.uniform4f(u_FragColor, item.color.r, item.color.g, item.color.b, 1.0);gl.drawArrays(gl.POINTS, 0, 1);});});
};
onMounted(() => {drawPointStatic();drawPointByMouse();
});
</script><style lang="scss" scoped>
.wrapper {display: flex;
}
.point-wrapper {width: 300px;height: 300px;background-color: gray;
}
.point-mouse {margin-left: 20px;width: 300px;height: 300px;background-color: gray;
}
</style>

绘制图形如下所示:

注意在代码中引入了initShaders  方法,如下:

function loadShader(gl, type, source) {//根据着色类型,建立着色器对象const shader = gl.createShader(type);//将着色器源文件传入着色器对象中gl.shaderSource(shader, source);//编译着色器对象gl.compileShader(shader);//返回着色器对象return shader;
}
export function initShaders(gl, vsSource, fsSource) {//创建程序对象const program = gl.createProgram();//建立着色对象const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);//把顶点着色对象装进程序对象中gl.attachShader(program, vertexShader);//把片元着色对象装进程序对象中gl.attachShader(program, fragmentShader);//连接webgl上下文对象和程序对象gl.linkProgram(program);//启动程序对象gl.useProgram(program);//将程序对象挂到上下文对象上gl.program = program;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/77586.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

计算机网络篇之域名

计算机网络篇之域名 介绍 一个域名是一个由点分割的字符串序列&#xff0c;用于标识一组IP地址或互联网上的计算机&#xff0c;域名用于在因特网上标识和定位特定的网站或服务 组成 域名由两个主要部分组成&#xff1a;顶级域和二级域&#xff0c;顶级域是域名的最高级别&a…

Codeforces Round 895 (Div. 3) (A~G)

A. Two Vessels 题意&#xff1a;你有两个无限容量杯子A,B&#xff0c;分别装了a&#xff0c;b升的水&#xff0c;此外你还有一个容量为c的杯子C&#xff0c;你可以将一杯的水先倒入C中&#xff0c;再倒入另一个杯子&#xff0c;问你最少需要操作几次能使得A B杯的水量相同。 …

【题解】2596. 检查骑士巡视方案

题解&#xff1a; class Solution {int n,m;bool st[100][100];int flag;int dx[8]{-1,-2,-2,-1,1,2,2,1};int dy[8]{-2,-1,1,2,2,1,-1,-2}; public:bool checkValidGrid(vector<vector<int>>& grid) {m grid.size();n grid[0].size();dfs(grid,0,0,0);ret…

运行时链接

基本概念 运行时链接&#xff0c;是在程序运行时&#xff08;而非编译时或加载时&#xff09;将程序代码与其依赖的库代码进行链接的过程。动态链接在程序启动时或实际运行过程中通过API函数完成。这种方式的主要优点是它允许程序在运行时加载和卸载不同的库模块&#xff0c;从…

在Python中解决自定义类型比较的问题

1 问题原因 在Python编程中&#xff0c;当我们尝试对自定义类型进行比较时&#xff0c;可能会遇到这样的错误&#xff1a;TypeError: < not supported between instances of User and User 这个错误的原因是Python不知道如何对你的自定义类型进行比较。为了解决这个问题&a…

redisson常用api

redisson提供了很多对象类型的api&#xff0c;下面介绍下一些常用的对象api。 RBucket 可操作任何对象的api&#xff0c;前提是要确定好泛型&#xff0c;方法比较少。大小限制为512Mb。 RBucket<AnyObject> bucket redisson.getBucket("anyObject");bucket…

vue3中的吸顶导航交互实现 | VueUse插件

目的&#xff1a;浏览器上下滚动时&#xff0c;若距离顶部的滚动距离大于78px&#xff0c;吸顶导航显示&#xff0c;小于78px隐藏。使用vueuse插件中的useScroll方法​​​​​​​和动态类名控制进行实现 1. 安装 npm i vueuse/core 2. 获得滚动距离 项目中导入&#xff0…

@Resource 注入为null 的解决方法

Resource Resource可以用于注入对象 一般我们在编码中都会使用Resource来注入一个实例对象&#xff0c;但是特殊情况下可能会是null。 这个时候可以用SpringUtil.getBean()来手动获取 代码示例 private HbaseProperties hbaseProperties SpringUtil.getBean(HbasePropertie…

在python程序中用windows的icon

这个exe的弹窗功能会使用到一个ico文件&#xff0c;如图&#xff1a; 用软件GreenfishIconEditorProPortable或者使用在线软件将你需要的图片制作成windows的icon 用程序将ico文件生成文本文件 import base64picture_name "logo.ico" open_pic open("%s…

【100天精通Python】Day56:Python 数据分析_Pandas数据清洗和处理(删除填充插值,数据类型转换,去重,连接与合并)

目录 数据清洗和处理 1.处理缺失值 1.1 删除缺失值&#xff1a; 1.2 填充缺失值&#xff1a; 1.3 插值&#xff1a; 2 数据类型转换 2.1 数据类型转换 2.2 日期和时间的转换&#xff1a; 2.3 分类数据的转换&#xff1a; 2.4 自定义数据类型的转换&#xff1a; 3 数…

神经反馈设备使用感受2:采集Muse的EEG原始数据(转自知乎)

神经反馈设备使用感受2&#xff1a;采集Muse的EEG原始数据 转自知乎&#xff0c;内容很好&#xff0c;怕之后找不到 想了一下&#xff0c;单写一部分来介绍一下Muse在数据采集方面的操作。同时也解释一下我自己的EEG数据是从哪里采集的。 关于Muse EEG数据的精度&#xff0c;在…

vue2实现自定义主题webpack-theme-color-replacer

需求&#xff1a;根据element的自定义主题色&#xff0c;之后改变element的全局所有颜色&#xff0c;解决页面刷新后主题色失效问题&#xff0c;这个需要把颜色存入到浏览器的存储中&#xff0c;如果换个浏览器就得重新选择了哈&#xff0c;如果需要在不同的浏览器保持一致的主…

将AI融入到SEO中—基于Python的实现思路

在当今数字化时代&#xff0c;搜索引擎优化&#xff08;SEO&#xff09;对于网站和在线业务的成功至关重要。然而&#xff0c;随着人工智能&#xff08;AI&#xff09;技术的迅猛发展&#xff0c;我们可以利用它来提升SEO策略并取得更好的效果。本文将介绍如何通过使用Python编…

WordPress wp-file-manager 文件上传漏洞 CVE-2020-25213

1.漏洞复现 WordPress 6.2 插件&#xff1a;wp-file-manager 6.0&#xff0c;File Manager (advanced view) – WordPress plugin | WordPress.org &#xff08;https://wordpress.org/plugins/wp-file-manager/advanced/&#xff09; 复现 后台&#xff0c;安装、启动插件…

分布式系统第五讲:分布式事务及实现方案

分布式系统第五讲&#xff1a;分布式事务及实现方案 事务是一个程序执行单元&#xff0c;里面的所有操作要么全部执行成功&#xff0c;要么全部执行失败。而分布式事务是指事务的参与者、支持事务的服务器、资源服务器以及事务管理器分别位于不同的分布式系统的不同节点之上。本…

(二)程序语言设计基础

目录 1. 程序设计语言概述 1.1 基本概念 1.1.1 低级语言和高级语言 1.1.2 编译程序和解释程序 1.1.3 程序设计语言的定义 1.1.4 程序设计语言的分类 1.2 程序设计语言的基本成分 1.2.1 数据成分 1.2.2 运算成分 1.2.3 控制成分 1.2.4 传输成分 1.2.5 函数 2. 语言…

【LeetCode: 1462. 课程表 IV:拓扑排序+图+广度优先搜索】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…

现场直击 | 国台国标·中秋礼酒惊艳闪耀酒博会

以酒为媒&#xff0c;以酒会友。 9月9日&#xff0c;以“展示全球佳酿&#xff0c;促进开放合作”为主题的第12届中国&#xff08;贵州&#xff09;国际酒类博览会&#xff08;以下简称“贵州酒博会”&#xff09;在贵阳国际会议展览中心重磅开幕&#xff0c;本届贵州酒博会吸…

狼的传说小游戏

欢迎来到程序小院 狼的传说 玩法&#xff1a; 鼠标左键选择能防御、战斧、风暴3%、滚石10%、藤曼5%、冰柱5%、飞跃10%、三叶草20%、钢叉15%&#xff0c;消灭所有敌人&#xff0c;不同关卡不同敌人&#xff0c;快去闯关消灭敌人吧^^。开始游戏https://www.ormcc.com/play/gameS…

MySQL——读写分离

简介 读写分离&#xff0c;基本的原理是让主数据库处理事务性增、改、删操作&#xff08;INSERT、UPDATE、DELETE&#xff09;&#xff0c;而从数据库处理SELECT查询操作。数据库复制被用来把事务性操作导致的变更同步到集群中的从数据库。一般来说都是通过 主从复制&#xff…