在网页上面实现,采用的是球面映射和材质线性映射,这里注意的是用线性映射保留了球面的感觉,而不是采用sin映射,sin映射在边缘会产生很难看的效果. 最后效果如下:…

lon = 0,//y旋转角度 lat = 0, onMouseDownLat = 0, phi = 0, theta = 0; if ( isUserInteracting === false ) { lon += 0.1; } lat = Math.max( - 85, Math.min( 85, lat ) ); phi = THREE.Math.degToRad( 90 - lat ); theta = THREE.Math.degToRad( lon ); camera.target.…

http://www.hightopo.com/demo/astar/astar.html 最近搞个游戏遇到最短路径的常规游戏问题,一时起兴基于HT for Web写了个A*算法的WebGL 3D呈现,算法基于开源 https://github.com/bgrins/javascript-astar 的javascript实现,其实作者也有个不错的2D例子实现 http://www.briangrinstead.com/files/astar/ ,只不过觉得所有A*算法的可视化实现都是平面的不够…

http://www.hightopo.com/demo/astar/astar.html 最近搞个游戏遇到最短路径的常规游戏问题,一时起兴基于HT for Web写了个A*算法的WebGL 3D呈现,算法基于开源 https://github.com/bgrins/javascript-astar 的javascript实现,其实作者也有个不错的2D例子实现 http://www.briangrinstead.com/files/astar/ ,只不过觉得所有A*算法的可视化实现都是平面的不够…

webgl智慧楼宇发光效果算法系列之高斯模糊 如果使用过PS之类的图像处理软件,相信对于模糊滤镜不会陌生,图像处理软件提供了众多的模糊算法.高斯模糊是其中的一种. 在我们的智慧楼宇的项目中,要求对楼宇实现楼宇发光的效果. 比如如下图所示的简单楼宇效果: 楼宇发光效果需要用的算法之一就是高斯模糊. 高斯模糊简介 高斯模糊算法是计算机图形学领域中一种使用广泛的技术, 是一种图像空间效果,用于对图像进行模糊处理,创建原始图像的柔和模糊版本. 使用高斯模糊的效果,结合一些其他的算法,还可以产生发光,光晕…

简单实现 鱼眼模式(Fisheye)和普通的透视投影(Perspective projection),一个很大的区别就是鱼眼的投影算法是非线性的(non-linear),实际照相机的情况是在镜头外面包围一个半球体,将场景通过半球体投影到画布上.大致如下: M x \ \ ______ M'_x' `-. ,' |\ `. / | \ \ / | \ \ | | \ | __________|_____|____\_________|_________ M" O 1 M: world positi…

<数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇>一文让读者了解了 HT的 2D 拓扑图组件使用,本文将对 HT 的 3D 功能做个综合性的介绍,以便初学者可快速上手使用 HT 构建例如电信网管 3D 机房应用.水务燃气 SCADA 监控应用及智能楼宇等应用场景. HT for Web 的 3D 是完全基于 WebGL 技术实现的渲染引擎,但开发者几乎不需要了解 3D 图形数学或 Shader 渲染的底层技术,只需要掌握基本的 3D 坐标系和相机  Camera 的概念,剩下需要掌…

http://www.hightopo.com/demo/astar/astar.html 最近搞个游戏遇到最短路径的常规游戏问题,一时起兴基于HT for Web写了个A*算法的WebGL 3D呈现,算法基于开源 https://github.com/bgrins/javascript-astar 的javascript实现,其实作者也有个不错的2D例子实现 http://www.briangrinstead.com/files/astar/ ,只不过觉得所有A*算法的可视化实现都是平面的不够…

在这里我们将构造一个基于HT for Web的HTML5+JavaScript来实现汉诺塔游戏. http://hightopo.com/demo/hanoi_20151106/index.html 汉诺塔的游戏规则及递归算法分析请参考http://en.wikipedia.org/wiki/Tower_of_Hanoi. 知道了汉诺塔的规则和算法,现在就开始创建元素.用HT for Web(http://www.hightopo.com)现有的3D模板创建底盘和3根柱子不是问题,问题是要创建若…

