当前搜索:

cocos creator 中使用shader实现流光

在论坛中有水友用多边形遮罩做了一个流光,这里分享一个用shader写的流光特效。 原理 将图片中指定区域的颜色亮度增大,或者加上颜色,然后在 update 中去更新这个高亮的区域。 代码 下面是 shader 内容, 关于 ShaderUtils 可以参考我之前的这篇博客。 顶点...
阅读(64) 评论(0)

2d游戏中角色动画解决方案

刚刚在cocos creator论坛中,看到有水友在update更新spriteFrame来做角色动画,其实是可以使用 cc.Animation 来做角色动画,,这是我们游戏的实现方式,给大家参考下。 一 资源管理 1 美术输出资源要求 首先,规划美术输出角色的动画,一个角色文件夹,比如...
阅读(37) 评论(0)

skynet socket监听连接 demo

下载安装 源码: https://github.com/cloudwu/skynet 编译:https://github.com/cloudwu/skynet/wiki/Build 服务器 demo新建 server 目录,将 skynet 原来克隆在 server 目录中;为了后面维护和更新方便...
阅读(106) 评论(0)

游戏日志系统设计与实现

作用 游戏临近上线,需要做一个日志系统,记录玩家的行为,用途如下: 监控玩家状态变化,如账号登记,角色创建,上线下线,充值等; 分析玩家行为,如金币钻石消耗在什么系统上了,主要参与了哪些活动和玩法; 帮助分析bug,记录玩家的行为和数据变化,可以回溯bug产生的过程; 方便客服,查询和处理玩...
阅读(246) 评论(0)

shadertoy上手指南

一 shadertoy是什么下面是维基百科上的定义: Shadertoy.com is a cross-browser online community and tool for creating and sharing shaders through WebGL, used both for...
阅读(1411) 评论(3)

WebGL之旅(二十) 帧缓冲区对象FBO

