String_Kun-优快云博客

原创使用threejs离屏渲染实现高斯模糊效果

之前的博客里我使用webgl实现了简单的离屏渲染效果，最近在使用threejs库开发项目的时候，想实现点击物体高亮，背景物体虚化的效果。为了实现这个效果，我决定将每帧渲染出来的图片拿出来，进行一次高斯模糊，在把它贴到一个背景板上。这里面由于使用了离屏渲染就有几点需要注意 1.两组摄像机、两个scene、一个WebGLRenderTarget。

2017-12-20 19:18:15 7918 2

原创使用threejs实现辉光&大气层效果

最近想使用threejs实现辉光的特效，在查阅了一些资料之后，不仅实现了辉光的特效，还顺带实现了大气层特效，在写着色器的过程中有了一些理解~ 首要目标：为了实现辉光的着色器，我们把辉光分为几个步骤来实现： 1.创建两个球体，一个作为原始物体，一个略大一些作为它的辉光。 2.作为辉光的球体从内到外片元透明度逐渐减小（线性减小或是指数减小都可以）

2017-12-06 20:20:25 15430 2

原创使用threejs点云秀出酷炫的模型效果

前几次用点云去摆放实现图片的效果，这次我决定用点云实现一些模型效果。首先我们知道WebGL底层绘制方式有三种，分别是点绘制，三角形面绘制和线绘制。在threejs中我们可以方便地通过THREE.PointsMaterial设置使用点绘制方式（当然还有THREE.LinesMaterial是专门画线的）。然后我将我们需要实现的效果分成了四步 1.创建或加载我们转

2017-12-01 22:25:15 8976

原创 SVG与Canvas的特点

最近在使用SVG做一个地图的编辑器，简单来说就是画多边形的场地以及建筑的俯视图，本来想用Java去写，后来发现使用H5技术写这些更为方便，通过比较了Canvas与SVG后，决定使用SVG来写这个编辑器。 SVG与Canvas的比较： 1.SVG具有丰富的DOM接口：这也是我选用SVG而没有使用Canvas最重要的原因，在绘制方面Canvas是逐像素进行渲染的，也

2017-11-08 20:37:55 4642

ECMAScript6是比较新的JavaScript的标准，现在大部分浏览器也都可以兼容它的写法，在我看来它让JS这个弱类型语言有了像Java这种的“类”的概念，可以直接使用class进行初始化类，代码编写方式基本和java没有什么区别~还有就是let和const的使用，让JS有了区块作用域的概念，这样可以减少很多由全局变量导致的问题的发生~最后就是一些语法糖，例如箭头函数=>可以让一些格式化的代

2017-11-01 20:15:43 1761

原创 threejs中PC与手机操作的一些总结

在一些简单的webgl项目中，我们经常碰到的操作就是两指缩放，滑动旋转，这两种操作经常要进行PC和手机的适配，这里总结一下我踩了的一些小小的坑吧~ 1.手机与PC获取屏幕对应点击位置的方法不同：手机是触摸获取位置，PC是点击鼠标获取位置两者的代码略有不同，这与threejs构建的3D世界没有关系，仅仅是将点击/触摸的位置转换为窗体位置罢了，我在下面总结一下：

2017-10-26 16:40:18 7141 7

原创对js函数作用域的进一步理解

今天在写一个threejs的项目时，遇到了一个问题，我需要批量初始化一批图片作为纹理图放入数组中，然后再批量初始化一堆JSON模型，最后在把纹理图贴到对应的模型上面，这里就涉及到了几个问题。 1.首先加载图片和模型都是一个异步的操作，换句话说，你不能控制那张图片或者哪个模型先加载好，我想到的解决方法是，用一个计数的变量在每次调用加载器时，确定某张图片或者某个模型存放的位置，这样就

2017-10-19 20:03:41 404

原创使用threejs+tweenjs实现图片炸裂效果

在之前使用threejs实现了点云的效果，后来想了一下还可以通过着色器修改一块板子上每个点的位置实现一些特殊的效果，比如让一个板子炸开~之前点云中点的运动轨迹都是自己计算出来的，后来发现tweenjs这个工具很好用，于是就应用到了这个项目中。　　介绍项目之前，先理一理实现炸裂效果的思路 1.创建一个PlaneBufferGeometry对象方便对顶点进行处理，创建一个Shade