本文分享我这一年以来收集的我认为比较经典的电子资料,希望能对大家有所帮助! 本文会不断更新! 目录 WebGL Insights OpenGL Insights Game Programming Patterns Design by Contract 原则与实践 游戏引擎架构 编程珠玑 <WebGL Insights> http://pan.baidu.com/s/1dF7ERG9 推荐度 5星 内容概要说明 相当于webgl的gems书,包括了介绍浏览器是怎么实现webgl的.一些图形渲染基…

什么是WebGL? WebGL是一项使用JavaScript实现3D绘图的技术,浏览器无需插件支持,Web开发者就能借助系统显卡(GPU)进行编写代码从而呈现3D场景和对象. WebGL基于OpenGL ES 2.0,OpenGL ES 是 OpenGL 三维图形 API 的子集,针对手机.平板电脑和游戏主机等嵌入式设备而设计.浏览器内核通过对OpenGL API的封装,实现了通过JavaScript调用3D的能力.WebGL 内容作为 HTML5 中的Canvas标签的特殊上下文实现在浏览器中…

WEBGL 2D游戏引擎研发系列 第一章 <新的开始> ~\(≥▽≤)/~HTML5游戏开发者社区(群号:326492427) 转载请注明出处:http://html5gamedev.org/ 目录 HTML5 2D游戏引擎研发系列  第一章 <一切的开始> HTML5 2D游戏引擎研发系列 第二章 <磨剑> HTML5 2D游戏引擎研发系列 第三章 <Canvas技术篇-画布技术-显示图片> HTML5 2D游戏引擎研发系列 第四章 <Canvas技…

