WebGL快速入门_webgl入门-程序员宅基地

WebGL快速入门

WebGL是什么

GPU ≠ WebGL ≠ 2D
WebGL是浏览器上的OpenGL
需要一定计算机图形学基础和线性代数基础

WebGL（全写Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。

显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。

Modern Graphics System

在这里插入图片描述

光栅（Raster）：几乎所有的现代图形系统都是基于光栅来绘制图形的，光栅就是指构成图像的像素阵列。
像素（Pixel）：一个像素对应图像上的一个点，它通常保存图像上的某个具体位置的颜色等信息。
帧缓存（Frame Buffer）：在绘图过程中，像素信息被存放于帧缓存中，帧缓存是一块内存地址。
CPU（Central Processing Unit）：中央处理单元，负责逻辑计算。
GPU（Graphics Processing Unit）：图形处理单元，负责图形计算。

在这里插入图片描述

CPU vs GPU

CPU和GPU的区别是CPU是电脑的中央处理器，在电脑中起着控制计算机运行的作用；GPU是一个附属型的处理器，主要处理计算机中与图形计算有关的工作，并将数据更好地呈现在显示器中。

GPU由大量的小运算单元构成，每个运算单元只负责处理很简单的计算，每个运算单元彼此独立，因此所有计算可以并行处理。图形渲染的像素处理数量一般都是非常大的，但是每个像素的计算量却不大，所以GPU处理图形渲染就非常有优势。

WebGL Startup

在这里插入图片描述

创建WebGL上下文
创建WebGL Program
Shaders（着色器：）Vertex Shader（顶点着色器）和Fragment Shader（片源着色器）
将数据存入缓冲区
将缓冲区数据读取到GPU
GPU 执行 WebGL程序，输出结果

WebGL的封装库-Mesh.js

在这里插入图片描述

Polygons

如何绘制一个多边形？
在这里插入图片描述

3D Meshing

3D的模型较为复杂，是在设计软件里先设计好再导出，而不是像2D一样实时计算。

Transforms

在这里插入图片描述

3D Matrix

3D标准模型的四个齐次矩阵（mat4）

投影矩阵 Projection Matrix
模型矩阵 Model Matrix
视图矩阵 View Matrix
法向量矩阵 Normal Matrix

本文链接：https://blog.csdn.net/ASHIYI66/article/details/122638150

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

宝塔打开后，内容渲染失败（405）【了解一下】_宝塔部署后405 not allowed-程序员宅基地

文章浏览阅读111次。如果你是以上这种情况，打开以后发现，数据渲染不上，很可能是因为你的配置反向代理的顺序搞错了，造成的结果就是反向代理没有替换成功！还是那些内容，只是改变了操作步骤；数据就能加载出来了！_宝塔部署后405 not allowed

联想计算机管理员权限设置,Windows XP系统如何新建administrator管理员权限账户-程序员宅基地

文章浏览阅读1.6k次。知识点分析:对于Windows XP系统，有很多种创建用户账户的操作方法。其中包括：使用CMD命令行的net命令进行，也可以使用控制面板的图形界面进行，还可以使用计算机管理控制台中的“本地用户和组”进行。其中后者自定义功能多，本文以此为例进行操作示范。操作步骤:1. 在系统桌面找到并使用鼠标右键点击“我的电脑”图标，然后在弹出菜单中选择“管理(G)”，如下图所示：2. 在弹出的计算机管理窗口，展开..._xp 开启管理员账户

socket 及 websocket的握手过程_websocket三次握手详解-程序员宅基地

文章浏览阅读6k次。一、WebSocket和HTTP之间的关系WebSocket和HTTP一样都是基于TCP的应用层协议。WebSocket协议和HTTP协议是两种不同的东西。客户端开始建立WebSocket连接时要发送一个header标记了 Upgrade的HTTP请求，表示请求协议升级。所以服务器端做出响应的简便方法是，直接在现有的HTTP服务器软件和现有的端口上实现WebSocket协议，然后再回一个状态..._websocket三次握手详解

小学计算机反思案例,小学数学有效教学案例及反思-程序员宅基地

文章浏览阅读210次。小学数学有效教学案例及反思《植树问题》教学设计及反思一、教学目标：1、知识与技能目标：通过动手实践，合作探究，让学生在做数学的过程中经历由现实问题到数学建模，理解并掌握植树棵数与间隔数之间的关系。2、过程与方法目标：通过学生自主实小学数学教学案例及反思小学数学教学案例及反思学生的认知结构，只有在经历学习活动的过程中主动才能完成。只有学生本人的积极思考、主动探索，才能有所发现、有所创新。但在不少学校..._小学数学教学案例博客

HBuilder的下载与使用(详细步骤)_hbuilder官网-程序员宅基地

文章浏览阅读10w+次，点赞125次，收藏651次。一、HBuilder IDE的下载HBuilder下载官网地址：在地址栏中直接输入https://www.dcloud.io或者直接点击下面的链接DCloud - HBuilder、HBuilderX、uni-app、uniapp、5+、5plus、mui、wap2app、流应用、HTML5、小程序开发、跨平台App、多端框架进入官网，免费下载最新版的HBuilder。HBuilder目前有两个版本，一个是windows版，一个是mac版。下载的时候根据自己的电脑选择适合自己的版本。_hbuilder官网

centos7删除文件夹命令_CentOS7文件（文件夹）复制、移动与删除命令介绍-程序员宅基地

文章浏览阅读9k次，点赞2次，收藏10次。在使用Centos7系统时，一般都需要管理大量的文件(文件夹)，这样就要需要用到一些文件管理命令。本文以第一、文件(文件夹)复制命令命令格式：cp [-adfilprsu] 源文件(source) 目标文件(destination)cp [option] source1 source2 source3 … directory-adfilprsu参数说明：-a:是指archive的意思，也说是指复制..._centos7删除文件夹

随便推点

【Java 虚拟机原理】垃圾回收算法 ( 标记-清除算法 | 复制算法 | 标记-整理算法 )_java 垃圾回收算法复制算法有标记过程吗-程序员宅基地

文章浏览阅读2.2k次，点赞9次，收藏38次。总结、一、标记清除算法、二、复制算法、三、标记-整理算法、_java 垃圾回收算法复制算法有标记过程吗

虚幻引擎5 (UE5):完整的初学者学习教程_虚幻5教程-程序员宅基地

文章浏览阅读4.2w次，点赞22次，收藏164次。流派:电子学习| MP4 |视频:h264，1280×720 |音频:AAC，44.1 KHz语言：英语+中英文字幕（根据原英文字幕机译更准确）|大小解压后:6.26 GB |时长:7h 32m虚幻引擎5的最快入门方法云桥网络平台获取教程你会学到什么虚幻引擎虚幻引擎5游戏设计建筑设计产品设计描述欢迎初学者全面了解新的虚幻引擎5。专业人士和初学者都可以使用UE5，借助新的Lumen Lighting System和Nanite虚拟几何引擎，创建令人惊艳的实时内容。作为一名游戏、架构.._虚幻5教程