最近业务比较忙,但是我们追求3D世界的脚步不能停下来~某天在路上看到一辆辆飞驰而过的汽车,想到要不要弄一个赛车类的游戏
没有再用原生,而是使用了threejs,毕竟大点的3D项目,再用原生就是自己给自己找麻烦了……
本文从0到1讲解了这个游戏的开发过程,其中没有专门的介绍webgl和threejs,没有基础的同学可以结合threejs文档一起看,或者先学习一下webgl的基础知识~
游戏地址如下:

TAT.vorshen QQ日迹Omi实战开发,从0到1
In Web开发 on 2017年07月14日 by view: 1,436
0

相信大家对Omi应该都不陌生了,如果还有不了解的同学先看看这里。了解并使用Omi之后你会发现真的回不去了~~~

精通Omi框架

先简单说一下吧,Omi就是一个可以快速开发项目的组件化框架,和vue/react一样为了节省生产力的。想了解Omi和vue还有react区别的,上面文档有讲解,或者加入群256426170,可以面对面咨询Omi作者dnt。我这篇文章将使用Omi从0到1来完成一个移动端的项目,让大家了解Omi开发的方便快捷。

TAT.vorshen webgl性能优化初尝
In Web开发 on 2017年05月13日 by view: 1,875
1

上次文章介绍了如何用webgl快速创建一个自己的小世界,在我们入门webgl之后,并且可以用原生webgl写demo越来越复杂之后,大家可能会纠结一点:就是我使用webgl的姿势对不对。因为webgl可以操控shader加上超底层API,带来了一个现象就是同样一个东西,可以有多种的实现方式,而此时我们该如何选择呢?这篇文章将稍微深入一点webgl,给大家介绍一点webgl的优化知识。

讲webgl优化之前我们先简单回忆一下canvas2D的优化,常用的display list、动态区域重绘等等。用canvas2D多的同学应该对以上的优化或多或少都有了解,但是你对webgl的优化了解么,如果不了解的话往下看就对了~这里会先从底层图像是如何渲染到屏幕上开始,逐步开始我们的webgl优化。

TAT.vorshen 教你用webgl快速创建一个小世界
In Web开发 on 2017年03月15日 by view: 2,228
3

Webgl的魅力在于可以创造一个自己的3D世界,但相比较canvas2D来说,除了物体的移动旋转变换完全依赖矩阵增加了复杂度,就连生成一个物体都变得很复杂。

什么?!为什么不用Threejs?Threejs等库确实可以很大程度的提高开发效率,而且各方面封装的非常棒,但是不推荐初学者直接依赖Threejs,最好是把webgl各方面都学会,再去拥抱Three等相关库。

上篇矩阵入门中介绍了矩阵的基本知识,让大家了解到了基本的仿射变换矩阵,可以对物体进行移动旋转等变化,而这篇文章将教大家快速生成一个物体,并且结合变换矩阵在物体在你的世界里动起来。

TAT.vorshen webgl世界 matrix入门
In Web开发 on 2017年01月16日 by view: 3,054
3

这次没有带来游戏啦,本来还是打算用一个小游戏来介绍阴影,但是发现阴影这块想完完整整介绍一次太大了,涉及到很多,再加上业务时间的紧张,所以就暂时放弃了游戏,先好好介绍一遍webgl中的Matrix。
这篇文章算是webgl的基础知识,因为如果想不走马观花的说阴影的话,需要打牢一定的基础,文章中我尽力把知识点讲的更易懂。内容偏向刚上手webgl的同学,至少知道着色器是什么,webgl中drawElements这样的API会使用~

背景:不知道大家还记不记得上次那个3D迷宫游戏,有同事吐槽说游戏中间有一个十字瞄准器,就感觉少了一把枪。好吧,那这次就带来一款第一人称射击游戏。写demo锻炼,所以依旧用的原生webgl,这次重点会说一下webgl中关于摄像头相关的知识,点开全文在线试玩~~

背景:前段时间自己居然迷路了,有感而发就想到写一个可以让人迷路的小游戏,可以消(bao)遣(fu)时(she)间(hui)

没有使用threejs,就连glMatrix也没有用,纯原生webgl干,写起来还是挺累的,不过代码结构还是挺清晰的,注释也挺全的,点开全文开始迷宫之旅~

TAT.vorshen 与A-Star不同的像素级寻路算法下
In Web开发 on 2016年03月04日 by view: 784
0

先贴上文地址:http://www.alloyteam.com/2016/03/and-a-star-on-different-pixel-pathfinding-algorithm/

之前说到了起点和终点连线平移方式的不足,那这篇文章就介绍另一个给力的方法

演示地址:

http://westanhui.github.io/navigate/index2.html

注意:点击画障碍物,通过左键单击画多边形最后右键自动闭合图像

 

TAT.vorshen 与A-Star不同的像素级寻路算法上
In Web开发 on 2016年03月04日 by view: 1,121
0

前言:

寻路是游戏中非常重要的一项功能,这项功能将直接体现出AI的智商如何。那说起寻路的算法,就不得不提标题上面的A star算法了。A Star(又称A*),是结合了Dijkstra算法和贪心算法优点的算法,对此不了解的同学可以去搜索一下,这里不具体介绍实现,而是简单的说一下原理,为后面我们的主角铺垫。

A Star的核心在于将游戏背景分为一个又一个格子,每个格子有自己的靠谱值,然后通过遍历起点的格子去找到周围靠谱的格子,接着继续遍历周围……最终找到终点。好了,A Star的介绍就到这里了,因为它不是文章的主角。

文章篇幅较长所以分为上下文,下文地址:

上下文各有一种实现方式,区别看了就知道,此外上文包含了一些研究寻路的思考。

 

说到websocket想比大家不会陌生,如果陌生的话也没关系,一句话概括

“WebSocket protocol 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信”

WebSocket相比较传统那些服务器推技术简直好了太多,我们可以挥手向comet和长轮询这些技术说拜拜啦,庆幸我们生活在拥有HTML5的时代~

这篇文章我们将分三部分探索websocket

首先是websocket的常见使用,其次是完全自己打造服务器端websocket,最终是重点介绍利用websocket制作的两个demo,传输图片和在线语音聊天室,let's go