关闭
当前搜索:

游戏日志系统设计与实现

作用游戏临近上线,需要做一个日志系统,记录玩家的行为,用途如下: 监控玩家状态变化,如账号登记,角色创建,上线下线,充值等; 分析玩家行为,如金币钻石消耗在什么系统上了,主要参与了哪些活动和玩法; 帮助分析bug,记录玩家的行为和数据变化,可以回溯bug产生的过程; 方便客服,查询和处理玩家的反馈。 结构设计首先,用一台公共的服务器左右日志的db服务器,所有游戏中产生的日志,都往这个db中写;然后,...
阅读(33) 评论(0)

shadertoy上手指南

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

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

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

WebGL之旅(十九) 雾化

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

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

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

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

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

WebGL之旅(十六) 层级模型

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

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

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

WebGL之旅(十四)点光源

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

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

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

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

在计算机中,所有的图像都是有三角形组成,绘制立方也是通过绘制三角形。立方体有6个面,每个面需要2个三角形,每个三角形3个定点,因此需要绘制12个三角形即36个点。但立方体本来只有6个定点定点就可以确定了,如何优化点这些冗余的数据呢?答案就是IBO(index buffer object),在一个vbo中,保存这6个定点,指定36个定点时,通过索引从这6个定点中取值。另外,为了是代码更加简洁,将一些向...
阅读(157) 评论(0)

WebGL之旅(十一)透视投影

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

WebGL之旅(十)正射投影

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

WebGL之旅(九)视图矩阵

视图矩阵一 相机状态描述视点:相机在世界坐标中的位置 eye(eyeX, eyeY, eyeZ)观测点:被观察的目标点,指明相机的朝向 at(atX, atY, atZ)视线:从视点出发指向观测点方向的射线 dir(atX - eyeX, atY - eyeY, atZ - eyeZ)上方向:图像的上方向,指明相机以视线为轴的旋转角 up(upX, upY, upZ)二 相机坐标系定义: 以视点为原...
阅读(265) 评论(0)

WebGL之旅(八)纹理映射

当传入几个顶点及其颜色后,虽然会对剩余的顶点进行插值,绘制出渐变的图像,但同要绘制的图像更加复杂时,就需要用到另一种方式——纹理映射,来确定每个点的颜色。当需要绘制一个点的颜色时,不在是通过计算得到,而是去一张事先保存好的图像中,对应的坐标取纹理的颜色。纹理的坐标st(或者叫uv)范围是0-1。示例:/** * 纹理映射 * xu.lidong@qq.com * */var vertexSha...
阅读(212) 评论(0)
361条 共25页1 2 3 4 5 ... 下一页 尾页
    个人资料
    • 访问:509995次
    • 积分:8455
    • 等级:
    • 排名:第2647名
    • 原创:348篇
    • 转载:13篇
    • 译文:0篇
    • 评论:81条
    关于我
    编程是一门艺术,态度决定高度,细节决定成败。