WebGL概述指南

已于 2024-09-23 20:05:22 修改
阅读量7.6k 收藏 30
点赞数 21
分类专栏： WebGL 文章标签： webgl
于 2023-11-22 20:23:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/mantou_riji/article/details/134442472
版权

文章目录


文档： https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API

webGL是什么

WebGL(Web图形库)是Web上3D图形的新标准，旨在渲染2D图形和交互式3D图形。
webGL是js的一个API，它可以在浏览器中渲染高性能的2D和3D图形。
WebGL，全称Web Graphics Library，是一种使用JavaScript编写的、基于OpenGL ES 2.0的3D图形库，为HTML5 Canvas提供了硬件加速的3D渲染功能。WebGL可以实现高效、流畅的3D场景渲染，可以让开发者在浏览器中创建交互式的3D游戏、数据可视化、地图等应用。

webGL中的数据类型

WebGLRenderingContext

WebGLRenderingContext对象的数据类型如下表所示：

类型web接口数据类型描述
GLenmumunsigned long用于枚举
GLboolenboolean布尔类型
GLbitfieldunsigned long一个位字段（bit field），用于存储逻辑位（bit）
Gbytebyte八位，一个字节，表示的是有符号的整数
GLshortshort十六位，两个字节，表示的是有符号的整数
GLintlong三十二位，四个字节，表示有符号的整型数
GLsizeilong用来描述尺寸，例如，会话缓冲 drawing buffer 地宽度和高度
GLintptrlong long用来表示指针的特殊类型。
GLsizeiptrlong long用来表示指针的特点书类型
GLubyteoctet八位，一个字节表示的是无符号的整数
GLushortunsigned short十六位， 两个字节，表示无符号的整数
GLuintunsign long三十二位，四个字节表示有符号的整数
GLfloatunrestricted float三十二位的IEEE标准的浮点数
GLclampfunrestricted float限制32位IEEE浮点数

WebGL2RenderingContext

WebGL2RenderingContext包含WebGLRenderingContext对象的所有数据类型，并且包含如下数据类型：

类型web接口数据类型描述
GLint64long long六十四位有符号整数

WebGL的特点

  • 硬件加速：WebGL使用GPU的加速能力，可以快速、流畅地渲染3D场景。
  • 跨平台：WebGL是Web标准，可以跨平台运行在各种设备上，包括PC、手机、平板等。
  • 动态渲染：WebGL可以在运行时动态生成、修改3D场景，支持高度交互性。
  • 开放标准：WebGL是由Khronos Group制定的开放标准，具有完整的API文档，开发者可以根据文档编写对应的代码。

WebGL的用途

  • 游戏开发：WebGL可以在浏览器中创建高质量、流畅的3D游戏，比如《一起来捉妖》等。
  • 数据可视化：WebGL可以用于大数据的可视化展示，可以将复杂的数据变成图形化的形式，让用户更容易理解。
  • 虚拟现实：WebGL可以实现360度全景图像的展示，可以让用户感受到身临其境的虚拟现实体验。
  • 地图展示：WebGL可以用于地图的展示，可以实现3D建筑的展示、路线规划、交通流量等功能。

WebGL技术栈

  • OpenGL ES：WebGL是基于OpenGL ES 2.0标准开发的，需要掌握OpenGL ES的基础知识。
  • Three.js：Three.js是一个优秀的WebGL渲染引擎，提供了丰富的API，可以简化WebGL开发。
  • WebGLInspector：WebGLInspector可以帮助开发者调试WebGL程序，可以查看WebGL状态、着色器源码等信息。
  • GLSL：GLSL是WebGL的着色器语言，需要掌握如何编写和调试GLSL着色器。

WebGL图元

WebGL 的基本图元包含点、线段、三角形，而三角形又分为三类：基本三角形、三角行带、三角形扇。

  • 基本三角形：
    依照顶点顺序，每三个顶点构成一个三角形，多余的点不再连接。
    在这里插入图片描述

  • 三角形带：
    共用一条带上的顶点组成新的三角形，从而形成三角形带。每个顶点和前两个顶点相连形成三角形。
    在这里插入图片描述

  • 三角形扇：
    以一个顶点为中心，三角形呈扇形排列，共用两个顶点的三角形扇。以第一个点做原点，每个顶点都连接着第一个顶点和他的前一个顶点。
    在这里插入图片描述

