AhCola

一. 效果网站地址：pengfeixc.comminicode：pengfeiw.github.io/minicode二. sourcecodepixel image | github

效果online 地址：https://pengfeiw.github.io/minicode/threejs-star源码star | github

online 地址threejs-gallery 在线地址 | Minicode源码gallery - github

效果在线预览地址：threejs-worldmap ，你可以通过鼠标左键旋转，中键缩放，右键平移来操作视口。实现通过读取一张透明世界地图的图片数据，然后将图片数据，用 ThreeJs 绘制到场景中。源码https://github.com/pengfeiw/threejs-example/blob/main/worldmap.html更多内容可以关注我的个人网站：我的小站。...

基于web的魔方游戏，内有 online 试玩地址和源码。

最近在写一篇计算机图形几何入门的教程。目前写了两节内容。《你好，线性代数》教程名称为《你好，线性代数》，网站是自己开发的，采用github page发布，可以在线阅读，阅读地址：https://pengfeiw.github.io/hellolinearalgebra/。项目完全开源，开源地址：https://github.com/pengfeiw/hellolinearalgebra。感兴趣的可以关注一下，若发现教程有误，可以提issue或者pr，感谢任何帮助我完善教程的朋友。...

????原文地址：3D空间中的点坐标转化为屏幕二维点坐标（二）????上一节，简单的介绍了计算机时如何将三维世界中的点转化成屏幕上的二维点坐标的，知道了透视矩阵的作用。这一节内容，就是介绍其中的数学计算的过程。坐标系与矩阵在三维计算机图形学中，那些呈现在屏幕（画布canvas）上的每个点，都是由三维的点转化的，它们组成了屏幕上的图像。在前面的文章中，我介绍了透视矩阵，透视矩阵的作用就是将三维的点转化成二维的点，展现在屏幕上，也给大家讲解了透视投影矩阵的计算，所以本节内容当然并不是再次计算透视投影矩阵

材质在前一篇文章中，我介绍了冯氏光照理论，冯氏光照理论主要由三个部分组成：环境光照漫反射光照镜面光照按照冯氏光照理论，我们可以绘制出非常真实的场景，但是与现实世界相比总会差那么一点。现实中，不同的物体，它们对光产生的反应是不一样的，也就是说当光线照射在物体上，它们反射的颜色不一样，亮度也不一样，这是由物体本身的材质决定的。木头、石头、金属对同一种光线产生的反应当然是不一样的，金属反光度会强很多，石头次之，木头最弱。一. 物体材质所以我们需要给物体定义一个材质颜色属性。物体材质定义成如下几个

webgl模拟太阳系demo: minicode——太阳系文章同时发布于：我的个人网站。这次做的MiniCode，是用webgl模拟太阳系的动画，绘制了太阳系和绕太阳旋转的八颗行星。各个部分的绘制方法我简要概述下。1. 背景星空这部分本来打算采用绘制天空盒的方式，绘制一个无边无际的宇宙的，由于我没有添加自动移动摄像机的功能，所以就简单的绘制了一张背景图片星空。需要特别注意的是，绘制背景的时候，一定要预先关闭深度测试，绘制好星空背景后再开启深度测试，否则由于远近的关系，背景会遮住行星。// -

