WebGL 绘制多彩的三角形

于 2024-08-22 09:43:45 发布
阅读量388 收藏 2
点赞数 8
分类专栏： webgl 文章标签： webgl
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46281382/article/details/141417588
版权

WebGL 绘制多彩的三角形

在这里插入图片描述

Demo 在线地址：https://codepen.io/东流/pen/OJGpzMJ

2D 与 3D

2D 和 3D 可能会被认为是世界不同等级维度，比如纸片人和三维空间，实际上它们主要是人们对于对象的不同特征的描述方式。
2D 表示对象的宽度和高度这两个平面特征，而 3D 除了表示对象的平面特征之外，还包含对象空间特征深度属性。比如下面两张图都只是一个平面上的图形，但是分别描述了对象的不同特征，从而给我们带来了不同的 2D 和 3D 视觉上的不同感受。

在这里插入图片描述

在这里插入图片描述

WebGL 和 Canvas 的比较

Canvas： canvas 使用 2D 渲染上下文来绘制图形和图像，是基于像素的绘图系统，通过 Javascript 脚本控制渲染过程
WebGL： 基于 OpenGL ES 标准的 Javascript API，可以利用 GPU 进行硬件加速的 3D 图像渲染，需要使用着色器编程（shaders）

WebGL 介绍

WebGL，即 Web Graphics Library，是一种 3D 绘图协议，这一技术标准允许把 JavaScript 和 OpenGL ES 2.0 结合在一起，