WebGL的常量

WebGL提供了一些常量，这些常量经常作为函数的参数或者函数的返回值使用。
WebGL的常量挂载在WebGL的两个渲染上下文函数中，我们通过gl.常量名的格式访问WebGL的常量。

清除缓存相关常量

清除缓存的相关常量是为清除缓存的函数 WebGLRenderingContext.clear()作参数的，有如下取值：

常量名称值说明
DEPTH_BUFFER_BIT0x00000100传递給clear来清除深度缓冲区
STENCIL_BUFFER_BIT0x00000400传递给 clear 来清除当前模板缓冲区。
COLOR_BUFFER_BIT0x00000400传递给clear来清除颜色缓冲区

指定图形渲染方式相关常量

指定图形渲染方式的相关常量主要作为 WebGLRenderingContext.drawElements() 或WebGLRenderingContext.drawArrays() 的参数。

常量名称值说明
POINTS0x0000画点
LINES0x0001画线段，两点之间使用线段进行连接
LINE_LOOP0x0002画回路，每两个点之间被当成一条独立的线段，线段首尾相连
LINE_STRIP0x0003画一个从第一个定点到最后一个顶点相连的线段
TRIANGLES0x0004每三个顶点创建一个独立的三角行
TRIANGLES_STRIP0x0005画一组相连的三角形带
TRIANGLE_FAN0x0006画一组相连的三角形扇

获取 GL 参数信息得相关常量

传递给 WebGLRenderingContext.getParameter() 的常量，用以指定要返回的信息。

常量名称值说明
BLEND_EQUATION0x8009传递给getParameter以获取当前的RGB混合函数
BLEND_EQUATION_RGB0x8009和BLEND_EQUATION功能类似，用于获取当前的RGB混合函数
BLEND_EQUATION_ALPHA0x883D传递给getParameter以获取当前的alpha函数
BLEND_DST_RGB0x80C8传递给getParameter以获取当前目标的RGB混合函数
BLEND_SRC_RGB0x80C9传递给getParamter以获取当前源的RGB混合函数
BLEND_DST_ALPHA0x80CA传递给getParamter以获当前目标的alpha混合函数
BLEND_ SRC_ALPHA0x80CB传递給getParamter以获取当前源的alpha混合函数
BLEND_COLOR0x8005传递给getParamter以获取当前的混合颜色
ARRAY_BUFFER_BINDING0x8894传递給getParamer 获取数组缓冲区绑定
ELEMENT_ARRAY_BUFFER_BINDING0x8895传递給getParamer 获取当前数组元素缓冲区
LINE_WIDTH0x0B21传递给getParamer获取当前的LineW.idth
ALIASED_POINT_SIZE_RANGE0x0B21传递给getParamer获取使用gl.POINTS绘制的点的大小
ALASED_LINE_WIDTH_RANGE0x846E传递给getParams得到一条线的可用宽度范围。返回一个长度为2的数组。其中低值为0，高值为1
CULL_FACE_MODE0x0B45传递给getParameter获取当前的cullFace值。应当返回FRONT，BACK， FRONT_AND_BACK
FRONT_FACE0x0B46传递給getParamter已确定当前的frontFace的值。应该为CW或CCW
DEPTH_RANGE0x0B70传递给geParameter返回长度为2的浮点数数组，以表示当前深度范围
DEPTH_WRITEMASK0x0B72传递给getParamter确定是否启用深度缓冲区写入操作
DEPTH_CLEAR_VALUE0x0B73传递给getParamter确定当前的深度清除值
DEPTH_FUNC0x0B74传递给getParamter获取当前的深度函数。返回NEVER、ALWAYS、LESS、EQUAL、GREATAER、GEQUAL、NOTEQUAL
STENCIL_CLEAR_VALUE0x0B91传递给getParamter获取将消除的模板值。
STENCIL_FUNC0x0B92传递给getParmeter获取当前的模板函数。返回NEVER，ALWAYS，LESS，EQUAL，LEQUAL，GREATER，GEQUAL或NOTEQUAL
STENCIL_FAIL0x0B94传递给getParamter 获取当前模板的失效函数。应该返回 KEEP ，RELOACE，INCR，DECR，INVERT，INCR_WRAP，或 DECR_WRAP
STENCIL_PASS_DEPTH_FAIL0x0B95如果深度缓冲区测试失败，则传递给getParameter获取当前模板的失败函数。应返回KEEP ，RELOACE，INCR，DECR，INVERT，INCR_WRAP，或 DECR_WRAP
STENCIL_PASS_DEPTH_PASS0x0B96如果深度缓冲区测试通过，则传递给getParameter获取当前模板的失败函数 。应返回KEEP ，RELOACE，INCR，DECR，INVERT，INCR_WRAP，或 DECR_WRAP
STENCIL_REF0x0B97传递给getParameter获取用于模板测试的参考值
VIEWPORT0x0BA2返回带有当前视口尺寸四个元素
SCISSOR_BOX0x0C10返回带有当前裁剪盒子尺寸的四个元素

