写在本系列前面由于我也是半道出家，首先学的前端开发，对3d开发很感兴趣，刚好又感受好时候（h5）浏览器对webgl的支持。让我们这些前端开发者能够在浏览器上面进行3d开发。现在就一直在研究webgl这一块，虽然属于半吊子水平，使用three.js能够开发出来一些相关的功能，满足项目的需求。但是，自己几斤几两还是清楚，所以，最近比较清闲，就准备再学习一本书也算是真正的入门计算机图形学的中层了。做... 2018-11-23 19:20:11  · 2866 阅读  · 这几天用到了逆矩阵，就在这里总结一下逆矩阵和转置矩阵。逆矩阵逆矩阵就是一个矩阵的逆向。比如一个点乘以一个矩阵后得到了一个新的点的位置，如果想通过这个点再获得矩阵转换前的位置，那我们就需要乘以这个矩阵的逆矩阵。在Three.js里面，我们可以通过new THREE.Matrix4().getInverse(matrix4)方法来获得一个矩阵的逆矩阵。具有的性质：可逆矩阵一定是方阵。如果矩... 2019-06-17 13:59:25  · 24811 阅读  · 假设空间某点O的坐标为（Xo，Yo，Zo）,空间某条直线上两点A和B的坐标为：(X1,Y1,Z1),(X2，Y2，Z2),设点O在直线AB上的垂足为点N，坐标为(Xn，Yn，Zn)。点N坐标解算过程如下：首先求出下列向量：由向量垂直关系，两个向量如果垂直，那么两个向量的点积（点乘，向量积）则为0，可得出。上式记为（1）式。点N在直线AB上，根据向量共线定理： (2)由（2）得： ... 2019-06-12 18:51:51  · 2066 阅读  · 在交互式计算机图形学一书中，使用了一个名为MV.js的库，里面封装了一些矢量和矩阵用到的方法，比如实例化方法，之间的计算等等，我在英文的基础上做了一下汉化，对于新手来说，会更加的友好。////////////////////////////////////////////////////////////////////////////////// Angel.js///////////... 2018-12-17 19:16:06  · 797 阅读  · 2018-12-06 18:59:37  · 3536 阅读  · 既然是进阶，我们就要先从基础入手，那么先看一下如何创建一个WebGL的着色器程序：// 初始化着色器程序插件// initShaders.js//function initShaders(gl, vertexShaderId, fragmentShaderId) { var vertShdr; //顶点着色器对象 var fragShdr; //片元着色器对象 ... 2018-12-05 19:07:43  · 765 阅读  · 一、我们讲什么？我们讲两个东西：WebGL背后的工作原理是什么？以Three.js为例，讲述框架在背后扮演什么样的角色？二、我们为什么要了解原理？我们假定你对WebGL已经有一定了解，或者用Three.js做过了一些东西，这个时候，你可能碰到了这样一些问题：很多东西还是做不出来，甚至没有任何思路；碰到bug无法解决，甚至没有方向；性能出现问题，完全不知道如何去优化。这个时候... 2018-11-26 19:15:05  · 1707 阅读  · 一个计算机图形系统首先是一个计算机系统，隐藏，它必然包含一个通用计算机系统的所有部件。图形系统包含6个主要元素：输入设备中央处理单元（CPU）图形处理单元（GPU）存储器帧缓存输出设备下图描述了计算机图形系统的结构：CPU当我们使用鼠标和键盘将图形数据输入时，数据将会移交给系统的中央处理单元（CPU）来处理。处理器要完成的图形处理功能主要是获取由应用程序生成的图元（比如线... 2018-11-25 11:39:00  · 1398 阅读  · 此文章为转载：作者：胡说ba道原文：https://blog.csdn.net/qq_37925032/article/details/80146256溶解效果在游戏中十分常见，然而普通的溶解效果往往并不好看，本文将实现一种基于边缘bloom的溶解效果的实现先上最终效果图整体思路：将溶解的边缘提取出来，bloom之后再与原图像混合。首先我们实现一下最基础的溶解，下面给出关键代码：... 2019-07-25 10:49:57  · 1082 阅读  ·