WebGL
关注
分享
扫一扫
从webgl入门到高级，先简单陈列基础代码，后续反复学习时不断总结复盘，完善博客
wangyk,C'est la vie
Per aspera ad astra.
展开
-
WebGL进阶（八）绘制正方体
构成正方体的基础单元为三角形，顶点默认逆时针连接，此时的面为正面，顺时针点连接的面为背面。多边形和曲面可能具有复杂的几何形状，但是由于三角形具有逼近性，通过合理的三角剖分可以很好地逼近复杂形状。在每个小三角形内部可以进行插值计算，从而实现光滑的渐变效果，提高渲染质量。计算机图形学中很多技术和算法都是基于三角形的，如光栅化、像素填充、着色和纹理映射等。通过使用三角形作为基本元素，这些算法可以更加高效地运行，从而加速图像处理和渲染过程。原创 2024-11-21 14:19:31 · 639 阅读 · 0 评论 -
WebGL进阶（十）逐片源光照、逐顶点光照
【代码】WebGL进阶（10）逐片源光照、逐顶点光照。原创 2024-11-23 07:15:00 · 410 阅读 · 0 评论 -
WebGL进阶（七）深度缓冲区
【代码】WebGL进阶（七）深度缓冲区。原创 2024-11-20 20:48:39 · 458 阅读 · 0 评论 -
WebGL进阶（十一）层次模型
【代码】WebGL进阶（11）层次模型。原创 2024-11-23 21:07:15 · 278 阅读 · 0 评论 -
WebGL进阶（四）-视点和视线
如果 stride 为 0，则假定该属性是紧密打包的，即不交错属性，每个属性在一个单独的块中，下一个顶点的属性紧跟当前顶点之后。: signed 16-bit integer, with values in [-32768, 32767] 有符号的 16 位整数，范围 [-32768, 32767]: signed 8-bit integer, with values in [-128, 127] 有符号的 8 位整数，范围 [-128, 127]的索引，指向要激活的顶点属性。必须是类型的字节长度的倍数。原创 2024-10-28 17:03:35 · 950 阅读 · 0 评论 -
WebGL进阶（六）投影矩阵
正射投影的好处是用户可以方便地比较场景中物体( 比如两个原子的模型)的大小，这是因为物体看上去的大小与其所在的位置没有关系。在建筑平面图等技术绘图的相关场合，应当使用这种投影。透视投影下，产生的三维场景看上去更是有深度感，更加自然，因为我们平时观察真实世界用的也是透视投影。在大多数情况下，比如三维射击类游戏中，我们都应当采用透视投影。原创 2024-11-20 20:38:49 · 492 阅读 · 0 评论 -
WebGL进阶（九）光线
符合向量定义，末减初。原创 2024-11-21 22:54:49 · 386 阅读 · 0 评论 -
WebGL进阶（五）-可视域
如果 stride 为 0，则假定该属性是紧密打包的，即不交错属性，每个属性在一个单独的块中，下一个顶点的属性紧跟当前顶点之后。: signed 16-bit integer, with values in [-32768, 32767] 有符号的 16 位整数，范围 [-32768, 32767]: signed 8-bit integer, with values in [-128, 127] 有符号的 8 位整数，范围 [-128, 127]的索引，指向要激活的顶点属性。必须是类型的字节长度的倍数。原创 2024-10-28 16:59:13 · 1007 阅读 · 0 评论 -
webGL进阶（三）-动态变换与动画理论基础
医学证明人类具有“视觉暂留”的特性，人的眼睛看到一幅画或一个物体后，在0.34秒内不会消失。原创 2024-10-16 13:41:29 · 467 阅读 · 0 评论 -
WebGL报错无法在 JS 中读取 null 的属性（读取 ‘getContext’）TypeError: Cannot read property ‘getContext’ of Null
同时不要忘记给画布一个大小。原创 2024-09-22 10:44:16 · 532 阅读 · 0 评论 -
webGL图形变换常用api总结
【代码】webGL图形变换常用api总结。原创 2024-10-05 16:33:05 · 190 阅读 · 0 评论 -
webGL入门（一）绘制一个点
【代码】WebGL入门（一）绘制一个点。原创 2024-09-22 10:47:01 · 301 阅读 · 0 评论 -
webGL入门(三)绘制一条线
效果：原创 2024-09-28 08:30:00 · 332 阅读 · 0 评论 -
webGL入门(二)点击屏幕动态生成多个点
【代码】webGL入门(二)点击屏幕动态生成多个点。原创 2024-09-28 07:00:00 · 186 阅读 · 0 评论 -
webGL入门（五）绘制多边形
【代码】webGL入门（五）绘制多边形。原创 2024-09-29 18:26:27 · 447 阅读 · 0 评论 -
webGL进阶（一）多重纹理效果
【代码】webGL进阶（一）多重纹理效果。原创 2024-10-05 13:06:17 · 558 阅读 · 0 评论 -
webGL入门对于LINES_STRIP与LINE_STRIP绘制连线的不同之处
上图为LINES_STRIP。上图为LINE_STRIP。原创 2024-09-29 06:00:00 · 486 阅读 · 0 评论 -
webGL入门（四）绘制一个三角形
TRIANGLE_FAN所绘制的效果。TRIANGLES所绘制的效果。原创 2024-09-29 18:25:24 · 325 阅读 · 0 评论 -
webGL进阶（二）物体运动
【代码】webGL进阶（二）物体运动。原创 2024-10-08 21:05:33 · 324 阅读 · 0 评论 -
webGL入门（七）通过键盘控制物体运动
【代码】webGL入门（七）通过键盘控制物体运动。原创 2024-10-04 16:21:44 · 274 阅读 · 0 评论 -
webGL入门（六）图形旋转
效果：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> var原创 2024-10-04 14:54:04 · 498 阅读 · 0 评论