- 综合排序
- 最热优先
- 最新优先
- 来自专栏逍遥剑客的游戏开发
传统3D游戏引擎的Web化
最近floh大神的blog又复活了, 现在n3的主要发展发向是web化 其实也是跟PC和主机平台的衰落有关, 各种移动设备正在逐渐取代PC的地位 而做为一个3D游戏引擎, 想要适应这个潮流却不是很容易 先不考虑其它, 光技术上面临的问题就很棘手: C++目前无法直接用于web开发, 必然要面临老代码转换/移植的问题 3D硬件加速的渲染在浏览器这边, 没有一个统一的标准 多线程, web浏览器里对于线程的使用有很多限制 输入设备, 比如右键的功能很多时候会跟浏览器冲突 IO, 通过网络传输的资源在传输, 访问权限等上也有限制 性能问题, 脚本语言的速度虽说已经很快的, 但还是没有Native快 就目前来说, C++的3D Native的性能差距不大, 而且IDE与Debugger目前也有了(VS2010) 缺点: 虽然看上去很完美, 但不被其它势力所支持 代表: OGRE, Bullet, Unity3D...Google Web 游戏引擎, 不包括各种XNA/Sliverlight的3D游戏或是Flash/HTML5的2D游戏
2.2K30发布于 2018-05-23 - 来自专栏Technology Share
基于 Threejs 的 web 3D 开发入门
导语 随着软硬件的发展，在PC和移动端浏览器上进行web 3D开发的条件已经基本成熟了，出现了不少js 3D库，Threejs是js 3D库中的佼佼者。 Threejs让没有丰富3D编程经验的web前端开发人员，也可以快速上手开发web 3D应用。 Threejs应用场景举例 1、web 3D游戏 2、3D模型展示 下图的例子中，用户可以跟浏览器交互，通过鼠标操作360度查看汽车，点击车门进入到车内，查看车内立体视图，如同身临其境。 3、数据可视化 4、web vr Threejs的基本要素 3D编程跟2D编程有较大不同，因此需要掌握一些3D编程的基本概念。Threejs的基本要素包括以下几个方面：场景、相机、光、物体。 目前web 3D应用因为浏览器渲染性能、模型体积过大等原因，并没有大规模使用起来，只限于在品牌宣传等部分领域尝试使用。
16.2K43发布于 2017-10-26 - 来自专栏HT
基于HT for Web矢量实现3D叶轮旋转
在上一篇《基于HT for Web矢量实现2D叶轮旋转》中讲述了叶轮旋转在2D上的应用，今天我们就来讲讲叶轮旋转在3D上的应用。 在3D拓扑上可以创建各种各样的图元，在HT for Web系统中提供了一些常规的3D模型，但是对于那些比较复杂的模型，比如汽车、人物等模型就无能为力了，那再项目中需要用到这样的模型该肿么办呢？ 在《HT图形组件设计之道（四）》一文中有提及HT for Web引入obj文件的介绍，在这里我就不做重复介绍了，我们先来看看今天作为演示的Demo模型长什么样： ? 模型后，我们马上创建了一个3D图元，并将其添加到了dataModel容器中，这时我们需要一个3D拓扑来显示这个3D图元，具体的创建代码如下： var dataModel = new ht.DataModel 到这里，模型就算完成了，接下来要做的就是让螺旋桨动起来，和2D叶轮旋转类似，在3D模型上也可以做数据绑定，要想让螺旋桨旋转起来，我们就需要设置螺旋桨的rotation属性，和3D上的图元不同的是，设置3D
1.1K60发布于 2018-01-03 - 来自专栏hightopo
原 3D拓扑自动布局之Web Worker
2D拓扑的应用在电信网管和电力SCADA领域早已习以为常了，随着OpenGL特别是WebGL技术的普及，3D方式的数据可视化也慢慢从佛殿神堂步入了寻常百姓家，似乎和最近高档会所被整改为普通茶馆是一样的节奏 3D呈现固然比2D方式更直观，但如果摆放图元布局却比2D麻烦，毕竟增加了一个维度，手工布局不如以前2D手工操作方便，因此3D的自动布局功能比2D凸显其重要性。 Worker运行一段时间，只把最终结果push回Web层进行呈现还是有点实际意义的，毕竟不用Worker时js单线程运行，对这种计算密集型的算法只会卡死界面无法进行其他业务操作。 拓扑自动布局的效果，这个例子纯粹为了玩玩Web Workers，这样折腾性能并不会提高，甚至因为来回序列化更费性能，Web Worker可以使用的场景并不太多，比较适合纯数学运算的业务逻辑，同时还需要注意跑在 下篇《3D拓扑自动布局之Node.js篇》我们再将算法移到Node.js端玩 http://v.youku.com/v_show/id_XNjc1MjYzODg4.html
68230发布于 2018-06-05 - 来自专栏HT
基于HT for Web的3D树的实现
在HT for Web中2D和3D应用都支持树状结构数据的展示，展现效果各异，2D上的树状结构在展现层级关系明显，但是如果数据量大的话，看起来就没那么直观，找到指定的节点比较困难，而3D上的树状结构在展现上配合 HT for Web的弹力布局组件会显得比较直观，一眼望去可以把整个树状结构数据看个大概，但是在弹力布局的作用下，其层次结构看得就不是那么清晰了。 创建一个树状结构 有了解过HT for Web的朋友，对树状结构数据的创建应该都不陌生，在这里我就不做深入的探讨了。 加入z轴坐标，呈现3D下的树状结构 3D拓扑上面布局无非就是多加了一个坐标系，而且这个坐标系只是控制节点的高度而已，并不会影响到节点之间的重叠，所以接下来我们来改造下我们的程序，让其能够在3D上正常布局 到此，整个Demo的制作就结束了，今天的篇幅有些长，感谢大家的耐心阅读，在设计上或则是表达上有什么建议或意见欢迎大家提出，点击这里可以访问HT for Web官网上的手册。
1.2K50发布于 2018-01-03 - 来自专栏HT
3D拓扑自动布局之Web Workers篇
2D拓扑的应用在电信网管和电力SCADA领域早已习以为常了，随着OpenGL特别是WebGL技术的普及，3D方式的数据可视化也慢慢从佛殿神堂步入了寻常百姓家，似乎和最近高档会所被整改为普通茶馆是一样的节奏 3D呈现固然比2D方式更直观，但如果摆放图元布局却比2D麻烦，毕竟增加了一个维度，手工布局不如以前2D手工操作方便，因此3D的自动布局功能比2D凸显其重要性。 Worker运行一段时间，只把最终结果push回Web层进行呈现还是有点实际意义的，毕竟不用Worker时js单线程运行，对这种计算密集型的算法只会卡死界面无法进行其他业务操作。 拓扑自动布局的效果，这个例子纯粹为了玩玩Web Workers，这样折腾性能并不会提高，甚至因为来回序列化更费性能，Web Worker可以使用的场景并不太多，比较适合纯数学运算的业务逻辑，同时还需要注意跑在 下篇《3D拓扑自动布局之Node.js篇》我们再将算法移到Node.js端玩
1.8K100发布于 2018-01-03 - 来自专栏HT
基于HT for Web的3D呈现A* Search Algorithm
最近搞个游戏遇到最短路径的常规游戏问题，正巧看到老同事写的3D机房最短路径巡线文章，一时起兴基于HT for Web写了个A*算法的WebGL 3D呈现，算法基于开源 https://github.com www.briangrinstead.com/files/astar/ ，只不过觉得所有A*算法的可视化实现都是平面的不够酷，另外还有不少参数需要调节控制，还是值得好好搞个全面的Demo，先上张2D和3D label: 'Allow Diagonal' } } ], [0.1, 0.1]); } 只从iOS8支持WebGL后在移动终端上测试3D iOS系统下呈现和算法都挺流畅，http://v.youku.com/v_show/id_XODMzOTU1Njcy.html，当然这个小例子数据量也不大，本质其实还是2D的最短路径算法，并非真正意义的3D
88570发布于 2018-01-03 - 来自专栏hightopo
基于HT for Web的3D树的实现
在HT for Web中2D和3D应用都支持树状结构数据的展示，展现效果各异，2D上的树状结构在展现层级关系明显，但是如果数据量大的话，看起来就没那么直观，找到指定的节点比较困难，而3D上的树状结构在展现上配合 HT for Web的弹力布局组件会显得比较直观，一眼望去可以把整个树状结构数据看个大概，但是在弹力布局的作用下，其层次结构看得就不是那么清晰了。 创建一个树状结构 有了解过HT for Web的朋友，对树状结构数据的创建应该都不陌生，在这里我就不做深入的探讨了。 加入z轴坐标，呈现3D下的树状结构 3D拓扑上面布局无非就是多加了一个坐标系，而且这个坐标系只是控制节点的高度而已，并不会影响到节点之间的重叠，所以接下来我们来改造下我们的程序，让其能够在3D上正常布局 到此，整个Demo的制作就结束了，今天的篇幅有些长，感谢大家的耐心阅读，在设计上或则是表达上有什么建议或意见欢迎大家提出，点击这里可以访问HT for Web官网上的手册。
80320发布于 2018-07-09 - 来自专栏hightopo
基于HT for Web矢量实现3D叶轮旋转
在上一篇《基于HT for Web矢量实现2D叶轮旋转》中讲述了叶轮旋转在2D上的应用，今天我们就来讲讲叶轮旋转在3D上的应用。 在3D拓扑上可以创建各种各样的图元，在HT for Web系统中提供了一些常规的3D模型，但是对于那些比较复杂的模型，比如汽车、人物等模型就无能为力了，那再项目中需要用到这样的模型该肿么办呢？ 模型后，我们马上创建了一个3D图元，并将其添加到了dataModel容器中，这时我们需要一个3D拓扑来显示这个3D图元，具体的创建代码如下： var dataModel = new ht.DataModel 到这里，模型就算完成了，接下来要做的就是让螺旋桨动起来，和2D叶轮旋转类似，在3D模型上也可以做数据绑定，要想让螺旋桨旋转起来，我们就需要设置螺旋桨的rotation属性，和3D上的图元不同的是，设置3D 图元的rotation属性需要设置一个数组，定义3D上三个方向的旋转值。
92840发布于 2018-07-09 - 来自专栏HT
基于HT for Web的3D拓扑树的实现
在HT for Web中2D和3D应用都支持树状结构数据的展示，展现效果各异，2D上的树状结构在展现层级关系明显，但是如果数据量大的话，看起来就没那么直观，找到指定的节点比较困难，而3D上的树状结构在展现上配合 HT for Web的弹力布局组件会显得比较直观，一眼望去可以把整个树状结构数据看个大概，但是在弹力布局的作用下，其层次结构看得就不是那么清晰了。 创建一个树状结构 有了解过HT for Web的朋友，对树状结构数据的创建应该都不陌生，在这里我就不做深入的探讨了。 加入z轴坐标，呈现3D下的树状结构 3D拓扑上面布局无非就是多加了一个坐标系，而且这个坐标系只是控制节点的高度而已，并不会影响到节点之间的重叠，所以接下来我们来改造下我们的程序，让其能够在3D上正常布局 到此，整个Demo的制作就结束了，今天的篇幅有些长，感谢大家的耐心阅读，在设计上或则是表达上有什么建议或意见欢迎大家提出，点击这里可以访问HT for Web官网上的手册。
1.2K50发布于 2018-01-03 - 来自专栏前端时空
五福背后的 Web 3D 引擎开源
Oasis Engine 是蚂蚁集团 Web 3D 互动图形引擎，同时也是阿里经济体互动技术方向的首选 Web 3D 引擎，已于 2 月 1 日正式开源。 再来说说我们目前的性能现状，基于上图中的性能测试案例，和国外知名 Web3D 引擎也进行了性能对比，同样的测试规模和环境，Oasis 的性能大约是国外知名 Web3D 引擎的 2 倍。 2016年，阿里巴巴和蚂蚁的移动端业务蓬勃发展，但是面向互动需求的图形技术还比较落后，以 Web 3D 引擎为例，长时间内都依赖并不是为移动端而生的 Three.js 引擎。 3D 引擎。 希望 Oasis 引擎可以用自己的方式为国产 3D 引擎事业尽一份力，也希望 Oasis 团队可以不忘初心，我们将用 3D 化的交互和表达让世界变得更美好，实现我们心中的绿洲。
2.4K31编辑于 2022-09-22 - 来自专栏hightopo
原 HT for Web中3D流动效果的实
Hightopo的HT for Web作为3D客户端呈现解决方案，今天介绍的重点不在于采集这些指标，而在于如何应用HT的预定于3D元素来实现流动的效果。 在《透过WebGL 3D看动画Easing函数本质》这篇介绍的基于HT for Web的动画，是通过改变模型的位置方向来实现动画，而本文要介绍的方案则是保持模型位置方向不动，而是通过控制模型的贴图参数uvScale 和uvOffset实现流动的控制，这样实现的好处是没有增加过多的3D图元模型，同时可借助2D的图片融合到3D进行呈现，毕竟美工改变2D图片，或程序员内存中动态改变2D图片，都会比动态改变3D模型来的容易且轻量 ht.Shape类型对象，该对象在ht.graph.GraphView中呈现了多边形的效果，而该模型在ht.graph3d.Graph3dView中则常用于绘制墙面、管道等三维模型对象，在《HT for Web ，这也是HT所有组件可绑定同一数据模型的OVM(Object-View mapping)设计模式带来的好处： 以下是段操作HT for Web中3D流动例子的视频供参考，基于HT预定义的模型还有很多自定义效果
1K30发布于 2018-06-05 - 来自专栏hightopo
基于HT for Web 3D技术快速搭建设备面板
今天我们就在HT for Web的3D技术上完成设备面板的搭建。 我们今天模拟的设备是机房设备，先来目睹下最终效果： ? 在代码中还调用了createNode()的方法，该方法并没有做什么特殊的操作，只是将创建3D拓扑节点的代码封装起来，精简代码，避免相同的代码重复书写，具体的封装如下： /** * 创建3D拓扑节点，并添加到 node.p3(p3); node.s3(s3); dataModel.add(node); return node; } 该方法通过传入位置信息和大小信息创建出一个3D 我们可以换个角度思考，所有的节点都是添加到3D拓扑组件上的，那么我们是否可以通过监听3D拓扑组件的双击事件，然后通过事件对象获取到对应的节点，然后通过判断节点上设置的自定义标识属性来做相应的处理，具体的代码如下 到这里，今天的Demo的所有表现和功能就完成了，今天的内容中有设计到节点的style应用，我没有做深入的讲解，后续会给大家一一介绍，感兴趣的朋友可以通过HT for Web的样式手册来了解更多的内容。
50920发布于 2018-07-09 - 来自专栏HT
HT for Web自定义3D模型的WebGL应用
有不少朋友询问《HTML5 Web 客户端五种离线存储方式汇总》文章例子的3D表计模型是如何生成的，这个例子是通过导入3dmax设计好的表计模型，然后通过obj格式导入到HT for Web系统中进行控制 ，这种方式特别适合复杂模型的应用场景，但对于监控系统的很多应用其实并不需要专业的美工使用专业的3D编辑工具，完全通过HT for Web预定义的和内置自定义3D模型API就能满足很多应用，这里介绍几种场景的自定义 3D模型应用。 上图是采用HT提供的createRingModel函数，通过编辑2D的多边形生成对应的环状的3D模型，对于花瓶碗杯等环形对称的物体很适合采用该函数构建。 模型和Tree组件通过HT强大灵活的模型与图形的数据绑定功能，从而实现树上自定义图标和3D自定义模型的数据共享，实时一致刷新效果，以下为该EMS例子的全部JavaScript代码： function init
86170发布于 2018-01-03 - 来自专栏HT
HT for Web中3D流动效果的实现与应用
Hightopo的HT for Web作为3D客户端呈现解决方案，今天介绍的重点不在于采集这些指标，而在于如何应用HT的预定于3D元素来实现流动的效果。 在《透过WebGL 3D看动画Easing函数本质》这篇介绍的基于HT for Web的动画，是通过改变模型的位置方向来实现动画，而本文要介绍的方案则是保持模型位置方向不动，而是通过控制模型的贴图参数uvScale 和uvOffset实现流动的控制，这样实现的好处是没有增加过多的3D图元模型，同时可借助2D的图片融合到3D进行呈现，毕竟美工改变2D图片，或程序员内存中动态改变2D图片，都会比动态改变3D模型来的容易且轻量 ht.Shape类型对象，该对象在ht.graph.GraphView中呈现了多边形的效果，而该模型在ht.graph3d.Graph3dView中则常用于绘制墙面、管道等三维模型对象，在《HT for Web ，这也是HT所有组件可绑定同一数据模型的OVM(Object-View mapping)设计模式带来的好处： 以下是段操作HT for Web中3D流动例子的视频供参考，基于HT预定义的模型还有很多自定义效果
1.8K100发布于 2018-01-03 - 来自专栏HT
基于HT for Web 3D技术快速搭建设备面板
今天我们就在HT for Web的3D技术上完成设备面板的搭建。 我们今天模拟的设备是机房设备，先来目睹下最终效果： ? 在代码中还调用了createNode()的方法，该方法并没有做什么特殊的操作，只是将创建3D拓扑节点的代码封装起来，精简代码，避免相同的代码重复书写，具体的封装如下： /** * 创建3D拓扑节点，并添加到 node.p3(p3); node.s3(s3); dataModel.add(node); return node; } 该方法通过传入位置信息和大小信息创建出一个3D 我们可以换个角度思考，所有的节点都是添加到3D拓扑组件上的，那么我们是否可以通过监听3D拓扑组件的双击事件，然后通过事件对象获取到对应的节点，然后通过判断节点上设置的自定义标识属性来做相应的处理，具体的代码如下 到这里，今天的Demo的所有表现和功能就完成了，今天的内容中有设计到节点的style应用，我没有做深入的讲解，后续会给大家一一介绍，感兴趣的朋友可以通过HT for Web的样式手册来了解更多的内容。
87370发布于 2018-01-03 - 来自专栏HT
透过HT for Web 3D看动画Easing函数本质
基于HT for Web的自动布局动画例子视频 ? 基于HT for Web的3D机房动画例子视频:http://v.youku.com/v_show/id_XNzE4NzkwMzY4.html 动画的原理比较容易理解：在一定的时间间隔内，不断改变颜色、 甚至先超出起始值和结束值再慢慢恢复的各种动画特效，如今有很多工具提供了可视化编辑Easing曲线函数的功能，待会介绍的例子将会枚举一堆常用的Easing函数供大家参考应用，先上张图和视频开门见山让大家体验下基于WebGL的3D 示例还借助了3D的空间新轴线，在垂直轴方向动态用曲线表示Easing函数在当前时间点的函数值，因此大家可以直观的体验到Easing函数曲线的动态变化过程，同时曲线段的颜色也根据该时间段箭头的前进距离由白变红 以下HT for Web的3D例子为在Android平板上运行的效果，可勾选部分类型更容易直观观察具体的Easing函数运行效果： ?
1K60发布于 2018-01-03 - 来自专栏Tensorbytes
一个golang封装的3D web基础库
最近想用 golang 来实现一个演示3D模型库的应用，于是基于 playcanvas 封装了一套go语言的 API，提供了gltf、obj、fbx等多种模型格式加载，支持天空盒、灯光和脚本动画编辑等功能 相比于g3n这种等3D框架，GoCavans 更轻量并且简单易用。
1.1K10编辑于 2022-06-28 - 来自专栏hightopo
HT for Web列表和3D拓扑组件的拖拽应用
接下来就是今天的重头戏了，该如何实现拖拽List上的节点到3D拓扑上，并实现节点的图标吸附到3D拓扑的图元上呢，我给大家细细道来。 ? OK，接下来该解决图元吸附功能，当鼠标拖拽ListView节点到3D拓扑上的图元是，将该节点的图标设置为图元当前面的贴图。 思路是这样子的： 1. 在between状态时，通过ht.Default.containedInView()方法判断殿前鼠标是否在3D拓扑组件上； 2. 若鼠标在3D拓扑上，则通过g3d.getHitFaceInfo()方法，根据鼠标当前信息获取当前鼠标下的图元表面信息； 3. 今天就到这吧，将的内容有点多，涉及到HT for Web的知识点也比较多，下面附上本次Demo的源代码，感兴趣的朋友可以载下来看看，同时也欢迎大家留言质询。 下载源码
95720发布于 2018-07-09 - 来自专栏hightopo
透过HT for Web 3D看动画Easing函数本质
基于HT for Web的自动布局动画例子视频 基于HT for Web的3D机房动画例子视频 动画的原理比较容易理解：在一定的时间间隔内，不断改变颜色、大小或角度等图形界面参数，直到最终的目标参数结果 甚至先超出起始值和结束值再慢慢恢复的各种动画特效，如今有很多工具提供了可视化编辑Easing曲线函数的功能，待会介绍的例子将会枚举一堆常用的Easing函数供大家参考应用，先上张图和视频开门见山让大家体验下基于WebGL的3D 示例还借助了3D的空间新轴线，在垂直轴方向动态用曲线表示Easing函数在当前时间点的函数值，因此大家可以直观的体验到Easing函数曲线的动态变化过程，同时曲线段的颜色也根据该时间段箭头的前进距离由白变红 以下HT for Web的3D例子为在Android平板上运行的效果，可勾选部分类型更容易直观观察具体的Easing函数运行效果： 整个例子的运行效果给我感觉就像这个社会各式各样的人生路，大家都逃不过出生和死亡
48530发布于 2018-07-09
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号