颜色与冯氏光照模型一. 颜色中国色在WebGL中，颜色用RGBA表示，每个值的取值范围从0到1，对应我们常用的取值范围0到255。例如在着色器中，想输出一个黑色：void main() { FragColor = vec4(0.0, 0.0, 0.0, 1.0); // rgba(0, 0, 0, 1)}在真实世界中，我们肉眼看到的颜色，往往不是物体真正的颜色。真实世界中物体的反射的颜色一般会与环境有关，经过光线照射（太阳光，灯光），物体会反射与其本身颜色有一定差异的颜色，在白天和夜

摄像机建议在了解摄像机之前，如果你对3d图形中的坐标系统不是很了解的话，可以先去阅读一下坐标系统讲解的文章，在回到这里继续阅读。摄像机示意图（来源LearnOpengl_cn官网）一.介绍对马岛之魂 镜井仁多人在线的游戏世界中，同时在线的玩家一般有很多个。虽然他们游戏中的角色同处于一个游戏世界，但是每个玩家所见的场景是不一样的（屏幕上看到的场景），即使玩家站在游戏世界中同一个坐标，所见的场景一般也会不同，因为他们视线的方向不一样，看到的景色当然也不一样。即使角色坐标和视线方向完全一样，他们所

Wavefront OBJ文件格式文章同时发布于：https://pengfeixc.com/blog/60e66901e97367196dce3f05一.一个四边形下面是一个简单的四边形的.obj文件内容。v -0.5 -0.5 0.0v +0.5 -0.5 0.0v +0.5 +0.5 0.0v -0.5 +0.5 0.0f 1 2 3 4v标记文件中每一行都由一个标记和一串数字组成。v表示顶点，前面以v开头的四行表示有四个顶点（vertex）, 标记v后面包括三个数字，表示x、y

坐标系统和glMatrix(GLM)文章同时发布于：个人网站.这篇文章是接矩阵变换系列文章的，说明各类变换矩阵在一般用于3d图形学程序的什么阶段，如何去使用。如果还没有看过之前的矩阵变换，可以在以下地址访问：3D图形学中的矩阵变换（一）：http://pengfeixc.com/blog/60a7492be97367196dce3eef3D图形学中的矩阵变换（二）：http://pengfeixc.com/blog/60b1b739e97367196dce3ef43D图形学中的矩阵变

webgl实现3D俄罗斯方块文章同时发布于王鹏飞的个人网站。试玩地址：3d tetris。源码: https://github.com/pengfeiw/3d-tetris学习webgl/opengl已经有一段时间了，打算做个小程序练一练，所以就有了这个俄罗斯方块。采用的技术是webgl + typescript + canvas，至于界面使用的是react + material-ui框架。下面我将介绍一些实现的技术点。一.介绍界面左侧是可以打开或者关闭的设置面板。可以通过distance和r

高效率种子填充算法文章同时发布于：http://pengfeixc.com/blog/60d06420e97367196dce3efb最近写了一个画板小程序，为了实现画板的填充功能，研究了一下图形学填充算法。我在网上查找了大量的资料，最终找到了一个效率很高的填充算法。可以在minicode看到我的画板程序，测试下填充功能的速度。下面我将讲述我的算法实现过程。一. 种子填充算法（flood fill or seed fill）网上有很多讲解种子填充算法的，大家一搜就知道有4联通的方式和8联通的方式。

【webgl】绘制一个三角形文章同时发布于：王鹏飞的个人网站。作为webgl的第一篇文章，首先我推荐几个学习webgl（opengl）的资源：learnopengl中文官网：https://learnopengl-cn.github.io/, 这个教程是学习opengl最好的地方，因为webgl是基于opengl的，所以我认为这也是学习webgl最好的地方，如果你熟悉C++的话，建议根据这个教程学习。webgl理论基础：https://webglfundamentals.org/webgl/less

3D图形学中的矩阵变换（二）文章同时发布于王鹏飞的个人网站。在之前的一篇文章中，我介绍了平移、旋转和缩放矩阵的证明，简单的讲解了如何证明绕任意轴旋转的旋转矩阵的证明思路。没有看过的朋友可以在这里看到。这篇文章主要讲解下我理解的矩阵和矩阵的基变换，并简单介绍下LookAt矩阵。一. 摄像机这里涉及到三维图形学中的摄像机的概念。大家肯定都玩过游戏，现在游戏发展速度都特别快，很多游戏世界都是3D的，例如国外的荒野大镖客、巫师以及国内最近比较火的原神。游戏世界中所有的物体，例如桌子、树木、动物以及交通工具

文章同时发布于: 王鹏飞的个人网站。3D图形学中的矩阵变换从这个月开始，我打算系统的去学习计算机图形学的知识了，一方面是因为兴趣，另一方面是之前自己也写过一些二维图形相关的程序，有一些数学的基础。图形学在软件开发中的地位很高，市面上所有的建模软件都与图形学相关，即使是photoshop这种设计软件也会涉及图形学的知识。而现在由于webgl的发展，未来图形软件在浏览器的比重也会越来越大。废话不多说了，直接进入正题。本篇文章主要是为了证明图形学中的几种变换矩阵。首先要知道到学习图形学肯定要与向量、矩阵打交