为了更好的模拟3D真实场景，引入了投影矩阵（Projection），视图矩阵（View），模型矩阵（Model）3个概念，通过在Vertex Shader中使用透视矩阵 * 视图矩阵 * 模型矩阵 * 顶点得出最终的顶点位置。 投影矩阵的主要目的是将顶点从3D空间投影到2D空间…

上一节我们讲了 WebGL 坐标系的分类以及它们之间的转换方式，本节开始详细介绍坐标系基本变换的算法实现，图形学中实现变换的主要数学工具是矩阵，所以在讲解坐标系变换之前，我们先温习一下矩阵。 所使用的向量是行向量还是列向量。 如果是行向量，按照数学领域中矩阵相乘的规则，向量要放…

1. 初始化纹理信息 2. 加载纹理图像 加载的纹理图像不能对 canvas 造成污染。也就是说，对纹理的加载同样需要遵循跨域访问规则 3. 配置并使用纹理 4. 着色器处理

只要理解了 WebGL 背后的概念，学习 WebGL 并没有那么难。很多 WebGL 入门文章并没有介绍这些重要的概念，直接使用 WebGL 复杂的 API 开始渲染图形，很轻松就把入坑文变成了劝退文

去年谷歌和火狐针对 WebVR 提出了 WebVR API 的标准，顾名思义，WebVR 即 web + VR 的体验方式，我们可以戴着头显享受沉浸式的网页，新的 API 标准让我们可以使用 js 语言来开发。今天，约克先森将介绍如何开发一个 WebVR 网页，在此之前，我们有必要了解 WebVR 的体验方式。

本文不会涉及到具体的代码。 CPU 和 GPU 都属于处理单元，但是结构不同。形象点来说，CPU 就像个大的工业管道，等待处理的任务只能依次的通过这跟管道，所以CPU处理这些任务的速度完全取决于处理单个任务的时间。 CPU管道虽然只能让任务一个一个依次执行，但是CPU处理单个任…

上节中,将着色器代码直接写在字符串里太麻烦了,不方便.所以要把它拆分出去. 上节中,我们使用的是TypeScript的tsc编译的,由于使用的编译选项outFile,支持AMD,system的模块代码生成模式,不能直接导入文件作为字符串,所以使用webpack来编译. 项目根目…

WebGL概述 WebGL是一项结合了HTML5和JavaScript，用来在网页上绘制和渲染复杂三维图形的技术。WebGL通过JavaScript操作OpenGL接口的标准，把三维空间图像显示在二维