webgl专题
解决TMP_InputField 在WebGL(抖音)上不能唤起虚拟键盘，不能使用手机内置输入法的问题
整整花费了一天时间测试和解决。试验了多个方法，花了不少美刀，最终才发现抖音这个官方文档，哭了： https://partner.open-douyin.com/docs/resource/zh-CN/mini-game/develop/guide/game-engine/rd-to-SCgame/open-capacity/capability-adaptation/sc_webgl_keyboa
WebGL:二、ThreeJs 简介
在初步学习OpenGL 和 WebGL（基于 OpenGL ES） 之后，发现这两者都对初学者不够友好，繁多复杂的API，以及高深的建模原理矩阵运算，线代等大大提高了学习的门槛。 ThreeJs是对webGL提供的接口进行了良好的封装，简化了很多专业知识，学习成本明显降低。 以下，是用webGL绘制一个矩形的样例片段： （ps：我就画一个矩形，一下子就整这么多方法，这还算是
WebGL on iOS8 终于等到了这一天
WWDC2014刚结束，这次的大会是名符其实的开发者大会，更贴切的应该说的确是一次软件开发者的大会，对于OSX和iOS的更多功能特性让人兴奋，Swift新语言促成了如上图片 但我更感兴趣的是WebGL终于官方的在OSX和iOS上得到了支持，这篇《A first look at what iOS8 means for Phaser and Pixi.js》分享了在iOS下运行We
HTML5的WebGL实现的3D和2D拓扑树
在HT for Web中2D和3D应用都支持树状结构数据的展示，展现效果各异，2D上的树状结构在展现层级关系明显，但是如果数据量大的话，看起来就没那么直观，找到指定的节点比较困难，而3D上的树状结构在展现上配合HT for Web的弹力布局组件会显得比较直观，一眼望去可以把整个树状结构数据看个大概，但是在弹力布局的作用下，其层次结构看得就不是那么清晰了。所以这时候结构清晰的3D树的需求就来了，那
基于HTML5的WebGL结合Box2DJS物理引擎应用
上篇我们基于HT for Web呈现了A* Search Algorithm的3D寻路效果，这篇我们将采用HT for Web 3D来呈现Box2DJS物理引擎的碰撞效果，同上篇其实Box2DJS只是二维的平面碰撞物理引擎，但同样通过3D的呈现能让人更直观的体验到碰撞效果，最终例子效果： http://hightopo.com/demo/box2djs/ht-box2d-demo.html
WebGL实现HTML5的贪吃蛇3D游戏
js1k.com收集了小于1k的javascript小例子，里面有很多很炫很酷的游戏和特效，今年规则又增加了新花样，传统的classic类型基础上又增加了WebGL类型，以及允许增加到2K的++类型，多次想尝试提交个小游戏但总无法写出让自己满意还能控制在这么小的字节范围。 自己写不出来，站在巨人肩膀总是有机会吧，想起《基于HTML5的电信网管3D机房监控应用》这篇提到的threejs，bab
基于HTML5的WebGL呈现A星算法的3D可视化
http://www.hightopo.com/demo/astar/astar.html 最近搞个游戏遇到最短路径的常规游戏问题，一时起兴基于HT for Web写了个A*算法的WebGL 3D呈现，算法基于开源 https://github.com/bgrins/javascript-astar 的javascript实现，其实作者也有个不错的2D例子实现 http://w
基于HTML5的WebGL经典3D虚拟机房漫游动画
第一人称在 3D 中的用法要参考第一人称在射击游戏中的使用，第一人称射击游戏（FPS）是以第一人称视角为中心围绕枪和其他武器为基础的视频游戏类型 ; 也就是说，玩家通过主角的眼睛来体验动作。自从流派开始以来，先进的 3D 和伪 3D 图形已经对硬件发展提出了挑战，而多人游戏已经不可或缺。 Doom 的截图，这个流派的突破游戏之一，展示了第一人称射击游戏的典型视角 现在博物馆或者公司也经
根据矩阵变化实现基于 HTML5 的 WebGL 3D 自动布局
在数学中，矩阵是以行和列排列的数字，符号或表达式的矩形阵列，任何矩阵都可以通过相关字段的标量乘以元素。矩阵的主要应用是表示线性变换，即f（x）= 4 x等线性函数的推广。例如，旋转的载体在三维空间是一个线性变换，这可以通过一个表示旋转矩阵 [R ：如果v是一个列向量描述（只有一列的矩阵）的位置在空间中的点，该产品器Rv是列矢量描述旋转后该点的位置。两个变换矩阵的乘积是表示两个变换组成的矩阵。矩阵
玩转 HTML5 下 WebGL 的 3D 模型交并补
CSG 构造实体几何这个概念在工业水利水电施工上、游戏上已经有很多人使用了，最简单的实体表示叫作体元，通常是形状简单的物体，如立方体、圆柱体、棱柱、棱锥、球体、圆锥等。根据每个软件包的不同这些体元也有所不同，在一些软件包中可以使用弯曲的物体进行 CSG 处理，在另外一些软件包中则不支持这些功能。构造物体就是将体元根据集合论的布尔逻辑组合在一起，这些运算包括：并集、交集以及补集。我们一般可以用 CS
基于HTML5及WebGL开发的2D3D第一人称漫游进行碰撞检测
为了实现一个基于HTML5的场景小游戏，我采用了HT for Web来实现，短短200行代码，我就能实现用“第一人称”来操作前进后退上下左右，并且实现了碰撞检测。 先来看下实现的效果： http://hightopo.com/guide/guide/core/3d/ht-3d-guide.html#ref_collision 或者http://v.youku.com/v_show/id_XMzA
基于HTML5和WebGL的碰撞测试
这是公司大神写的一个放官网上给用户学习的例子，我一开始真的不知道这是在干嘛，就只是将三个形状图元组合在一起，然后可以同时旋转、放大缩小这个三个图形，点击“Animate”就能让中间的那一个图元单独绕着某一个点旋转，表单最上方的“Axis”真的完全不知道拿来干嘛用的，觉得好累赘，而且是官网的demo，也没有解释。。。所以我今天得任务就是完全剖析这个例子！ 本文例子：http://www.hight
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
突然有个想法，如果能把一些用到不同的知识点放到同一个界面上，并且放到一个盒子里，这样我如果要看什么东西就可以很直接显示出来，而且这个盒子一定要能打开。我用HT实现了我的想法，代码一百多行，这么少的代码能实现这种效果我觉得还是牛的。 先来看看效果图： 这个例子最基础的就是最外层的盒子了，所以我们先来看看如何实现它： var box = new ht.CSGBox();dataM
基于HTML5和WebGL的3D网络拓扑结构图
现在，3D模型已经用于各种不同的领域。在医疗行业使用它们制作器官的精确模型；电影行业将它们用于活动的人物、物体以及现实电影；视频游戏产业将它们作为计算机与视频游戏中的资源；在科学领域将它们作为化合物的精确模型；建筑业将它们用来展示提议的建筑物或者风景表现；工程界将它们用于设计新设备、交通工具、结构以及其它应用领域；在最近几十年，地球科学领域开始构建三维地质模型，而且3D模型经常做成动画，例如，在
基于 HTML5 WebGL 的 3D “弹力”布局
分子力(molecular force)，又称分子间作用力、范得瓦耳斯力，是指分子间的相互作用。当二分子相距较远时，主要表现为吸引力，这种力主要来源于一个分子被另一个分子随时间迅速变化的电偶极矩所极化而引起的相互作用；当二分子非常接近时，则排斥力成为主要的，这是由于各分子的外层电子云开始重叠而产生的排斥作用。 HT for Web 提供了弹力布局（也称为力导向布局）的功能，即根据节点之间存在
基于 WebGL 的 HTML5 3D SCADA 主站系统
前言 这个例子的初衷是模拟服务器与客户端的通信，我把整个需求简化变成了今天的这个例子。3D 的模拟一般需要鹰眼来辅助的，这样找产品以及整个空间的概括会比较明确，在这个例子中我也加了，这篇文章算是我对这次项目的一个总结吧。 例子链接： http://www.hightopo.com/demo/3DEdgeFlow/index.html 本文动图： 代码实现 进入正题，整个例子仅仅是用了
基于 WebGL 的 HTML5 网络拓扑结构 3D 图
前言 现在，3D 模型已经用于各种不同的领域。在医疗行业使用它们制作器官的精确模型；电影行业将它们用于活动的人物、物体以及现实电影；视频游戏产业将它们作为计算机与视频游戏中的资源；在科学领域将它们作为化合物的精确模型；建筑业将它们用来展示提议的建筑物或者风景表现；工程界将它们用于设计新设备、交通工具、结构以及其它应用领域；在最近几十年，地球科学领域开始构建三维地质模型，而且 3D 模型经常做成动
基于 HTML5 的 WebGL 3D 地铁站可视化系统
前言 工业互联网，物联网，可视化等名词在我们现在信息化的大背景下已经是耳熟能详，日常生活的交通，出行，吃穿等可能都可以用信息化的方式来为我们表达，在传统的可视化监控领域，一般都是基于 Web SCADA 的前端技术来实现 2D 可视化监控，本系统采用 Hightopo 的 HT for Web 产品来构造轻量化的 3D 可视化场景，该 3D 场景从正面展示了一个地铁站的现实场景，包括地铁的实时运
基于 HTML5 的 WebGL 楼宇自控 3D 可视化监控
前言 智慧楼宇和人们的生活息息相关，楼宇智能化程度的提高，会极大程度的改善人们的生活品质，在当前工业互联网大背景下受到很大关注。目前智慧楼宇可视化监控的主要优点包括: 智慧化 – 智慧楼宇是一个生态系统，像人一样拥有感知能力、自我判断能力以及控制能力。绿色化 – 绿色建筑在耗能、产能以及能源管理方面实现绿色化，楼宇安防实现绿色化监控。运行成本可控制 – 基于可持续发展的要求，现代建筑、商业建筑
基于 HTML5 WebGL 实现的 3D “弹力”布局
分子力(molecular force)，又称分子间作用力、范得瓦耳斯力，是指分子间的相互作用。当二分子相距较远时，主要表现为吸引力，这种力主要来源于一个分子被另一个分子随时间迅速变化的电偶极矩所极化而引起的相互作用；当二分子非常接近时，则排斥力成为主要的，这是由于各分子的外层电子云开始重叠而产生的排斥作用。 HT for Web 提供了弹力布局（也称为力导向布局）的功能，即根据节点之间存在互斥
基于 WebGL 3D 的 HTML5档案馆可视化管理系统
前言 档案管理系统是通过建立统一的标准以规范整个文件管理，包括规范各业务系统的文件管理的完整的档案资源信息共享服务平台，主要实现档案流水化采集功能。为企事业单位的档案现代化管理，提供完整的解决方案，档案管理系统既可以自成系统，为用户提供完整的档案管理和网络查询功能，也可以与本单位的OA办公自动化和DPM设计过程管理，或者与MIS信息管理系统相结合，形成更加完善的现代化信息管理网络。传统档案馆随着
基于 HTML5 WebGL 的 3D 风机 Web 组态工业互联网应用
前言 在目前大数据时代背景之下，数据可视化的需求也变得越来越庞大,在数据可视化的背景之下，通过智能机器间的链接并最终将人机链接,结合软件和大数据分析的工业互联网也将变得越来越容易实现! 国家也敏锐意识到时代特性并及时把握时机，培育新的经济增长点，推动“中国制造”升级,实现工业大国到工业强国的质变，而诸多的业内人士也正在努力完成对自己的“升级”与“改造”，而大数据的数据可视化与工业的结合，实现了
基于 HTML5 WebGL 的加油站 3D 可视化监控
前言 随着数字化，工业互联网，物联网的发展，我国加油站正向有人值守，无人操作，远程控制的方向发展，传统的人工巡查方式逐渐转变为以自动化控制为主的在线监控方式，即采用数据采集与监控系统 SCADA。SCADA 系统的推广使用，大大提高了我国加油站的监控效率，本文所讲的则是通过对加油站的可视化建模，结合 HT 的 3D 可视化以及 2D 监控面板来实现对加油站的可视化监控。三维可视化监控系统是将三维
基于 WebGL 实现的 HTML5 3D “弹力”布局
分子力(molecular force)，又称分子间作用力、范得瓦耳斯力，是指分子间的相互作用。当二分子相距较远时，主要表现为吸引力，这种力主要来源于一个分子被另一个分子随时间迅速变化的电偶极矩所极化而引起的相互作用；当二分子非常接近时，则排斥力成为主要的，这是由于各分子的外层电子云开始重叠而产生的排斥作用。 HT for Web 提供了弹力布局（也称为力导向布局）的功能，即根据节点之间存在互斥
WebGIS和WebGL的基本概念介绍和差异对比
在当今数字化时代，WebGIS和WebGL是两个在前端开发中越来越重要的技术。它们都与数据可视化和图形渲染有关，但各自有着不同的应用场景和特点。本文将介绍WebGIS和WebGL的基本概念，并对比它们之间的主要差异。 WebGIS：网络地理信息系统 基本概念： WebGIS是一种基于网络的地理信息系统，它允许用户通过Web浏览器访问、查询、分析和可视化地理空间数据。WebGIS结合了地图服务、