最低0.47元/天 解锁文章
Jinuss
关注
  • 8
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
【WebGL初学系列之四】纹理三角
ixshells的专栏
11-18 1640
前面已经给三角形添加了颜色，为了让其更加丰富多彩，我们这里继续向它添加纹理图片。在实际的应用当中，纹理的添加也比直接绘制颜色要多得多，因为添加纹理就可以让很多形状看起来更加逼真了，好吧，废话少说了，还是接着写。 一：添加纹理
Sierpinski_Triangle:WebGL Sierpinski三角形
05-10
在WebGL技术的帮助下，我们可以用JavaScript实现Sierpinski三角形的动态渲染，创建出具有视觉吸引力的3D效果。 **WebGL** 是一种基于OpenGL标准的JavaScript API，用于在网页浏览器中进行三维图形渲染。它允许...
我的webgl学习之路（五）用webgl画彩色三角形
七岁
06-19 1766
要想做彩色三角线必须知道uniform、attribute、varying这三个声明；uniform 表示一次渲染过程中保存不变的 attribute 表示是实时在改变的 varying 用来着色器之间的通讯,也就是顶点着色器和片段着色去之间的桥梁还需要注意的是varying 在顶点和片元着色器两个中都声明一个一样的变量;那么它就会自动默认，两个有关系，但并不是相同的；片元着色器中得到的varyi...
浅识WebGL和Three.js
JasonTanTJX的博客
11-13 7077
想必各位看官大大都了解过，进行3D图形渲染，主要依赖显卡（GPU）为我们提供强大的运算支持。GPU也像不同CPU架构具备不同的指令集一样，不同的显卡厂商也为不同的GPU型号提供了不同的底层指令逻辑，所支持的能力也不尽相同。为了简化方便图形应用开发和硬件适配的工作量，诞生了一些可以让不同应用方便调用的图形库，用以抹平底层硬件实现的差异，例如。
WebGL基础-变量控制与颜色修改
tjx1997的博客
09-26 448
修改前文其中的一些参数，改变三角形的颜色，修改三角形的位置等操作。
《跟月影学可视化》学习笔记
AaronZZH 的博客
03-03 2610
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码
探秘 Beam：优雅的 WebGL 库，轻松构建高性能图形应用
gitblog_00067的博客
05-20 768
探秘 Beam：优雅的 WebGL 库，轻松构建高性能图形应用 项目地址:https://gitcode.com/doodlewind/beam 在网页中实现绚丽的3D效果和动态图像，WebGL 是不可或缺的技术。然而，WebGL 的 API 显得复杂且冗长，让不少开发者望而却步。现在，让我们一起了解 Beam——一个轻量级（仅10KB）的 WebGL 库，它以简洁易懂的API，封装了复杂的Web...
关于gltf模型格式文件的学习
huhudeni的博客
01-18 1285
因为笔者自己在检测自己学习webgl的质量于是写一个webgl的小框架。遇见了gltf模型的加载问题。所以我会一边学习一边完善这篇文章。
【HTML】【一文全解Canvas】从初学到实战，彻底掌握前端绘图神器！
热门推荐
weixin_55846296的博客
06-09 1万+
前言一、Canvas 概述二、在 HTML 中使用 Canvas三、Canvas 绘制图形1、绘制矩形2、绘制圆形a. 绘制实心圆形b. 绘制空心圆形四、Canvas 绘制文本五、Canvas 绘制图片六、Canvas 动画效果1、setInterval() 实现动画2、requestAnimationFrame() 实现动画七、Canvas 使用注意事项八、利用Canvas绘制挂钟（原理-绘制弧形）- 简单练习1、 还原坐标系2、 绘制背景3、 绘制时钟指针4、循环绘制。
Canvas使用详细教学：从基础绘图到进阶动画再到实战（海报生成、Flappy Bird 小游戏等），掌握绘图与动画的秘诀
JINGWHALE
04-16 2032
本文从基础绘图到进阶动画再到实战（海报生成、Flappy Bird 小游戏等），详细介绍了Canvas基础绘图方法、颜色与样式、图像操作、动画等内容，让你掌握Canvas绘图与动画的秘诀。
第157天：canvas基础知识详解
weixin_34178244的博客
01-26 244
目录 一、canvas简介 1.1 什么是canvas？（了解） 1.2 canvas主要应用的领域（了解） 二、canvas绘图基础 2.0 sublime配置canvas插件（推荐） 2.1 Canvas标签 2.1.1 canvas标签语法和属性（重点） 2.1.2 浏览器不兼容处理（重点） 2.2 canvas绘图上下文co...
webgl入门-基础三角形绘制
11-02
webgl入门-基础三角形绘制
Webgl旋转三角形源码
08-23
"Webgl旋转三角形源码"是WebGL学习的基础教程，通常用来介绍基本的顶点坐标、着色器和渲染流程。 在JavaScript中，WebGL的核心概念是`WebGLRenderingContext`对象，它是用于在画布元素上绘制3D图形的接口。要创建一...
WebGL--三角形
12-14
这个“WebGL--三角形”项目是一个基础的教程，旨在帮助初学者理解如何使用WebGL来创建基本的几何形状，比如三角形。在计算机图形学中，三角形是最基本的构建块，许多复杂的3D模型都是由无数个三角形组成的。 在西南...
WebGL之绘制三维地球.docx
04-26
WebGL 之绘制三维地球 本文将详细介绍如何使用 WebGL 从零开始绘制三维地球模型，包括构建网格、编写着色器、实现 3D 地球等步骤。 1. 构建网格 构建网格是绘制三维地球的第一步，我们需要建立球体的三维模型，该...
解密！抖音百万粉丝博主三维地图视频都用到了什么GIS数据和技术
Mapmost的博客
08-12 1227
（1）影像数据影像数据，通常指的是通过各种遥感技术，如卫星、无人机或地面传感器等设备捕捉到的图像信息。这类数据涵盖了从可见光到红外、微波等多个电磁波谱段，能够用于多样的应用领域：1）地图制图与地理信息系统 (GIS)：高分辨率卫星影像常用于更新地形图、制作数字高程模型(DEM)，以及土地覆盖和土地利用分类。2）农业监测：通过分析不同波段的影像数据，可以评估作物生长状况、病虫害预警及灌溉需求，助力精准农业。3）城市规划与管理：监测城市扩张、土地变化、交通流量及环境质量，为城市可持续发展提供数据支持。
263企业公寓后勤管理系统.zip
08-21
以Java为开发技术，实现了一个后勤管理系统。后勤管理系统的主要实现功能包括：管理员：首页、个人中心、员工管理、公寓信息管理、公寓户型管理、员工积分管理、系统管理、订单管理，员工；首页、个人中心、员工积分管理、我的收藏管理，前台首页；首页、公寓信息、通知公告、个人中心、后台管理、在线客服功能，基本上实现了整个后勤管理系统的过程。 具体在系统设计上，采用了B/S的结构，同时，也使用Java技术在动态页面上进行了设计，后台上采用Mysql数据库，是一个非常优秀的后勤管理系统。
basic_log_shell.sh
最新发布
08-21
basic_log_shell.sh
毕业设计，基于SpringBoot+Vue+MySQL开发的图书电子商务网站，源码+数据库+论文答辩+毕业论文+视频演示
08-21
毕业设计，基于SpringBoot+Vue+MySQL开发的图书电子商务网站，源码+数据库+论文答辩+毕业论文+视频演示 社会发展日新月异，用计算机应用实现数据管理功能已经算是很完善的了，但是随着移动互联网的到来，处理信息不再受制于地理位置的限制，处理信息及时高效，备受人们的喜爱。本次开发一套图书电子商务网站，实现管理员可以管理用户，图书信息，可以对订单发货。用户可以查看管理员发布的图书，可以对图书购买下单。。图书电子商务网站服务端用Java开发，用Spring Boot框架开发的网站后台，数据库用到了MySQL数据库作为数据的存储。这样就让用户用着方便快捷，都通过同一个后台进行业务处理，而后台又可以根据并发量做好部署，用硬件和软件进行协作，满足于数据的交互式处理，让用户的数据存储更安全，得到数据更方便。 关键字：图书电子商务网站；Spring Boot框架；Java；MySQL；Vue
webgl绘制多边形
01-20
WebGL是一种用于在Web浏览器中绘制3D图形的技术。要绘制多边形，你需要定义顶点数据，并使用WebGL的绘制函数将其绘制到画布上。 以下是一个使用WebGL绘制三角形的示例： ```javascript // 获取画布元素 var canvas = document.getElementById("myCanvas"); // 获取WebGL上下文 var gl = canvas.getContext("webgl"); // 定义顶点数据 var vertices = [ -0.5, -0.5, 0.0, // 第一个顶点的坐标 0.5, -0.5, 0.0, // 第二个顶点的坐标 0.0, 0.5, 0.0 // 第三个顶点的坐标 ]; // 创建缓冲区对象 var vertexBuffer = gl.createBuffer(); // 绑定缓冲区对象 gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); // 将顶点数据写入缓冲区对象 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); // 获取顶点着色器代码 var vertexShaderSource = ` attribute vec3 aPosition; void main() { gl_Position = vec4(aPosition, 1.0); } `; // 创建顶点着色器对象 var vertexShader = gl.createShader(gl.VERTEX_SHADER); // 编译顶点着色器代码 gl.shaderSource(vertexShader, vertexShaderSource); gl.compileShader(vertexShader); // 获取片元着色器代码 var fragmentShaderSource = ` void main() { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); } `; // 创建片元着色器对象 var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); // 编译片元着色器代码 gl.shaderSource(fragmentShader, fragmentShaderSource); gl.compileShader(fragmentShader); // 创建着色器程序对象 var program = gl.createProgram(); // 将顶点着色器和片元着色器附加到着色器程序对象上 gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); // 链接着色器程序对象 gl.linkProgram(program); // 使用着色器程序对象 gl.useProgram(program); // 获取顶点位置属性的位置 var aPosition = gl.getAttribLocation(program, "aPosition"); // 启用顶点属性数组 gl.enableVertexAttribArray(aPosition); // 指定顶点属性数组的数据格式和位置 gl.vertexAttribPointer(aPosition, 3, gl.FLOAT, false, 0, 0); // 清空画布 gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.clear(gl.COLOR_BUFFER_BIT); // 绘制三角形 gl.drawArrays(gl.TRIANGLES, 0, 3); // 刷新画面 gl.flush(); ``` 这段代码首先获取了画布元素和WebGL上下文，然后定义了三个顶点的坐标数据。接下来，创建了顶点着色器和片元着色器，并编译它们的代码。然后，创建了着色器程序对象，并将顶点着色器和片元着色器附加到着色器程序对象上。之后，启用顶点属性数组，并指定顶点属性数组的数据格式和位置。最后，清空画布，绘制三角形，并刷新画面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Jinuss

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值