一.齐次坐标 在3D世界中表示一个点的方式是:(x, y, z);然而在3D世界中表示一个向量的方式也是:(x, y, z);如果我们只给一个三元组(x, y, z)鬼知道这是向量还是点,毕竟点与向量还是有很大区别的,点只表示位置,向量没有位置只有大小和方向.为了区分点和向量我们给它加上一维,用(x, y, z, w)这种四元组的方式来表达坐标,我们规定(x, y, z, 0)表示一个向量,(x, y, z, 1)或(x', y', z', 2)等w不为0时来表示点.这种用n+1维坐标表示n维坐…

  这篇文章将讨论如何在一个自定义的地面网格上进行简单的2D寻路,以及确定路径后如何使用基于物理引擎的运动方式使物体沿路径到达目标地点.读者需要预先对WebGL和Babylonjs知识有一些了解,可以参考我录制的WebGL入门视频教程和翻译的官方入门文档,当然也可以用自己喜欢的其他方式来学习. 文章主要分成如下几部分: 1.自定义地面网格与寻路矩阵 2.生成Babylon格式3D模型 3.使用pathfinding库进行2D寻路 4.基于cannon.js物理引擎使物体沿路径移动 场景可以通过h…

用webgl打造自己的3D迷宫游戏 2016/09/19 · JavaScript · WebGL 原文出处: AlloyTeam    背景:前段时间自己居然迷路了,有感而发就想到写一个可以让人迷路的小游戏,可以消(bao)遣(fu)时(she)间(hui) 没有使用threejs,就连glMatrix也没有用,纯原生webgl干,写起来还是挺累的,不过代码结构还是挺清晰的,注释也挺全的,点开全文开始迷宫之旅~ 毕竟要赚一点PV,所以开头没有贴地址,现在贴地址: github:https://…

今天我们来讨论一下如何使用当前流行的WebGL技术搭建一个库房并且实现实时有效交互 第一步.搭建一个3D库房首先你得知道库房长啥样,我们先来瞅瞅库房长啥样(这是我在网上找的一个库房图片,百度了“库房”一下,找不到合适的全景,我们也只能窥一斑思全豹了,就它了,特此声明:此图片归原作者所有 非被人所拍,拿来只是给读者做个案例) 下面是我用webgl做出来的3D效果图(当前展示没有货物时的整体模拟): 第二部.开干 1. 首先我们创建一个页面,引入各种需要的库文件 <script src="/j…

  原文地址:WebGL光照阴影映射   经过前面的学习,webgl的基本功能都已经掌握了,我们不仅掌握了着色器的编写,图形的绘制,矩阵的变换,添加光照,还通过对webgl的基础api封装,编写出了便利的工具库. 是时候进一步深入学习webgl的高级功能了,我认为要做逼真的3D特效,阴影绝对是一个必不可少的环节.现在我们就在之前光照的基础上添加阴影效果吧.   首先看一下阴影效果的实例: 阴影综合(多物体高精度) 点光源聚光灯阴影 内容大纲    我们以阴影综合(多物体高精度PCF)为例, 开始…

一般的Web应用基本上不会导致浏览器崩溃,写Javascript代码也不需要管理内存资源,基本也不需要考虑内存"泄露"的问题.随着H5的崛起,越来越多的原本在桌面端的软件也改头换面迁移到Web上来,比如三维图形类的应用.在Web端显示大规模三维模型不仅仅是三维显示引擎的问题,也涉及到数据组织.任务调度.资源管理.浏览器兼容等方方面面.这里针对在项目中遇到到几种把浏览器高挂的情况简要列举了一下. 异步请求过多 浏览器对并发异步请求是有限制的.如果程序不做处理,"同时"…

大家好,我在本文中分享了我收集的WebGL 3D相关的博客.书籍.教程.demo等内容,希望对大家学习WebGL和3D有所帮助,谢谢- 相关博客 Wonder技术 Wonder是我们的产品,包含WebGL 3D引擎和编辑器.Wonder技术是Wonder在知乎上的专栏,分享Wonder的技术和资讯,欢迎大家关注- 浅墨的游戏编程 作者写得非常详细,推荐- ZwqXin 比较老的博客,作者写得不错. our machinery 原bitsquid引擎的开发者的新博客,分享了很多引擎设计.Data…

伴随着互联网的发展,从桌面端走向Web端.移动端必然的趋势.互联网技术的兴起极大地改变了我们的娱乐.生活和生产方式.尤其是HTML5/WebGL技术的发展更是在各个行业内引起颠覆性的变化.随着WebGL标准被广泛接受,出现了许多基于HTML5的开源三维引擎,如threejs.scenejs等.尤其threejs使用非常广泛,一方面由于其使用门槛较低,另一方面是其支持若干种三维文件格式,如stl.obj.3ds.obj.dae.fbx等.对于中小规模的三维模型,使用threejs可以快速搭建一个基…

http://gamealgorithms.net 第1章 游戏编程概述 (已看) 第2章 2D图形 (已看) 第3章 游戏中的线性代数 (已看) 第4章 3D图形 (已看) 第5章 游戏输入 (已看) 第6章 声音 (已看) 第7章 物理 (已看) 第8章 摄像机 (已看) 第9章 人工智能 (已看) 第10章 用户界面 (已看) 第11章 脚本语言和数据格式 (已看) 第12章 网络游戏 (已看) 第13章 游戏示例:横向滚屏者(iOS) 第14章 游戏示例:塔防(PC/Mac) 第1章 游…

简单实现 鱼眼模式(Fisheye)和普通的透视投影(Perspective projection),一个很大的区别就是鱼眼的投影算法是非线性的(non-linear),实际照相机的情况是在镜头外面包围一个半球体,将场景通过半球体投影到画布上.大致如下: M x \ \ ______ M'_x' `-. ,' |\ `. / | \ \ / | \ \ | | \ | __________|_____|____\_________|_________ M" O 1 M: world positi…

今天要把WebGL中一个非常重要的算法记录下来——raycaster射线法拾取模型.首先我们来了解一下为什么要做模型拾取,我们在做webgl场景交互的时候经常要选中场景中的某个模型,比如鼠标拖拽旋转,平移.为了能做到鼠标交互,就首先要能选中场景中的模型对象,这就要用到模型拾取算法,本文仅讨论射线法模型拾取raycaster. 所谓射线法就是利用一根射线去和场景中的模型进行碰撞,撞到的模型对象就是被拾取到的模型.请看下图 我逐个来解释一下上图中的元素.首先解释相机(camera),这就是人眼的抽象…

在前三篇文章的基础上,为基于Babylon.js的WebGL场景添加了类似战棋游戏的基本操作流程,包括从手中选择单位放入棋盘.显示单位具有的技能.选择技能.不同单位通过技能进行交互.处理交互结果以及进入下一回合恢复棋子的移动力.因为时间有限,这一阶段的目的只是实现基本规则的贯通,没有关注场景的美观性和操作的便捷性,也没有进行充分的测试. 一.显示效果: 1.访问https://ljzc002.github.io/CardSimulate2/HTML/TEST4rule.html查看“规则测试页面…

这篇主要记录WebGL的一些基本要点,顺便也学习下如何使用FBO与环境贴图.先看下效果图(需要支持WebGL,Chrome,火狐,IE11). 主要实现过程如下,先用FBO输出当前环境在立方体纹理中,再画出当前立方体,最后画球,并且把FBO关联的纹理贴在这个球面上. 开始WebGL时,最好有些OpenGL基础,在前面讲Obj完善与MD2时,大家可能已经发现了,因为着色器的添加使用,原来一些Opengl大部分API已经没有使用.WebGL就和这差不多,大部分功能是着色器完成主要功能,记录下主要过程…

这篇文章讨论如何在基于Babylon.js的WebGL场景中,建立棋盘状的地块和多个可选择的棋子对象,在点选棋子时显示棋子的移动范围,并且在点击移动范围内的空白地块时向目标地块移动棋子.在这一过程中要考虑不同棋子的移动力和影响范围不同,以及不同地块的移动力消耗不同. 一.显示效果: 1.访问https://ljzc002.github.io/CardSimulate/HTML/TEST3tiled.html查看“棋盘测试页面”: 场景中是一个20*20的棋盘,地块随机为草地.土地.雪地,棋盘中央…

这篇文章讨论如何在基于Babylon.js的WebGL场景中,实现多个简单卡牌类对象的显示.选择.分组.排序,同时建立一套实用的3D场景代码框架.由于作者美工能力有限,所以示例场景视觉效果可能欠佳,本文的重点在于对相关技术的探讨. 因为文章比较长,读者可以考虑将网页导出为mhtml格式,使用Word浏览.Chrome浏览器导出mhtml文件的方法见末尾. 一.显示效果: 1.访问https://ljzc002.github.io/CardSimulate/HTML/TEST2.html查看“卡牌…

经过前面2篇WebGL射线拾取模型的文章,相信大家对射线和模型面片相交的原理已经有所了解,那么今天我们再深入探究关于射线拾取的一个问题,那就是遍历场景中的所有与射线相交的模型的优化问题.首先我们来复习一下射线拾取模型的原理,请看下图. 我们从上图中可以看到,在frustum视棱台区域中只有一个模型就是triangle2三角形2,那么遍历整个scene场景我们也只能取到一个geometry,取出该geometry后我们通过空间变换矩阵得到该三角形2在场景中的位置坐标以及姿态信息,再将空间中的这个已…

序:这段时间忙于奔波,好久没有更新了,今天更新一下,继续上节课的完善讲解,算是对前段时间的一个总结吧.披星戴月的时光也算有点应用效果了. 对于webgl(three.js)性能这一块我在上节课<使用webgl(three.js)搭建一个3D建筑,3D消防模拟——第三课>已经给了详细的说明比较与解决方案 技术交流邮箱1203193731@qq.com 本节概要: 继上节课我们说的消防相关的操控模拟,本节课我们继续讲解用three.js创建大场景模拟与实现 本节课我们主要实现一个园区的消防三维模拟…

此篇随笔主要参考OpenCV 3.0.0的官方文档翻译而来,主要用作理解OpenCV对鱼眼相机的标定.图像校正.3D重建功能的理解. 版权所有,转载请注明出处~ xzrch@2018.09.29 参考链接:https://docs.opencv.org/3.0.0/db/d58/group__calib3d__fisheye.html#gad626a78de2b1dae7489e152a5a5a89e1 ----------------------------------------------…