srk19960903的博客

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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