WebGL的展示模型

webGL的展示原理是：WedGL空间中的点和多边形的个体转换由基本的转换矩阵（平移、缩放、旋转）处理。可以将这些矩阵组合在一起并以特殊方式分组，以使启用预渲染复杂的3D场景。这些组合成的矩阵最终将原始数据类型移动到一个称为裁剪空间的特殊坐标空间中。这个特殊空间是一个中心点位于（0，0，0），角落范围在（-1，-1，-1）到（1，1，1）之间2个单位宽的立方体。该裁剪空间被压缩到一个二维空间并栅格化为图像。

裁剪空间

在webGL程序中，数据通常上传到具有自己的坐标系统的GPU（视觉处理器）上，然后顶点着色器将这些点转换到一个称为裁剪空间的特殊坐标系上。延展到裁剪空间之外的任何数据都会被裁减并且不会被渲染。如果一个三角形超出了该空间的边界，则将其裁剪成新的三角形，并且仅仅保留新的三角形在裁剪空间中的部分。
在这里插入图片描述
它是一个角在 (-1, -1, -1)，对角在 (1, 1, 1)，中心点在 (0, 0, 0) 的每边 2 个单位的立方体。裁剪空间使用的这个两个立方米坐标系称为归一化设备坐标（NDC）。

三种矩阵

  • 模型矩阵，它定义了如何获取原始数据模型数据并将其在3D世界空间中移动。
  • 投影矩阵用于将世界坐标空间转换成裁剪空间坐标。常用的投影矩阵（透视矩阵）用于模拟充当3D世界中观看者的替身的典型相机的效果。
  • 视图矩阵负责移动场景中的对象以模拟相机位置的变化，改变观察者当前能够看到的内容。

齐次坐标

“齐次坐标表示是计算机图形学的重要手段之一，它既能够用来明确区分向量和点，同时也更易用于进行仿射（线性）几何变换。”—— F.S.Hill, JR。
过齐次坐标的理解可以看齐次坐标1 齐次坐标2

概念

简单来说齐次坐标是为了解决投影空间的问题诞生的，在传统的笛卡尔坐标系中，我们认为两条平行线永远不可能相交，但是在投影空间中两条平行线在无穷远处是相交的，此时笛卡尔坐标系就无法表示了。齐次坐标是用N+1个数来表示N维坐标的一种方式。图形和几何学的计算在投影空间中成为可能。
其中笛卡尔坐标和齐次坐标的转换规则如下：

  • 从普通坐标转换成齐次坐标时
    如果(x,y,z)是个点，则变为(x,y,z,1);
    如果(x,y,z)是个向量，则变为(x,y,z,0)
  • 从齐次坐标转换成普通坐标时
    如果是(x,y,z,1)，则知道它是个点，变成(x/1,y/1,z/1);
    如果是(x,y,z,0)，则知道它是个向量，仍然变成(x,y,z)

即假设在二维平面中有（1，2）（2，2）两个点表示的是两条平行线的正投影，那么通过齐次坐标就可以表示这两条平行线在投影坐标中效果，如下表示的是相交的两根线：
在这里插入图片描述
坐标轴中红线上的点在二维坐标中对应的都是（2，2）；黑线上的点在二维坐标轴中对应的都是(1,2)。