2017-10-10 20:03:57 7744

原创使用threejs实现3D全景漫游

最近发现谷歌相机蛮好玩儿的，可以通过拍摄多幅照片将其合成一张全景图，于是我在宿舍中拍摄了宿舍内和阳台的两张全景图，并使用threejs实现了全景漫游。只是一个简单的全景场景浏览比较简单，就是创建一个球往里面贴一个全景图。为了实现比较好的交互，能够通过点击鼠标实现漫游效果，我对其中的技术进行了一定的思考与总结。首先我们来总结一下用户的交互过程：打开网页、等待

2017-09-27 15:48:23 14011 5

原创对OpenGLES中的空间变换的理解

今天翻看以前用Cocos2d-x写的VR小游戏的代码，有一个模块功能是判断固定在屏幕中心的一条射线是否触碰到了其他3D物体。这套代码原来是从学长写的游戏中直接扒出来的，没有细细研究，今天正好看到了，就借此总结一下在OpenGLES中空间的转换。在OpenGLES中，物体会在五个空间中变换，如图所示：（图片来自网络） 1.物体空间：

2017-09-13 20:28:16 968

原创 webgl——使用FBO实现离屏渲染

在3D应用中我们经常会使用离屏渲染来进一步绘制场景，从而提高场景的视觉效果。离屏渲染就我的理解来说，首先需要将需要离屏渲染的物体，绘制到帧缓冲当中并将其当成一个纹理，在对其进行处理，处理完成后再将这个纹理贴到需要渲染的物体上。在OpenGLES当中使用FBO实现离屏渲染的案例已经有很多了，当我想将其移植到WebGL当中时却发现可供参考的案例十分的少，于是我花了几天时间研究，并在这里做以总结。

2017-09-09 17:06:00 5403

原创 webgl——VAO

上次说到了对VAO、VBO的理解，明白了使用VAO相比传统模式在IO方面对加载性能的提升，今天我对其在WebGL上进行了实现。在WebGL中由于很多API与OpenGLES大为不同（一般常用的API大致是相同的），开始时费了很多劲，最后还是通过MSDN找到了相关的API及方法，这里对设计VAO的主要的部分进行介绍，对VAO还不是很理解的同学可以看这篇文章：http://blog

2017-07-27 15:08:10 1853

原创 JS概念理解（四）——闭包