一 概念前面都是将图片作为绘制图形时的纹理映射,这一节来看看如何将渲染结果作为纹理,即动态生成纹理,贴在另一个物体上。默认情况下,都是在屏幕提供帧缓冲区中绘制,如果要动态生成纹理,就需要另外新建一个缓冲区对象,来代替默认的缓冲区,在其中进行离屏绘制。帧缓冲区对象包括: 颜色关联对象(可以是纹理对象...
阅读(414) 评论(0)

WebGL之旅(十九) 雾化

一 原理雾化,即使用雾的颜色与场景中物体的颜色进行叠加。线性雾化,会指定一个起点和终点,起点为开始雾化点,终点为完全雾化的点: 在起点之前的完全清晰,也就是说完全为场景中的物体颜色; 在起点和终点之间的点,根据距离计算雾的因子; 在终点之后就完成为雾的颜色。 物体颜色和雾的颜色叠加公私如下: 片元...
阅读(199) 评论(0)

WebGL之旅(十八) 点选立方体

原理这里用了一个比较巧妙(山寨)的方法判断是否点击到了立方体: 获取鼠标点击的位置; 将立方体绘制成红色(也可以是其他颜色); 判断鼠标点击位置的颜色 恢复立方体的颜色 示例由以上原理,当鼠标点击位置的颜色跟立方体重绘之后的颜色一致为红色时,则点击的位置就在立方体上。(如果背景色也为红色,就尴尬了...
阅读(254) 评论(0)

WebGL之旅(十七) 带纹理的立方体

带纹理的立方体在前面一片博客中,有绘制一个平面的带纹理的图形,现在绘制一个立,并分别制定纹理。/** * 绘制带纹理的立方体 * xu.lidong@qq.com * */function main() { var gl = getGL(); var vsFile = &qu...
阅读(360) 评论(0)

WebGL之旅(十六) 层级模型

层次模型是指用一颗“有向树”的数据结构来表示表示各类实体以及实体间的联系,树中每一个节点代表一个记录类型,树状结构表示实体型之间的联系。——百度百科 在变换时,父节点的变换会待着子节点一起,而子节点的变换则不会影响父节点。例如手臂的运动会带动手肘的运动,而手肘的运动不影响手臂的运动。即: 子节点的...
阅读(381) 评论(0)

WebGL之旅(十五)从文件中加载shader

随着程序越来越复杂,把shader写在js中不好管理,最好是把shader写在不同的文件中,然后当做资源去加载。一 文件加载添加一个方法loadShaderFromFile,从文件中加载内容,因为加载文件是异步的,因此需要通过回调返回。function loadShaderFromFile(fil...
阅读(499) 评论(0)

WebGL之旅(十四)点光源

点光源的方向对于平行光,直接指定颜色和方向,对于电光鱼的方向则需要通过位置来计算。对于已知坐标的点,其点光源的方向为: 入射光线(反)方向 = 光源位置 - 顶点位置 已知方向之后,反射光线的计算就跟平行光一样了。点光源示例/** * 点光源 * xu.lidong@qq.com * */v...
阅读(246) 评论(0)

WebGL之旅(十三)平行光和漫反射

一 相关概念 光:方向 + 颜色(包含了强度) 光源平行光:同方向 + 颜色 点光源:方向(光源位置到照射位置) + 颜色 环境光:颜色 入射角:入射光反方向与平面法线的夹角 反射:漫反射: 反射的光在各个方向上均匀,反射光颜色=入射光颜色 X 基底色 X cos(a),a为入射角 环境反射: 反...
阅读(363) 评论(0)

WebGL之旅(十二)IBO绘制立方体

在计算机中,所有的图像都是有三角形组成,绘制立方也是通过绘制三角形。立方体有6个面,每个面需要2个三角形,每个三角形3个定点,因此需要绘制12个三角形即36个点。但立方体本来只有6个定点定点就可以确定了,如何优化点这些冗余的数据呢?答案就是IBO(index buffer object),在一个v...
阅读(245) 评论(0)

WebGL之旅(十一)透视投影

与正射投影不同,透视投影会出近大远小的效果,与人的视觉效果一直,游戏中一般都是使用的透视投影。示例:/** * 透视投影矩阵 * xu.lidong@qq.com * */var g_vs = ` attribute vec4 a_Position; attribute vec4 a_Col...
阅读(268) 评论(0)

WebGL之旅(十)正射投影

要将三维物体在二维的平面上显示,必须经过投影,投影分为两种: 正射投影 长方体的可视空间 物体大小不随位置变化 透视投影 四棱锥的可是空间 近大远小 下面的例子绘制了三个三角形,可以通过wasd修改远近界面。<!DOCTYPE html> <html lang="en&...
阅读(273) 评论(0)

WebGL之旅(九)视图矩阵

视图矩阵一 相机状态描述视点:相机在世界坐标中的位置 eye(eyeX, eyeY, eyeZ)观测点:被观察的目标点,指明相机的朝向 at(atX, atY, atZ)视线:从视点出发指向观测点方向的射线 dir(atX - eyeX, atY - eyeY, atZ - eyeZ)上方向:图像...
阅读(474) 评论(0)

WebGL之旅(八)纹理映射

当传入几个顶点及其颜色后,虽然会对剩余的顶点进行插值,绘制出渐变的图像,但同要绘制的图像更加复杂时,就需要用到另一种方式——纹理映射,来确定每个点的颜色。当需要绘制一个点的颜色时,不在是通过计算得到,而是去一张事先保存好的图像中,对应的坐标取纹理的颜色。纹理的坐标st(或者叫uv)范围是0-1。示...
阅读(443) 评论(0)

WebGL之旅(七)varying变量

前面已经说过的变量类型: attribute: 用在顶点着色器中接收顶点相关信息; uniform: 可以同时在顶点着色器和片元着色器中使用,接收无顶点无关的数据。 现在来看一个新的变量类型: varying 同时在顶点着色器和片元着色器中定义,用于在两者之间传递数据。 示例:/** * var...
阅读(423) 评论(0)

WebGL之旅(六)动画

动画原理已经知道如何绘制一个三角形了,利用变换举证可以让图形产生相应的变换。现在要做的是,绘制一个三角色,不断的更新旋转矩阵的角度,然后重绘就会产生旋转动画。实现/** * 旋转动画 * xu.lidong@qq.com * */// 顶点着色器源码 var vertexShaderSrc ...
阅读(266) 评论(0)
    个人资料
    持之以恒
    等级:
    访问量: 59万+
    积分: 9253
    排名: 2508
    关于我
    编程是一门艺术,态度决定高度,细节决定成败。