齐次坐标的作用

  1. 明确区分向量和点
    通过普通坐标和齐次坐标的变换规则我们可以得知：
    如果n+1维坐标是1，就表示这是一个点
    如果n+1维坐标是0，就表示这是一个向量
  2. 易用于进行仿射（线性）几何变换
    许多图形应用涉及到几何变换，主要包括平移、旋转、缩放。
    以矩阵表达式来计算这些变换时，平移是矩阵相加，旋转和缩放则是矩阵相乘，综合起来可以表示为p' = p*m1+ m2(m1旋转缩放矩阵， m2为平移矩阵， p为原向量，p’为变换后的向量)。
    引入齐次坐标的目的主要是合并矩阵运算中的乘法和加法，表示为p' = p*M的形式。即它提供了用矩阵运算把二维、三维甚至高维空间中的一个点集从一个坐标系变换到另一个坐标系的有效方法。”

WebGL中的齐次坐标

在webGL中引入齐次坐标的作用：

  • 许多不错的3D处理技术都是用的齐次坐标进行的处理，WebGL引入齐次坐标有利于图形更好的处理。
  • WebGL中的着色器函数就是使用的齐次坐标做的处理
gl_Position = vec4(position, 1.0);

position位置变量是在 draw() 方法中定义的，并作为 attribute 传递给着色器。position这是一个三维点，但最终通过管线传递的 gl_Position 变量实际上是四维的 , 是 (x,y,z,w) 而不是 (x,y,z) 。

模型转换

在现实世界的应用程序中，你拥有的源坐标不全部在裁剪空间中。因此大多数时候，你需要将模型数据和其他坐标转换（平移、旋转、缩放）到裁剪空间中。
一个立方体数据由顶点位置，立方体表面颜色和构成单个多边形的顶点位置的顺序组成（以 3 个顶点为一组，以构成立方体表面的三角形）。这些位置和颜色存储在 GL 缓冲区中，作为属性发到着色器，然后分别进行操作。最后，计算并设置单个模型矩阵。该矩阵表示要在组成模型的每个点上执行的转换，以将其移到正确的空间，并在模型中的每个点上执行任何其他所需的转换。这不仅适用于每一个顶点，而且还适用于模型每个表面的每个点。在这种情况下，对于动画的每一帧，一系列缩放，旋转和平移矩阵会将数据移动到裁剪空间中所需的位置。

eg:
MDN是 MDN WebGL 共享代码中定义的矩阵。

CubeDemo.prototype.computeModelMatrix = function (now) {
  // 缩小 50%
  var scale = MDN.scaleMatrix(0.5, 0.5, 0.5);

  // 轻微旋转
  var rotateX = MDN.rotateXMatrix(now * 0.0003);

  // 根据时间旋转
  var rotateY = MDN.rotateYMatrix(now * 0.0005);

  // 稍微向下移动
  var position = MDN.translateMatrix(0, -0.1, 0);

  // 相乘，确定以相反的顺序读取它们
  this.transforms.model = MDN.multiplyArrayOfMatrices([
    position, // step 4
    rotateY, // step 3
    rotateX, // step 2
    scale, // step 1
  ]);
};

| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |

