2018年11月_暮志未晚NAN

12月 11月 10月 08月 07月 06月 05月 04月 03月 02月 01月

转载图解WebGL和Three.js的工作原理

一、我们讲什么？我们讲两个东西：WebGL背后的工作原理是什么？以Three.js为例，讲述框架在背后扮演什么样的角色？二、我们为什么要了解原理？我们假定你对WebGL已经有一定了解，或者用Three.js做过了一些东西，这个时候，你可能碰到了这样一些问题：很多东西还是做不出来，甚至没有任何思路；碰到bug无法解决，甚至没有方向；性能出现问题，完全不知道如何去优化。这个时候...

2018-11-26 19:15:05 1729 2

原创图形系统

一个计算机图形系统首先是一个计算机系统，隐藏，它必然包含一个通用计算机系统的所有部件。图形系统包含6个主要元素：输入设备中央处理单元（CPU）图形处理单元（GPU）存储器帧缓存输出设备下图描述了计算机图形系统的结构：CPU当我们使用鼠标和键盘将图形数据输入时，数据将会移交给系统的中央处理单元（CPU）来处理。处理器要完成的图形处理功能主要是获取由应用程序生成的图元（比如线...

2018-11-25 11:39:00 1416

写在本系列前面由于我也是半道出家，首先学的前端开发，对3d开发很感兴趣，刚好又感受好时候（h5）浏览器对webgl的支持。让我们这些前端开发者能够在浏览器上面进行3d开发。现在就一直在研究webgl这一块，虽然属于半吊子水平，使用three.js能够开发出来一些相关的功能，满足项目的需求。但是，自己几斤几两还是清楚，所以，最近比较清闲，就准备再学习一本书也算是真正的入门计算机图形学的中层了。做...

2018-11-23 19:20:11 2894

原创实现canvas圆形橡皮檫像素清空功能

由于项目里面需求一个圆形的橡皮檫功能，但是原生的canvas清空方法只有一个clearRect() 方法，这个方法只是可以提供矩形清空的方法。根据项目需求，我们只能想办法实现，最后，通过百度想到的办法就是，通过使用clearRect() 多次清除，来实现圆形清除。逻辑很简单，接下来带上源码，大家可以下载下来，然后将图片的src修改一下，即可。<!doctype html>&l...

2018-11-20 10:47:04 2892 3

原创使用canvas实现局部高斯模糊效果

这个功能目的是为了模糊一些人的脸部，一些文字信息。主要用于用户手动操作进行模糊。实现的功能：本人实现了再pc端上面进行拖拽模糊。实现思路：首先加载图片，然后再加载完成的回调中，创建一个高斯模糊过的图片画布。接着，绑定鼠标的交互事件，在里面获取到在画布上面点击的位置。通过位置获取当前位置周围的图像数据，进行生成圆形数据。最后，使用drawImage将数据覆盖到画布上面。是不是感觉思路...

2018-11-09 18:34:15 3258

原创使用canvas生成一个圆形的图片

之前发现在网上无法找到相关的内容，找的内容测试也发现有bug。遂，整理思路，自己研究一个可以实现效果的功能。具体思路就是：首先获取到图片的资源，如果使用img加载的，那一定要等img触发onload以后处理。我使用的图片是等宽高的图片，获取到图片资源以后，额外的创建一个canvas，将图像使用drawImage方法画到画布上，我们在这个canvas上面处理图像。通过canvas对象的conte...

2018-11-07 19:10:23 10974 1

原创使用canvas画布实现高斯模糊效果

最近项目中有一个需求是实现图片的局部模糊效果，看上去一个挺难的效果。在实现局部模糊效果前，首先能够实现全部模糊。经过和度娘的一番较劲后，找到了一个不错的案例：https://blog.csdn.net/sunshineanl/article/details/70240250。然后在他的基础上，经过一番修改，和备注，实现了当前的案例：&lt;!doctype html&gt;&lt;html ...

2018-11-06 11:44:57 7827 6

原创 104 THREE.JS 实现merge后显示相应的材质

之前，我使用merge实现过63 THREE.JS 将多个网格合并成一个网格，当时只是简单的实现了一下几何体的merge，证明merge后的能够提高很大的性能。merge的几何体有弊端就是，merge以后，只是一个整体，无法再分开，也没办法判断点击的哪个物体，这只适合合并一些场景内不再修改的模型。那么问题来了，如果合并的这些模型的材质不一样，还想合并到一块怎么样？接下来我们看一下实现思路。g...

2018-11-02 18:55:28 3434