闭包：闭包的使用场景：我们设想这样一个场景，一款FPS游戏，玩家携带的子弹上限是一定的，这时为了能在别的地方修改弹药数量，就需要将弹药数量定义为一个全局变量，然而这样不利于控制，如果不小心把它改成-1了呢？所以我们这是就需要使用闭包来就行改变和查询弹药数：function 枪械() { var 弹药数量 = 30; window.射击 = fun

2017-07-23 20:32:05 287

原创 JS概念理解（三）——执行上下文、作用域与自由变量

执行上下文：在我的理解中，执行上下文环境是在开始执行代码之前，需要把所有用到的东西拿出来，有的直接赋值，有的先声明出来，下面举例说明;

2017-07-23 15:40:31 590

原创 JS概念理解（二）——this

this在JS中经常出现并使用，其中this所取的值是当函数被调用执行时才可以确定，定义时还无法确定。因为this取值关乎执行上下文环境，每次调用时可能都不一样，下面介绍this的几种取值情况：构造函数：当this出现在构造函数中时，它代表的就是即将创建出的这个对象。function People() { this.name = "srk";

2017-07-22 20:43:48 388

原创 JS概念理解（一）——函数和对象、原型链、_proto_

最近发现自己JS的基础不太好，于是通过看书和大神的博客，通过自己的理解将一些难懂的概念在此总结： 1.函数和对象的关系: 在JavaScript中一切对象都是通过函数创建的，某些情况下的写法实际上是一种语法糖：var a = {b : 20, c: 30};var arr = [ 5 , "as", true];//可以写成var a = new

2017-07-21 20:43:15 714

原创对OpenGLES中VBO与VAO的理解

在OpenGLES中，VBO与VAO都是一个重要的概念，以前也在书上看到过这些概念，在有了自己的理解之后对其做以总结。 VBO的全称 Vertex Buffer Object顶点缓冲区对象，这是在Opengles2.0以后一个可使用的功能。如果不使用VBO则是将顶点、纹理坐标等数据存放在内存当中，在每次绘制之前通过通IO将其传递到显存当中，这样做的缺点是显而易见的，每次传递相同的

2017-07-11 20:53:12 2510

原创对OpenGLES2.0渲染管线的理解

在学习OpenGLES时，每一本书开始都会向我们介绍渲染管线，当我在开始学习它时，看这些东西完全不明白在说什么，经过一段时间对3D程序的开发和研究现在对渲染管线也有了一些自己的理解。由于WebGL是基于OpenGLES2.0实现的一套JavaScript封装API（其中也有一些特有的部分），那么就先聊聊我对OpenGLES2.0渲染管线的理解吧。

2017-07-11 11:03:31 1762

原创 webgl--平面阴影效果

在特定的3D场景中，阴影效果有时还是显得十分重要的，在一般的3D引擎当中设置阴影可以直接通过对物体设置属性来实现，十分的方便，这里我们就用webgl来实现一下平面效果。平面阴影是通过灯光将物体的阴影投射在一个平面内，但是物体之间没有阴影的叠加，也就是说A物体的阴影不会投射到B物体上，在本案例中我们主要是通过着色器来实现平面阴影的效果的，这里首先介绍一下平面阴影的计算公式：

2017-07-04 10:45:21 1234

转载 OpenGL ES着色器语言之内建函数

OpenGL ES着色语言为标量和向量操作定义了一套内建便利函数。有些内建函数可以用在多个类型的着色器中，有些是针对固定硬件的，所以这部分只能用在某个特定的着色器上。内建函数基本上可以分为一下三类：（1）它们使用一些简便的方式提供必要的硬件功能，如材质贴图。这些函数单独通过着色器是无法模拟出来的。（2）它们展示了一些可以常简单的写入的繁琐操作（clamp， m

2017-07-01 10:49:56 775

原创对着色器代码与纹理图优化的一些体会

在以前的项目中写了这么多着色器，以及最近看一些书籍，对着色器的优化有了一些自己的体会，在这里总结一下。

2017-06-30 20:07:47 1399

原创 webgl——混合与模板测试

今天研究了一个混合与模板测试相结合的案例，这里做以总结。案例中一个篮球在地板上不断弹起并且落下，这里主要涉及到了两项技术：混合与模板测试。首先篮球在地板上反射出来的镜像篮球就是通过混合技术实现的，为了让镜像体在运动脱离地板时消失，实现真实的效果，还需要加入模板测试。首先介绍他们的绘制顺序 1.开启模板测试，关闭深度检测 2.绘制实体地板

2017-06-29 21:48:23 2553 1

原创 webgl——实现物体描边效果

终于把手头的事结束了，可以有时间来研究研究技术~作为一名3D开发人员，仅仅使用现有的引擎来开发项目不免有些浮于表面，多研究研究底层的实现更利于对3D开发整体的把控~于是我决定最近开始研究webgl一些特效的实现，希望能在秋招前对底层有更深入的理解。在webgl中实现描边的效果有很多种方式，比如我写卡通风格着色器那篇文章讲到的（将视线投影到每个点的法线上，这个值越小越说明这个点靠

2017-06-28 20:45:24 6503 5

原创对DrawCall的理解

drawcall是CPU对底层图形绘制接口的调用命令GPU执行渲染操作，渲染流程采用流水线实现，CPU和GPU并行工作，它们之间通过命令缓冲区连接，CPU向其中发送渲染命令，GPU接收并执行对应的渲染命令。这里drawcall影响绘制的原因主要是因为每次绘制时，CPU都需要调用drawcall而每个drawcall都需要很多准备工作，检测渲染状态、提交渲染数据、提交渲染状态。而GPU本身具有很

2017-06-19 10:25:06 16960

原创对threejs官方案例webgl_kinect的思考

在上次按照自己的想法使用粒子系统对图片进行处理之后，我最近又看到了官方案例中，使用粒子使视频呈现出3D效果，既然是官方案例就需要仔细研究一下。这是该案例的实现效果：可以看到屏幕中由粒子构成了一个人在整理桌面的东西，效果十分的酷炫，大家可以在官方案例中看到动态的效果。官方案例地址：https://threejs.org/examples/#webgl_kinect下面是我自己对于

2017-05-17 14:39:13 3376

原创使用threejs点云秀出酷炫的图片效果(二)

上一次使用粒子系统，通过改变每一个粒子的位置和颜色构成了一副图片，这次我们使用批量操作粒子移动构成放映机的效果。首先需要控制每一个粒子移动，每一个粒子就需要两套位置，第一个位置是起始时粒子所在的位置，第二个位置时结束时粒子所在的位置。为了能使每一个粒子单独进行移动这里还给每个粒子设置了scale速率，当到达1.0时结束移动。 function createPotCloud() {

2017-05-09 16:44:17 1443

原创使用threejs点云秀出酷炫的图片效果(一)

最近做项目很忙，好久没写博客了，前几天看到腾讯回忆时光的一个页面，使用了点云拼凑出了照片轮播十分有趣，于是我想用threejs实现这个效果。首先这件事情分为两步：1.根据图片数据创建对应大小、颜色的点云。2.给点云加上着色器，给渲染管线传递点云变换需要的数据（位置数据，颜色数据）。今天我们先来实现加载图片并且通过图片数据加载点云：首先绘制

2017-04-17 18:25:41 9225 1

原创基于threejs开发的卡通风格着色器（二）

上次给球体添加了卡通风格着色器之后觉得还少些什么，仔细观察网上卡通风格的游戏发现，卡通风格的3D任务往往除了明显不平滑过渡的色块以外，还都有着黑色描边，这次我们就来修改着色器实现描边的效果。描边特效可以通过很多方法来实现，比如：判断每个面片的朝向，当一条棱既出现在一个面片的正面又出现在反面时，说明该楞是分界线，将其涂黑即可。或者将每个点沿着法线方向延伸一定距离，相当于一个放

2017-04-04 16:04:18 2598 1

原创在threejs中对3D物体旋转的思考

今天在写threejs时，突然想到一个问题：一个3D物体需要旋转时，一般情况下简单的旋转我都是使用欧拉角，稍微复杂一些的情况我会把欧拉角转换成四元数进行旋转（欧拉角复杂旋转可能会产生的死锁问题），但是在threejs中object3D的旋转方法无论是使用setRotation（沿着x、y、z轴旋转）还是rotateOnAxis（按从原点到任意方向的向量进行旋转）都无法完成沿着一个不经过原点的轴进行

2017-03-31 14:36:28 14783 1

原创基于threejs开发的卡通风格着色器

作为一个大学一直在玩3D的同学，还是应该多写写关于3D的东西，正好把原来做得着色器整理整理，供大家参考也供自己以后回顾吧~ 一般的现实中的物体讲求一个平滑着色，能够使其看起来更加真实，而卡通风格的物体则是让被着色物体显得过渡的不那么好，明暗交界线很明显，这样的风格独树一帜，也运用到了很多卡通风格的游戏当中，我在网上看到的卡通风格着色器基于Unity开发的有很多，这里我来基于thr

2017-03-28 20:49:29 3056

原创使用CSS3实现翻书效果（二）

原来一直使用QQ直接登录的博客，今天绑定了一下邮箱，原来的博客全没了，只好把原来备份的博文重新发了一下，还好只有两篇~ 昨天把css3实现翻书样式的效果实现了大半，今天将其主体的样式全部实现了，下面将进行说明：我们仔细观察书本的样式发现书本底下是有阴影的，而且阴影可以随着翻书的动作来移动，书皮的左右两侧也分别有一条封边，看起来非常真实，这里主要是使用了元素的a

2017-03-27 16:39:42 6178

原创使用css3实现翻书效果（一）

最近在网页上看到一个使用CSS3制作的很有趣的样式，通过纯css3的使用实现翻书的效果，作为初学者的我决定实现一下该效果~该网站特效如图所示：是不是感觉特效非常棒，直接使用css样式而不使用图片大大减少了加载速度，也降低了用户流量的损耗，实在是一举两得，下面我介绍一下我的开发步骤：经过我对网站代码的研究，该书籍div分为以下几部分 1.最上层是写着“CSS TRA

2017-03-27 15:27:58 8305

原创用Canvas画漫天繁星吧~

初学Canvas写了一个在一片区域内随机产生星星并且不断闪动的效果。具体实现如下所示。首先创建一个canvas让其适配屏幕的大小。 h = screen.height - 200; w = screen.width - 10; can1 = document.getElementById("canvas1"); can1.setAttribute('width',

2017-03-27 15:23:47 664

srk19960903的博客