WebGL 从入门到精通
candy的博客
11-14 3966
WebGL 是一个强大的在网页上实现 3D 图形渲染的技术。从入门到精通需要逐步掌握其基本概念、进阶技巧和高级应用。通过不断学习和实践，利用丰富的学习资源，包括官网、API 文档、书籍和学习网站等，可以深入理解 WebGL 的原理和应用。在实际开发中，无论是游戏开发、数据可视化还是虚拟展厅等领域，WebGL 都有着广阔的应用前景，值得开发者深入探索和学习。同时，随着浏览器技术的不断发展，WebGL 也在不断改进和完善，为开发者带来更多的可能性。
WebGL入门到进阶教程 - 系统学习Web3D技术
YunWisdom
10-12 2315
WebGL入门到进阶教程，系统地学习Web3D技术
WebGL编程指南（中文版）-第2部分
11-30
第2部分 本书目录: 第1章WebGL概述 1.1系统需求 1.2WebGL提供的渲染类型 1.3WebGL应用程序结构 1.4HTML5canvas的生成方式 1.5访问WebGL上下文环境 1.6WebGL状态机 1.7加载3D场景 1.8本章小结 第2章渲染几何体 2.1顶点和索引 2.2WebGL渲染管线概述 2.3在.WebGL中渲染几何体 2.4将属性关联至VBO 2.5渲染机制 2.6整合过程 2.7渲染模式 2.8缓冲区操控 2.9高级几何体加载技术：JSON和AJAX 2.10使用AJAX+JSON加载圆锥体对象 2.11本章小结 第3章光照 3.1光照、法线和材质 3.2在管线中使用光源、法线和材质 3.3着色方案和光照反射模型 3.40penGLES着色语言ESSL 3.5编写ESSL程序 3.6返回至WebGL 3.7位置光源 3.8本章小结 第4章相机 4.1WebGL不存在相机对象 4.2法线转换 4.3WebGL实现方式 4.4模型一视见矩阵 4.5相机矩阵 4.6透视矩阵 4.7WebGL示例结构 4.8本章小结 第5章实现方案 5.1矩阵栈 5.23D场景的动画操作 5.3计时策略 5.4体系结构更新 5.5连接矩阵栈和JavaScript计时器 5.6参数曲线 5.7优化策略 5.8插值方案 5.9本章小结 第6章颜色、深度测试以及Alpha混合 6.1在WebGL中使用颜色 6.2使用对象中的颜色 6.3使用光照颜色 6.4体系结构的更新操作 6.5通过iQueryUI实现互动性 6.6有向点光源 6.7使用场景中的颜色值 6.8深度测试 …… 第7章纹理 第8章拾取操作 第9章整合方案 第10章高级话题
WebGL编程指南
04-09
基本信息 原书名：WebGL Programming Guide: Interactive 3D Graphics Programming with WebGL (OpenGL) 原出版社： Addison-Wesley Professional 作者： (美)Kouichi Matsuda Rodger Lea(松田浩一，罗杰.李) 译者： 谢光磊 出版社：电子工业出版社 ISBN：9787121229428 上架时间：2014-6-11 出版日期：2014 年6月 开本：16开 页码：470 版次：1-1 ---------------------------------------- 目录 《WebGL编程指南》 第1 章 WebGL 概述 1 WebGL 的优势 3 使用文本编辑器开发三维应用 3 轻松发布三维图形程序 4 充分利用浏览器的功能 5 学习和使用WebGL 很简单 5 WebGL 的起源 5 WebGL 程序的结构 6 总结 7 第2 章 WebGL 入门 9 Canvas 是什么？ 10 使用[canvas] 标签 11 DrawRectangle.js 13 最短的WebGL 程序：清空绘图区 16 HTML 文件（HelloCanvas.html） 16 JavaScript 程序（HelloCanvas.js） 17 用示例程序做实验 22 绘制一个点（版本1） 22 HelloPoint1.html 24 HelloPoint1.js 24 着色器是什么？ 25 使用着色器的WebGL 程序的结构 27 初始化着色器 29 顶点着色器 31 片元着色器 33 绘制操作 34 WebGL 坐标系统 35 用示例程序做实验 37 绘制一个点（版本2） 38 使用attribute 变量 38 示例程序（HelloPoint2.js） 39 获取attribute 变量的存储位置 41 向attribute 变量赋值 42 gl.vertexAttrib3f() 的同族函数 44 用示例程序做实验 45 通过鼠标点击绘点 46 示例程序（ClickedPoints.js） 47 注册事件响应函数 48 响应鼠标点击事件 50 用示例程序做实验 53 改变点的颜色 55 示例程序（ColoredPoints.js） 56 uniform 变量 58 获取uniform 变量的存储地址 59 向uniform 变量赋值 60 gl.uniform4f() 的同族函数 61 总结 62 第3 章 绘制和变换三角形 63 绘制多个点 64 示例程序（MultiPoint.js） 66 使用缓冲区对象 69 创建缓冲区对象（gl.createBuffer()） 70 绑定缓冲区（gl.bindBuffer()） 71 向缓冲区对象中写入数据（gl.bufferData()） 72 类型化数组 74 将缓冲区对象分配给attribute 变量（gl.vertexAttribPointer()） 75 开启attribute 变量（gl.enableVertexAttribArray()） 77 gl.drawArrays() 的第2 个和第3 个参数 78 用示例程序做实验 79 Hello Triangle 80 示例程序（HelloTriangle.js） 80 基本图形 82 用示例程序做实验 83 Hello Rectangle（HelloQuad） 84 用示例程序做实验 85 移动、旋转和缩放 86 平移 87 示例程序（TranslatedTriangle.js） 88 旋转 91 示例程序（RotatedTriangle.js） 93 变换矩阵：旋转 97 变换矩阵：平移 100 4×4 的旋转矩阵 101 示例程序（RotatedTriangle_Matrix.js） 102 平移：相同的策略 105 变换矩阵：缩放 106 总结 108 第4 章 高级变换与动画基础 109 平移，然后旋转 109 矩阵变换库：cuon-matrix.js 110 示例程序（RotatedTriangle_Matrix4.js） 111 复合变换 113 示例程序（RotatedTranslatedTriangle.js） 115 用示例程序做实验 117 动画 118 动画基础 119 示例程序（RotatingTriangle.js） 119 反复调用绘制函数（tick()） 123 按照指定的旋转角度绘制三角形（dr
一文了解webGL、webGL2.0、webGPU的区分。
最新发布
2401_82617164的博客
03-05 1364
特性WebGL 1.0WebGL 2.0WebGPU技术基础着色器语言WGSL（或兼容 SPIR-V）计算能力无原生计算着色器无原生计算着色器原生支持计算着色器多线程支持无无支持多线程命令提交性能优化潜力低中等高（显式控制资源）典型应用场景简单 3D 应用、基础图形中等复杂度 3D 应用高性能游戏、科学计算、XR兼容性几乎全平台主流浏览器逐步普及中。
数据可视化—WebGL
weixin_40057800的博客
12-25 1238
虽然 Three.js 是一个基于 WebGL 的 3D 库，但它的官方网站Three.js – JavaScript 3D Library也有很多关于 3D 开发的基础知识和教程，这些内容对于理解 WebGL 的应用场景和相关技术有很大的帮助。它基于OpenGL ES 2.0标准，允许开发者使用JavaScript语言来编写基于GPU的图形渲染程序，通过WebGL提供的API接口，开发者可以实现复杂的3D场景渲染、纹理贴图、光照效果、阴影效果等各种高级图形效果。这本书是学习 WebGL 的经典之作。
WebGL
2301_80269780的博客
07-29 3520
WebGL全称叫做Web Graphics Library，它是JavaScrint API、用于在任何兼容的Web浏览器中演染交互式的3D图形，并且无需使用插件。它基于 OpenGL ES 2.0(一个用于嵌入式系统的图形库)，并与其他 Web 标准完全集成，使开发者能够利用 GPU 加速图形处理直接在网页上实现复杂的图形效果。WebGL可以在网页上开发高性能的3D游戏，许多现代网页游戏都利用了WebGL实现了丰富的图形效果和流畅的用户体验。
webgl介绍
weixin_33785108的博客
04-13 201
一、webgl与three.js　   　我们知道canvas、svg等是2D绘图的，那么如果想要使用js进行3D绘图，可以吗？ 答案是肯定的！实际上主流的3D开发使用的是c++，但是随着技术的发展，JavaScript目前已经是无孔不入了，包括web（vue/react）、移动端（RN/weex）、客户端（electron/nw）、后端（nw）、人工智能（tensorflow.js），而thr...
WebGL是啥
xie__jin__cheng的博客
05-01 912
WebGL（全写为Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染。WebGL的应用领域非常广泛，包括但不限于虚拟现实（VR）和增强现实（AR）应用、模拟器和培训应用、教育应用、数据可视化、产品展示和电子商务、工业应用以及医学应用等。
WebGL是什么
KnowledgeX's Blog
08-27 4299
官网：https://www.khronos.org/webgl/ WebGL是什么？ WebGL（Web图形库）是一种JavaScript API，用于在任何兼容的Web浏览器中呈现交互式2D和3D图形，而无需使用插件。WebGL完全集成到浏览器的所有Web标准中，允许GPU加速物理和图像处理和效果的使用，作为网页画布的一部分。WebGL元素可以与其他HTML元素混合，并与页面的其他部分...
WebGL 开发介绍.zip
11-14
webGl介绍， 调研收集， 此资源主要针对我的博客文章的附件：
webgl编程指南及源码2/2
05-08
《WebGL编程指南》 第1 章 WebGL 概述 1 WebGL 的优势 3 使用文本编辑器开发三维应用 3 轻松发布三维图形程序 4 充分利用浏览器的功能 5 学习和使用WebGL 很简单 5 WebGL 的起源 5 WebGL 程序的结构 6 总结...
WebGL编程指南（中文版）第1部分
11-30
第1章WebGL概述 1.1系统需求 1.2WebGL提供的渲染类型 1.3WebGL应用程序结构 1.4HTML5canvas的生成方式 1.5访问WebGL上下文环境 1.6WebGL状态机 1.7加载3D场景 1.8本章小结 第2章渲染几何体 2.1顶点和索引 2.2WebGL...
WebGL编程指南压缩包
05-15
《WebGL编程指南》 第1 章 WebGL 概述 1 WebGL 的优势 3 使用文本编辑器开发三维应用 3 轻松发布三维图形程序 4 充分利用浏览器的功能 5 学习和使用WebGL 很简单 5 WebGL 的起源 5 WebGL 程序的结构 6 总结...
WebGL 快速入门构建你的第一个 3D 应用
qq_34820371的博客
10-27 1351
WebGL（Web Graphics Library）是基于 OpenGL ES 2.0 的一个 JavaScript API，支持在浏览器中绘制 2D 和 3D 图形。它与 HTML5 完全兼容，适用于 Chrome、Firefox、Safari 等主流浏览器，无需插件即可渲染高质量图形。3D 渲染：创建复杂的 3D 场景和模型。硬件加速：通过 GPU 渲染，提供高性能图形处理。跨平台：支持跨平台的网页和 Web 应用图形渲染。编写顶点着色器和片段着色器代码，并将其加载到 WebGL 程序中。
WebGL 入门
liubangbo的专栏
07-06 3941
webgl 是在网页上绘制和渲染三维图形的技术，可以让用户与其进行交互。我们之前学过的div+css、canvas 2d 都是专注于二维图形的，它们虽然也能模拟一部分三维效果，但它们和webgl 比起来，那就是玩具枪和AK47的差别。综上所述，webgl 绘图好麻烦啊！麻烦不是不学的理由，因为后面还有three.js 为你排忧解难。那我们为啥不直接学习three.js 呢？那是因为three.js 若是只想画个旋转的立方体还好，若是要深入学习，实现复杂的模型交互逻辑，就必须要有webgl 基础了。
webGL入门知识讲解
m0_57307213的博客
06-18 7789
webgl入门知识讲解
webGL渲染流程
jieyucx的博客
07-04 2066
WebGL是一种用于在网页浏览器中的。它基于标准，并允许开发人员使用JavaScript和其他Web技术创建高性能的图形和交互式内容。WebGL可以直接访问用户的图形硬件，并利用图形处理单元（GPU）进行快速图形渲染，从而实现在现代网页浏览器上展示逼真的3D图形和效果。通过WebGL，开发人员可以创建各种各样的应用程序，包括VR）和AR）应用等。
: Failed to start bean 'webServerStartStop'; nested exception is java.lang.reflect.UndeclaredThrowableException
09-22
java.lang.NoClassDefFoundError是一个Java异常，表示在运行时找不到类的定义。通常，这个错误是由于类路径（classpath）配置问题引起的，即某个类无法在运行时加载到内存中。要解决这个问题，可以尝试以下几个方法： 1. 确保所需的类文件或JAR包存在于正确的位置，并且路径配置正确。 2. 检查项目的依赖项，确保所有的依赖项都已正确添加到项目中。 3. 如果使用的是Maven或Gradle等构建工具，尝试清理和重新构建项目，以确保所有的依赖项都被正确地下载和导入。 4. 检查类名的拼写，确保类名的大小写与代码中的引用一致。 5. 如果使用的是IDE，尝试重启IDE并重新构建项目。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值