游戏开发
含影
高交互性3D内容生产/协作,
跨平台3D引擎,
跨平台渲染引擎,
高性能计算
展开
-
3D系统中的摄像机控制
Demo1:Vox APPDemo2:Vox APP3D引擎系统中, 灵活的摄像机控制机制 能实时提供给用户合适的视角,更方便的 编辑、捕捉、控制摄像机的视角轨迹。原创 2021-10-10 22:13:31 · 130 阅读 · 0 评论 -
反射和折射的混合
折射效果和反射效果可以通过各种形式混合,就能呈现不同的材质感觉原创 2019-01-01 11:41:32 · 375 阅读 · 0 评论 -
多重ProjectMap(投影纹理)原理和拓展应用(Demo和Shader源码)
请见Demo:http://www.artvily.com/renderCase?sample=projectMapMult效果图:投用纹理的基本原理: 以世界坐标空间中,检测当前像素位置是否能被投影纹理所在的空间(可由投影纹理对应的摄像机(后面称作PMCamera)来描述,)可见性(和光照计算一致)如果可见计算出对应的纹理坐标。以2D纹理为例,这里计算出来的纹理坐标来讲就是此像素位...原创 2019-01-11 12:41:36 · 509 阅读 · 1 评论 -
GodRay应用<2>: 屏幕(像素)空间高效模拟光束,高速尾迹等效果
请见Demo:http://www.artvily.com/renderCase?sample=godrayShaftLight01效果图:现实中,很多时候都能见到光束(光散射),现在实时渲染中已经有很多方式(体积光效果更好)来模拟这种自然现象,来增强画面的表现力。这里是使用了最基本的径向后处理机制来实现这样类似的效果。原理很简单, 一般情况下绘制场景对象的时候,如果认为这个对象...原创 2019-01-24 09:09:31 · 844 阅读 · 0 评论 -
GodRay应用<1>: 像素空间高效模拟光芒、爆炸、绒毛等效果
请见demo:http://www.artvily.com/renderCase?sample=godrayPixelRadio01效果图:算法描述: 在片段作色阶段,依据当前pixel和相关参数(例如中心位置或者方向,色彩计算的权重),计算出当前pixel的实际输出结果不需要对邻近像素采样(也就是类卷积运算,也就是不需要用径向模糊等相关计算)。这个基本原理可以用在面片(平面或者b...原创 2019-01-24 08:40:54 · 624 阅读 · 0 评论 -
WebGL直接写的火爆2D射击游戏(源码)
请看demo:http://www.artvily.com/renderCase?sample=shipAttack2d加载可能有点慢,稍等一下就能看到效果资源下载(或者直接从浏览器中就可以拿到源码和资源):https://download.csdn.net/download/vily_lei/10904799游戏可以直接在任何支持webGL的设备(PC或者移动)上流畅运行(整个游戏渲...原创 2019-01-08 20:40:25 · 2364 阅读 · 1 评论 -
通过纹理数据以及其他参数在合适的纹理表现位置来"干扰"法线,来增强纹理表现的质感
demo:http://www.artvily.com/renderCase?sample=defaultLightInit以上demo使用了3个点光源(ADS光照)一般光照分为漫反射和镜面反射,这两部分可以分开计算法线的方式和混合比例来适应对应的表面材料的表现。而且干扰的算法和输入的干扰的参数可以是专门的纹理数据也可以是别的数据光照结果和源纹理混合也可以使用混合参数来调节这些...原创 2019-01-09 14:04:16 · 257 阅读 · 1 评论 -
3D引擎中高效拾取(Pick)像素级数据(可见对象, 深度,法线等)
请见Demo:http://www.artvily.com/renderCase?sample=mousePickNormal很多3D应用中需要获取像素级别的数据用于各种操作,例如需要知道光标选中了哪个显示对象这种常见的应用。其实合理的引擎渲染器渲染管理机制之下,很容易拿到几乎是任何想拿到的某个可见像素的信息,例如法线,切线,光照或阴影相关数据,三角形信息等等。上面的示例中演示了获...原创 2019-04-13 10:16:06 · 938 阅读 · 2 评论 -
Deferred Lighting Rendering Tile Base 实时渲染同屏42000盏灯(没有使用Computer Shader)
周末在家思考了第二种渲染方式性能又有所提升,在20000盏灯的时候可以达到稳定的60fps。下图是42000盏灯分布在一个长方体空间内,Fps为42左右:下图是21000盏灯分布在一个长方体空间内,Fps为60左右:原理比较简单,但是要系统性的高性能还是有点难度。Tile Base 和 Cluster Shadering相比 有他的缺点但是又有他的优势。...原创 2019-04-28 12:05:37 · 355 阅读 · 1 评论 -
Deferred Lighting: 2640 dynamic lights in single view(WebGL Demo)(没有使用Computer Shader)
Demo:http://www.artvily.com/renderCase?sample=deferredManyLights2Rendering Effect Screenshot:原创 2019-06-26 20:33:12 · 185 阅读 · 3 评论 -
Opengl(WebGL)前向渲染中的基本光照(包括多光源)
Demo:http://www.artvily.com/sample?sample=lightBaseDemo:http://www.artvily.com/sample?sample=lightGroup如果打开报错,请清理一下缓存。上面两张图分别为固定的简单光源和任意组织的多光源(lightGroup: 环境光, 平行光,点光源,聚光灯, 以及BlinnPhong光源)...原创 2018-09-18 19:53:09 · 874 阅读 · 0 评论 -
基于3D空间三角形网格的导航系统(Navigation)的演示(一)
Demo:http://www.artvily.com/sample?sample=navigation在任意三角形上点击两处,就会绘制一条基本导航路径。这个演示只是展示了: 1.获取起点和目标三角形之间的三角形序列。2.通过上述三角形序列,计算得到粗糙的路径。只演示原理,并未做任何优化。...原创 2018-09-18 19:40:16 · 695 阅读 · 0 评论 -
页游中网络通讯数据精简方案示例
网络游戏的及时网络通讯是很大的资源消耗,数据量越小这种消耗就越少,游戏在通讯上的性能就越好精简通讯中的数据是一种有效的方案。假定在通讯中一个数据本来要传输8个字节, 而你有方法使之只传输4个字节,那么传送和处理的效率就会有不错的提升。也许有人会输不久多4个字节嘛,但是如果这个信息会高频的发送,每秒没人5次,100人也需要同步到那么这个量就很大了。精简数据的方案很多,这里原创 2013-04-27 20:56:08 · 545 阅读 · 0 评论 -
使3D空间中物体朝向和其速度方向一致的旋转矩阵计算方案
图像与几何算法原创 2015-04-30 18:00:44 · 1516 阅读 · 1 评论 -
WebGL glsl fragment 着色器实现的纹理动画: 雷达扫描效果
Demo:http://www.artvily.com/palette?sample=palette&clip=texRadar截图:glsl代码:this.vshdCode = "precision highp float;" +"attribute vec3 a_vtx_pos;" +"attribute ...原创 2018-07-04 21:38:59 · 1616 阅读 · 0 评论 -
WebGL glsl fragment 着色器实现的纹理动画: 神秘海洋
效果链接:点击打开链接glsl代码:this.vshdCode = "precision mediump float;" +"attribute vec3 a_vtx_pos;" +"attribute vec2 a_vtx_uv;" +"varying highp vec2 v_texUV;" ...原创 2018-07-04 21:43:36 · 1116 阅读 · 1 评论 -
glsl 实现的热气流动及其变体的效果(源码)
上图(因为webgl的限制,无法再web跑):glsl:void main(){ vec4 color; float cosV = cos(vTime); color = texture(texSampler, 0.5 * vec2((uv.x + vTime * 0.1),(uv.y + vTime * 0.1))); float e = color.r; float seg = ...原创 2018-07-05 20:32:28 · 780 阅读 · 0 评论 -
WebGL实现的一个Depth Blur(深度模糊/或景深模糊)的动态效果
demo:http://www.artvily.com/sample?sample=depthBlur移动端Demo:http://www.artvily.com/sample?sample=depthBlur3实现原理: 在渲染到贴图(RTT)的过程记录下深度值(最好用float texture format),然后不同的深度取不同的模糊值(这里只做了距离摄像机越远,越模糊),这里...原创 2018-07-30 14:22:33 · 2751 阅读 · 2 评论 -
3D游戏中闪电/光线等类似效果的一种实现原理
demo:http://www.artvily.com/sample?sample=lightLine通过绘制连续项链的面片(始终朝向摄像机)组成的"带子",对这个带子模型使用纹理动画切换不同帧的纹理就实现了对应的效果。这个"带子"是3D空间的曲线,可以任意指定起点,中间若干点,终点。...原创 2018-07-27 20:38:09 · 1264 阅读 · 0 评论 -
GLSL中 Billboard和Point的顶点空间变换
Billboard(永远朝向摄像机的平面, 但是会有近大远小的透视效果):顶点空间变换的代码: +"attribute vec2 a_vs;" +"attribute vec2 a_uvs;" +"uniform mat4 u_viewMat;" +"uniform mat4 u_projMat;" +"un...原创 2018-09-06 12:51:05 · 632 阅读 · 0 评论 -
3D空间物体的朝向和速度方向一致的演示及源码
Demo:http://www.artvily.com/sample?sample=objectDirection实现的原理: 目标朝向和当前朝向的矢量叉乘的normalize()作为旋转轴,他们两者之间的夹角作为旋转角(弧度),使物体只做了缩放旋转变换的矩阵转向目标朝向。还有原理请见:https://blog.csdn.net/vily_lei/article/details/45397...原创 2018-09-18 19:26:38 · 613 阅读 · 1 评论 -
用于游戏中不同性格怪物移动表现AI演示
一个程序功能或算法的实现很多都可以说是一个分类方案的应用。在很多arpg游戏中都有一些不同"性格"的怪物,当玩家接触它们的时候它们会有不同的表现。有些怪物你接近它,攻击它,他都没反应,这里将这类怪物称之为蒙昧型的。有些怪物你接近它,他会逃跑,这里将这类称为但小型的。有些怪物你接近它,他可能主动进攻你,进攻一下又会逃跑,这样反反复复,这类就称之为狡猾型的。有些怪物你接近它,他原创 2013-03-11 09:10:54 · 968 阅读 · 0 评论