精华内容
下载资源
问答
  • webgl技术
    2021-06-24 07:08:41

    基于HTML5 WebGL技术校园全景漫游系统研究

    基于HTML5 WebGL技术校园全景漫游系统研究

    摘要:该文对校园全景漫游系统设计进行了探究,该系统全景的实现是基于图像建模的,取材于"校园区实景图片",通过使用相机及全景云台等设备在校园区选择景点拍摄采集图片,然后通过图像拼接处理软件生成全景视图,再采用Xml Dom创建节点树封装场景元素库供JS调用,最后运用WebGL渲染管线技术在Canvas容器中实现3D动画效果,从而实现整个系统功能。

    关键词:虚拟现实;透视投影;渲染管线;节点树;封装

    中图分类号:TP391 文献标识码:A 文章编号:1009-3044(2016)35-0086-03

    Research on Campus Panoramic Roaming System Based on WebGL HTML5 Technology

    ZHOU Chang-quan

    (Anhui Finance & Trade Vocational College, Hefei 230601, China)

    Abstract: This paper explores the design of campus roaming system, the system is based on the panoramic image modeling, based on the "campus pictures", through the use of cameras and other equipment in the campus panoramic head area attractions shooting acquisition image, then splicing processing software to generate a panoramic view of the image, then use Xml to create Dom the node tree scene elements library call for JS package, the final realization of 3D animation in the Canvas container using the WebGL pipeline technology, so as to realize the function of the whole system.

    Key words: virtual reality; perspective projection; rendering pipeline;node tree;encapsulation

    1 概述

    全景漫游技术可实现在网络虚拟环境中的交互性、沉浸性实景漫游体验。传统漫游技术在使用过程中主要还脱离不了安装插件等问题。而本系统综合了传统漫游技术优势,借鉴当今网络较流行的全景漫游系统技术经验,在HTML5框架基础上运用WebGL技术而设计开发的新兴校园三维全景漫游系统,它有效缓解和改善了传统技术的不足。

    2 研究意义和必要性

    传统的三维全景漫游技术大多需要插件支持或特定的播放格式才能在客户端实现漫游、人机交互等功能,图像的渲染能力也有限,这在损害用户体验的同时也大大阻碍了三维全景漫游技术的进一步发展。

    现在三维全景漫游技术虽然在房地产业和旅游业等方面发展迅速,但广泛应用于高校信息化建设的还不多见,很多高校整个信息化系统里面,缺少针对校园整体环境的一个立体化、形象化的展示,只能通过文字加图片的传统网页形式来展示学校风貌,这样局限了学校自身形象建设发展,也不便于学生和家长对校园环境快速全面的了解,从而要花费大量的时间和力气去实地考察,成本费用大,受众面又窄。若利用三维全景漫游技术开发校园三维全景漫游系统,它将是一个面向大众,跨越时空界限,广泛展示校园风采,提升学院整体形象,宣传学校办学理念的非常重要的窗口和应用支撑平台。

    本系统研发不仅采用了编程技术,还结合了摄影和图形图像编辑处理等技术手段,联系学校专业教育,它将程序设计?R怠⑸阌白ㄒ岛屯夹瓮枷癖嗉?处理等专业融合一起,这就决定了项目开发的成果可作为学校公共教育资源应用于专业教学中,为专业理论实训教学及相关专业学生实习实训提供丰富的任务案例,对重点专业和特色专业建设提供有力的支撑。同时,本项目开发技术性强,有较强的可操作性,对强化学生专业技能,提高学生实际动手能力,也起到十分重要的作用。

    3 系统功能设计与规划

    本系统具体分为三个部分:可伸缩导航热点地图、三维场景浏览视窗和控制菜单组。

    导航热点地图部分包括校区景点分布图、图中根据不同景点设置了可供用户选择链接的场景切换点,用于选择切换

    更多相关内容
  • WebGL技术初步评估

    2022-05-09 10:03:53
    主要包括各家WebGL技术的简介、WebGL--3D图形硬件加速技术、WebGL设备平台支持性、WebGL目前在浏览器上存在的技术问题等。
  • 一种可以在基于WebGL技术的主流浏览器上显示巨量二维矢量文本文字而不会明显增加浏览内存消耗和明显增加前端网页转化文本矢量数据所需时间的技术。通过此技术可以在一些低配置的设备上展示WebGL时当展示内容含有巨量...
  • WebGL EKI 语料库 3D 使用 WebGL 技术在 3D 空间中表示分析的结果。用在浏览器中打开 index.html(双击文件)。 在幻灯片 2 和 3 上,您可以使用鼠标在空间中移动相机。内容概要演示文稿的目的是比较爱沙尼亚语中...
  • 基于WebGL技术的Web环境3D对象和动画的交互式查看器 3D查看器的实时示例: : 该查看器允许在同一页面上使用多个实例,并可以以针对Web环境优化的开源文件格式SEA3D加载3D模型。 观看者的用户可以通过鼠标控件或...
  • 针对webgl的库threejs框架的热力图功能项目实战详细的讲解,热力图功能在真实项目中应用,主要包括厂区、生产线、机房、库房等实时监控热力分布,建筑或园区人员密集实时监控等综合场景应用。
  • Infinite Tubes:利用WebGL技术实现的隧道体验
  • 使用WebGL技术做BIM模型的轻量化,需要把原始BIM模型进行解析,用WebGL技术在浏览器端或移动端对BIM模型进行重新绘制渲染,对技术水平要求较高。不过目前已有成熟解决方案,使这个过程得到的简化。 使用基于...

    我们以运维阶段为例,在建筑已经建造完成进入运维阶段时,我们的运维系统往往希望轻量化的BIM模型。首先是在原始BIM模型基础上的概括与简化,比如在设计阶段或施工阶段的某些具体信息在运维阶段并不一定有用,如果这些冗余信息在BIM运维阶段不做概括和简化,不但会造成BIM模型过于复杂导致性能问题,还可能由于信息冗杂、干扰,导致运维系统使用不便。所以有必要根据BIM模型的应用场景做必要的简化。与此同时,运维阶段所需要的一些必要信息,在设计和施工阶段也是没办法包含在BIM模型之内的,也需要根据具体使用情况,对BIM模型信息做必要的补充。这个过程必然造成BIM模型的版本分化,有必要做好版本管理工作。

    根据运维系统的特点,运维人员可能并不熟悉建筑建模软件的使用,同时让运维人员使用建模软件来做运维管理也是不实际的,所以还需要对BIM模型的格式做必要的转换达到轻量化,以便在运维系统中使用。常见的BIM模型轻量化解决方案有下面几种,大家一起探讨:

    使用Autodesk Navisworks 软件。 Autodesk Navisworks可以接受包括Revit在内的多种业界常见的BIM模型格式,同时具有很高的压缩比。Navisworks同时提供丰富的API,有不少厂商使用Navisworks做运维平台。其优点是支持数据格式众多,压缩比高,轻量化效果好同时提供丰富API,易于开发与集成。但是 Navisworks 是桌面软件,客户端需要安装Navisworks软件,需要License授权,成本较高。 使用Navisworks虽然可以开发基于Web的应用,但Navisworks只能支持IE浏览器,并且每个客户也还是需要安装Navisworks软件。同时由于IE浏览器版本的升级,新版本IE浏览器对Navisworks的支持还有问题。而且该方案也不支持移动设备浏览。

    使用DWFx格式。DWF格式是更通用的数据格式,几乎所有Autodesk软件都支持导出为DWF格式。其优点是支持的格式众多,Autodesk Design Review还提供的免费的Web插件,可以在Web端运行,有简单API可以做定制和集成。不过Design Review或DWG viewer也是基于COM技术的,只能在IE浏览器上运行,这在互联网时代的大背景下,这简直是非常苛刻的要求。同时DWF viewer对超大模型的支持能力一般,打开超大模型时加载时间较长、对计算机性能要求高,运行性能也会有影响。不支持移动设备。

    WebGL解决方案。随着最新Web技术的发展,尤其是HTML5/WebGL技术的发展与成熟,为我们在Web和移动端显示BIM模型提供了新的选择,这必将是将来的发展方向。HTML5/WebGL技术使用原生浏览器本身的功能,不需要下载安装任何插件即可在Web端浏览和显示复杂的三维BIM模型或二维DWG图纸。同时支持包括Firefox、Google Chrome等现代浏览器,iOS、Android设备上也可以运行。所以几乎所有浏览器、所有设备上都可以使用。使用WebGL技术做BIM模型的轻量化,需要把原始BIM模型进行解析,用WebGL技术在浏览器端或移动端对BIM模型进行重新绘制渲染,对技术水平要求较高。不过目前已有成熟解决方案,使这个过程得到的简化。

    使用基于HTML/WebGL技术的BIM模型轻量化Web浏览技术更契合技术发展方向,Autodesk的View and Data API技术的推出,进一步降低了对BIM模型预处理难度,使得基于HTML/WebGL技术对BIM模型的Web浏览、分享以及协作更简单。Autodesk View and Data API技术支持包括Revit、Inventor、Navisworks、Catia、AutoCAD等软件的超过60多种数据格式,几乎涵盖业界所有三维数据格式。

    Autodesk View and Data API由两部分组成,对于BIM模型的预处理等技术复杂度高的工作以云服务的形式提供,用户可以以REST的方式调用;同时浏览器端提供基于Java的API,方便对模型做更精细的控制以及和其他业务系统做深度集成。

    如上图所示,服务器端API部分以业界流行的REST方式提供,可以由任意语言或平台调用。通过REST API,我们实现基于OAuth 2.0的身份认证、模型文件的上传以及云端的格式转换。通过View and Data API提供的云服务,我们不用花费大量的时间和精力对不同格式的模型进行解析,只需利用云端服务的强大威力,从而降低我们系统开发过程中的技术难度。

    模型经云端进行格式转换后即可使用View and Data浏览器端API,使用Java把模型嵌入到浏览器中并和其他系统做集成。该模型浏览器以及提供了内置的三维模型浏览查看功能,比如模型的缩放、旋转、视点跳转等,同时还提供模型目录结构树浏览、模型组件的隐藏与显示、模型组件的信息显示与搜索,而且内置的模型测量工具,可以对模型组件长度、角度、面积等多种参数进行量测,内置的剖面工具可以在任意平面上对模型进行剖切从而查看模型的内部结构。

    通过View and Data 客户端的Java API,我们可以以编程的方式对模型浏览器进行控制、比如通过相机参数的控制来实现视点跳转和模型自动旋转,获取属性信息以便和其他系统集成,捕捉用户事件以及创建风格一致的用户界面等等。由于View and Data API基于Three.js构建,除了Autodesk View and Data API 客户端本身提供的API之外,结合HTML5技术、Three.js技术,我们可以做出更多酷炫的应用效果。

    下面的例子展示了使用Autodesk View and Data API同时显示三维模型和二维图纸,并实现三维模型、二维图纸以及统计图表的联动。

    下面是View and Data API在某大厦运维系统中应用的实例,运维人员随时在基于Web的运维系统中查看设备的运行状态、维护工单等信息,并实现和三维模型的联动,一目了然。使用View and Data API技术在浏览器中查看复杂的三维模型,不需要安装任何客户端,只需要浏览器即可。

    此外还有某建筑的全生命周期管理系统,实现基于Web中三维BIM模型的建筑全生命周期管理,使用View and Data API, 在Web系统中显示复杂的三维BIM模型更简单方便。

    同时注意到,Autodesk View and Data API不但可用于建筑模型的web浏览,对于机械模型同样试用。以下示例展示了根据模型属性信息的动态标注:

    下面示例展示了使用View and Data API结合Three.js技术实现对模型组件的移动拆解:

    看到这里,您应该对Autodesk View and Data API有了直观的认识,要了解更多信息,这里(http://duchangyu.github.io/51CTO/#/ )有一个简单的介绍,还可以登录到Autodesk view and data API的githhub主页 – http://developer-autodesk.github.io , 你可以找到n多示例代码以及开发文档和资源。

    展开全文
  • 利用WebGL技术改进机器人实验效果,黄嵘,文福安,本文提出了采用WebGL技术的方法,运用于虚拟实验室的应用。将传统的需要客户端进行展示的机器人实验,在浏览器里流畅地展示出来,�
  • 基于WebGL技术和Oak3D引擎的交互式三维地球模型研究
  • Create React App入门该项目是通过引导的。可用脚本在项目目录中,可以运行:yarn start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑,则页面将重新加载。 您还将在控制台中看到任何棉绒错误...
  • 国外大神分享的一款H5游戏源码,整体浏览非常流畅,交互也很酷
  • WebGL技术研究:Threejs、SceneJS、ThingJS等框架优缺点对比分析。WebGL研究(包括BabylonJS、Threejs、LayaboxJS、SceneJS、ThingJS等框架的特性、适用范围、支持格式、优缺点、相关网址)。

            为实现企业80%以上的生产数据进行智能转化,在烟草、造纸、能源、电力、机床、化肥等行业,赢得领袖企业青睐,助力企业构建AI赋能中心,实现智能化转型升级。以AI驱动,构建5G时代下企业数智基础,从根本上改变了数据采集、存储和使用的方式,是当下企业构建数字化与智能化能力的首选产品。构建面向未来智能工厂全场景的全息交互模式,实现物理空间与数字空间的混合孪生。为国产工打造一个用户可以自研的智能云平台,变革未来企业IT消费模式,输送企业转型升级动能,为企业创造可量化价值。
      
      本文为选择合适的WebGL框架,为后续项目奠定基础;避免盲目选择框架,导致后续项目重构带来不必要的成本浪费。本文清楚的讲述了各个框架的特点,适用范围,优缺点以及相关网址范例;以便于后续更快速的开发,提高生产效率,最后进行总结。

      WebGL研究(包括BabylonJS、Threejs、LayaboxJS、SceneJS、ThingJS等框架的特性、适用范围、支持格式、优缺点、相关网址),

      
    一、 BabylonJS(适用于小场景,开源;JavaScript、TypeScript)
      
      (一)特点
      
      强大,美观,简单和开放的3D渲染体验。
      
      (二)适用范围
      
      Babylon.js是一款WebGL开发框架。 适合做中大型项目,尤其是多种媒体混杂的或者是游戏项目VR体验项目
      
      (三)支持格式
      
      glTF,OBJ,STL,.babylon (常用格式)。
      
      (四)优缺点
      
      1、 优点
      
      功能较为全面,功能比较丰富、灵活、模型显示不失真。有微软背景,有不少的demo,有较详细的api文档,有供测试的平台,有提供3dsmax转换模型的插件,比three.js成熟;几经更新
      
      与完善之后,Babylon.js已更新至1.12版本,相比之前的版本,除了不断的Bug修复之外,Babylon.js还新增了.许多非常牛叉的新特性,并对已有功能进行了完善。更方便快捷地完成光线、轮船纹理、海浪等的3D建模,从而带来最佳的呈现效果。
      
      缺点
      
      学习难度大、周期长,需要进行大量深入的学习与研究。另外,在模型文件较大或较多时,浏览器打开时会等待较长时间;
      
      中文资料很少,没有系统的中文教程,如从入门到精通都可以给你讲一遍系统的教程,论坛也会被墙,相关的qq群较少,群里的人也不多,所以能真正指导我们的大牛也比较少。国内资料基本没有。同Three.js类似,Firefox浏览器在本地同时打开多个较大模型时,会提示浏览器性能不足问题。另外,模型在100M以上时可能存在无法加载的现象。.babylon模型预览,可以通过官方提供的沙盒地址,通过拖放.babylon文件进行查看。经过测试,发现个别.babylon模型仍难以打开。
      
      ⦁ 浏览器支持
      
      对目前主流的IE11以上、Chrome和FireFox都支持,本人已在Chrome v 57.0.2970.0和Microsoft EdgeHTML 14.14393测试通过。
      
      ⦁ 速度
      
      同Three.js类似,加载大模型时速度较慢。需提供正在载入信息提示,尽可能提高用户体验。不过Babylon为了尽可能的提高加载速度,提供了工具可以将.babylon文件转换成几个文件,缓式加载以提高显示速度。
      
      ⦁ 运行环境
      
      运行Web端应用,需先在本地搭建应用服务器环境。例如:Apache、Tomcat、JBoss等。
      
      相关网址:
      
      主站:http://www.babyon.js.com/
     
      文档:http://doc.babylonjs.com/
      
      论坛:http://www.html5gamedevs.com/forum/16-babylonjs/
      
      PlayGround:http://babylonjs-playground.azurewebsites.net/
      
      在线开发工具:http://wow.techbrood.com/fiddle/new
      
      工具:http://doc.babylonjs.com/tutorials/using_the_incremental_loading_system
      
      下载地址:https://github.com/BabylonJS/Babylon.js/tree/master/Exporters
      
      模型预览:http://sandbox.babylonjs.com/
      
      格式解析: https://github.com/h53d/babylonjs-doc-cn/blob/master/target/generals/General/File_Format_Map_(.babylon).md
      
      http://doc.babylonjs.com/generals/file_format_map_(.babylon)
      
      编辑工具:http://materialeditor.raananweber.com/
      
      Shader在线查看(GLSL语言编写:Vertex Shader和Pixel Shader):
      
      重点示例
      
      http://www.babylonjs.com/demos/sponza/
      
      http://www.babylonjs.com/demos/mansion/
      
      http://www.babylonjs.com/demos/distraction/
      
      http://www.babylonjs.com/demos/actions/
      
      http://www.babylonjs.com/demos/train/
      
      http://cyos.babylonjs.com/
      
    二、ThreeJS(适用于小场景,开源,JavaScript)
      
      (一)特点
      
      Three.js 是一款 webGL 开源框架,易用、简单、直观的方式封装了 3D 图形编程中常用的对象。在开发中使用了很多图形引擎的高级技巧,提高了性能。内置了很多常用对象和极易上手的工具,功能强大。
      
      (二)适用范围
      
      可以做中小型的重表现的Web项目。Three.js以简单、直观的方式封装了3D图形编程中常用的对象。更方便快捷地完成光线、轮船纹理、海浪等的3D建模,从而带来最佳的呈现效果。
      
      (三)支持格式
      
      stl,obj+mtl+png,FBX,gltf格式(主要格式)
      
      (四) 优缺点
      
      优点
      
      国内用的比较多,所以中文的资料也会比较多,有比较系统的中文教程如从入门到精通。用的人比较多,所以相关的qq群较多,群里的人也较多,接触到的大牛应该也会比较多。在WebGL的引入之前已经创建了three.js独特方便的模块化渲染接口,并在不用WebGL的情况下允许它使用SVG和HTML5画布元素。近些年,浏览器的功能越来越强大,渐渐得成为了复杂应用和图形的平台。同时,现有大多数浏览器实现了对 WebGL 的支持,但要直接使用 WebGL 相关接口进行开发,则需要学习复杂的着色器语言,且开发周期长,不利于项目的快速开发。
      
      面对这种情况,Three.js 应运而生,它不但对 WebGL 进行了封装,将复杂的接口简单化,而且基于面向对象思维,将数据结构对象化,非常方便我们开发。Three.js 的发展十分迅速,然而配套的学习材料却比较匮乏,于是便有了当前的这个课程。
      
      缺点
      
      没有提供一些基础建模软件的插件,比如3dsmax的模型导出插件,虽然说提供一些读3ds格式,fbx格式的场景。要配合更多扩展库完成,因为你可能会需要联网通信功能的封装、声音普通控制甚至高级频谱控制、输入设备信息的处理等诸多渲染以外的功能。国内学习资料多,但加载速度慢、缺少碰撞检测等功能
      
      (五)相关网址
      
      https://threejs.org/

      https://threejs.org/examples/
      
      https://www.wjceo.com/blog/threejs/
      
      http://www.yanhuangxueyuan.com/
      
    三、LayaboxJS(layaair底层开发Ar,JS,TS)
      
      (一)特点
      
      LayaAir引擎的产品性能已达到原生APP的水准,甚至可以直接用于开发APP、HTML5、Flash的多端版本产品。裸跑性能堪比APP,支持2D,3D,VR开发。
      
      (二)适用范围
      
      大型游戏开发项目与游戏上市企业,广告,营销,教育,应用开发等领域。
      
      (三)格式支持
      
      Spline。
      
      (四)优缺点
      
      优点
      
      裸跑性能堪比APP 多版本发布、知名CP首选引擎
      
      极致性能:LayaAir优先使用webgl渲染,如果webgl不可用,自动无缝转为canvas渲染,引擎设计过程中处处以性能为优先原则,LayaAir是为裸跑而设计的HTML5引擎。
      
      轻量易用:LayaAir API设计上追求精简,简单易用,上手容易,引擎本身非常注意自身大小,是目前同等功能最小的HTML5引擎。
      
      支持多语言开发:LayaAir同时支持ActionScript3、TypeScript、JavaScript三种语言开发HTML使用任意一种自己喜欢的语言开发即可。
      
      功能齐全:同时支持2D,3D,VR、时间轴动画,缓动、UI系统、粒子动画、骨骼动画、物理系统等。提供可视化辅助开发及工具流。LayaAirIDE提供代码开发工具及可视化编辑器,清晰的工作流,让美术,策划,程序紧密配合,提高开发效率。
      
      开源免费:引擎全部开源并托管到github,并且全部免费使用,包括商用。
      
      缺点
      
      有些功能与问题,官方文档没提到,网上搜到同样问题的帖子,却没人回答。作为一个开源免费的引擎,不是每个问题,官方都能准时解答的,甚至你发个帖子,很长一段时间都没有一个答案,这时只能自己慢慢摸索一下了。这里我就把自己遇到的一些小问题及解决思路记录下来,希望对那些遇到同样问题的人有帮助。这些问题并不大,却有点烦人,你明知道实现某个功能可能就是一行代码的事,却没有关于如何使用的说明,这让人很苦恼。
      
      ⦁ 底层技术
      
      关于as/js/ts语言的选择,演讲者表示,LayaAir现在对as的支持最好;不过as毕竟是停止更新的语言,LayaAir以后对它的支持也会慢慢淡化,直至脱钩。在js和ts之间,演讲者建议选择ts,因为ts的类型健壮,而且ts编译成js的过程效率很高。
      
      (五)相关网址
      
      https://ldc2.layabox.com/
      
      https://blog.csdn.net/explor8/article/details/51487097
      
      https://blog.csdn.net/wxq_wuxingquan/article/details/53926432
      
      https://www.layabox.com/
      
    四、SceneJS(开源;Lindsay Kay底层开发)
      
      (一)特点
      
      它是针对计算机辅助设计的要求。 开源的JavaScript3D引擎,特别适合需要高精度细节的模型需求,比如工程学和医学上常用的高精度模型。
      
      (二)适用范围
      
      它是针对计算机辅助设计的要求。 开源的JavaScript3D引擎,特别适合需要高精度细节的模型需求,比如工程学和医学上常用的高精度模型。
      
      (三) 支持格式
      
      模型预览:
      
      http://sandbox.babylonjs.com/
      
      格式解析: https://github.com/h53d/babylonjs-doc-cn/blob/master/target/generals/General/File_Format_Map_(.babylon).md
      
      http://doc.babylonjs.com/generals/file_format_map_(.babylon)
      
      编辑工具:
      
      http://materialeditor.raananweber.com/
      
      Shader在线查看(GLSL语言编写:Vertex Shader和Pixel Shader):
      
      http://cyos.babylonjs.com/
      
      (四)优缺点
      
      优点
      
      专门用于快速绘制大量单独连接的对象,而没有像阴影、反射等游戏引擎效果。SceneJS的API和JSON相似,它学习起来很简单。
      
      缺点
      
      相关社群几乎没有,中国很少人用。缺少碰撞检测等功能。加载大模型时速度较慢。需提供正在载入信息提示,尽可能提高用户体验。(可用工具可以将.babylon文件转换成几个文件,缓式加载以提高显示速度。)Firefox浏览器在本地同时打开多个较大模型时,会提示浏览器性能不足问题。另外,模型在100M以上时可能存在无法加载的现象。
      
      (五) 相关网址
      
      http://scenejs.org/
      
      http://slides.com/xeolabs/deck/
      
      https://developer.tizen.org/community/tip-tech/scenejs-%E2%80%93-creating-javascript-controlled-animated-3d-character-part-1
      
      http://steffe.se/?p=475
      
      http://scenejs.org/examples/index.html#scenegraph_firstExample
      
      http://scenejs.org/examples/index.html#scenegraph_firstExample
      
    五、ThinkJS(node.js的框架,底层开发JavaScript)
      
      (一)特性
      
      是一个快速、简单的基于MVC和面向对象的轻量级Node.js开发框架,遵循MIT协议发布。秉承简洁易用的设计原则,在保持出色的性能和至简的代码同时,注重开发体验和易用性,为WEB应用开发提供强有力的支持。
      
      Thinkjs里面很多特性来源于ThinkPHP,同时根据Node.js的特点,使用了Promise, WebSocket等特性,让代码更简洁、优雅。
      
      (二)优点
      
      开发更简单更快速,团队合作更便捷。快速搭建项目,可以让你把注意力放在业务本身,尤其是 Thinkjs 2.0 以上支持 ES2015/ES2016 的各种特性,用起来非常方便.这是我用 Thinkjs 做的一个项目,两天就搞定,方便快捷 github resume。Thinkjs 是一个快速、简单的基于MVC和面向对象的轻量级Node.js开发框架,遵循MIT协议发布。秉承简洁易用的设计原则,在保持出色的性能和至简的代码同时,注重开发体验和易用性,为WEB应用开发提供强有力的支持。
      
      Thinkjs最大的特色是对目前比较潮的语法特性支持的特别好,比如es6、es7、typescript等,有了这些,对aysnc/await等特性支持,让代码更加fashion。
      
      相关网址:
      
      https://thinkjs.org/
      
      https://thinkjs.org/zh-cn/doc/2.2/index.html
      
      https://www.w3ctech.com/topic/637
     
      http://www.thinkjs.org/doc/
      
    六、ThingJS(底层开发JavaScript)
      
      (一)特性
      
      强大的3d引擎,简化模型制作,提高开发效率,在线开发部署,支持离线部署。
      
      ThingJS面向物联网的3D可视化PaaS开发平台.基于WebGL兼容各种浏览器及移动设备.零门槛、高效率、低成本开发各类3D应用。
      
      基于 Koa 2.x,兼容 middleware;
      
      内核小巧,支持 Extend、Adapter 等插件方式;
      
      性能优异,单元测试覆盖程度高;
      
      内置自动编译、自动更新机制,方便快速开发;
      
      使用更优雅的 async/await 处理异步问题,不再支持 */yield;
      
      从 3.2 开始支持 TypeScript。
      
      (二)适用范围
      
      ThingJS 名称源于 物联网 Internet of things(IoT) 中的 Thing (物),意为面向物联网可视化开发的 Javascript 库。 主要针对以一栋或多栋建筑所组成的园区级别的场景,可以应用于数据中心、仓储、学校、医院、安防、预案,城市、园区、建筑、楼层、房间、设备等多种领域。
      
      而且这些层次的对象在ThingJS的场景加载完成后,是以JS对象的方式直接暴露给用户使用,简单方便。
      
      (三)支持格式
      
      .tjs
      
      (四)优缺点
      
      1、优点
      
      ThingJS 基于 HTML5 和 WebGL 技术,可方便地在主流浏览器上进行浏览和调试,支持 PC 和移动设备。ThingJS 为可视化应用提供了简单、丰富的功能,只需要具有基本的 Javascript 开发经验即可上手; ThingJS 提供了对场景的加载、分层级的浏览,对象的访问、搜索、以及对象的多种控制方式和丰富的效果展示,可以通过绑定事件进行各种交互操作,还提供了摄像机视角控制、点线面效果、温湿度云图、界面数据展示、粒子效果等等各种可视化功能;面对这种情况,Three.js 应运而生,它不但对 WebGL 进行了封装,将复杂的接口简单化,而且基于面向对象思维,将数据结构对象化,非常方便我们开发。Three.js 的发展十分迅速,然而配套的学习材料却比较匮乏,于是便有了当前的这个课程。
      
      在功能接口提供的粒度上,ThingJS和其他开发工具相比,站在了更高的封装层面, 用尽可能简洁的接口,直接提供了场景的加载与展示、物联网设备的创建与特效;还提供了信息点、线路、管线、区域、热图、粒子、动画等丰富功能;提供了摄影机控制、第一人称行走、寻路
      
      导航和视点线路工具;可扩展的界面、头顶信息牌、内嵌视频监控等丰富的信息展示方式。这些接口大部分已经在在线例子中可以找到,可以边改参数边看到效果;帮助用户以最快的速度 学习、开发与部署。
      
      2、缺点
      
      没有不是开源的。ThingJS所定位的物联网可视化应用,侧重宏观场景表现,并不针对局部细节的效果,而且由于WebGL技术的性能局限,在性能上不能和Unity等原生程序相比,性能和效果的侧重也更偏向前者,就像电纸书和手机有着不同的定位;所以,ThingJS不适合做场景细节要求高的应用。
      
      (五)相关网址
      

    • http://www.thingjs.com/guide/
    • http://www.3dmomoda.com/ 
    • http://forum.thingjs.com/
    • http://www.thingjs.com
    • https://baijiahao.baidu.com/s?id=1611474740563954882&wfr=spider&for=pc

      
    七、总结
      
      利用3d图形库技术范围和示例等研究成果,有利于根据公司的需求去选择合适的webGL框架去开发,节约了时间、人力成本,提高了开发效率。
      
    附件:
      
      一、三维图形库
      
      市面上的三维图形库很多,基本分为Web端(WebGL)与非Web端(OpenGL/OpenGLES)、商用收费与免费开源两类。目前,主流的三维图形库大致如下所示。
      
      ArcGIS Engine(收费)
      
      U3D (收费)
      
      OverDrive(收费)
      
      Hightopo(收费)(http://www.hightopo.com/)
      
      Ossimplanet(开源)(http://trac.osgeo.org/ossim/wiki/OssimPlanet)
      
      Wings 3D(开源)(http://www.wings3d.com/)
      
      OGRE(开源)(https://github.com/OGRECave/ogre)?
      
      Cesium(开源)(http://cesiumjs.org)
      
      OSG(开源)(https://github.com/openscenegraph/OpenSceneGraph)
      
      OPEN CASCADE(开源)(https://www.opencascade.com)
      
      Potree(开源)(http://potree.org/)
      
      SceneJS(开源)(http://scenejs.org)
      
      Three.js(开源)(https://threejs.org/)
      
      BabylonJS(开源)(http://www.babylonjs.com/)
      
      二、技术选型
      
      (一) 非Web端三维图形库 数量多、性能好、API丰富。
      
      因为属于Native APP范畴,所以缺点是不能一次编码,跨平台运行,需针对不同平台单独集成编码。
      
      (二)Web端三维图形库
      
      伴随HTML 5诞生,故目前可用库较少、在浏览器内运行也导致性能略差、功能与移动设备支持的三维标准OpenGL ES类似,都是从OpenGL剪裁而来。最大的优点是跨平台性,即一次编码,可四处运行(只要浏览器支持WebGL标准)。
      
      (三)分析
      
      根据业务需求,优先考虑Web端三维开发。可选的范围在Potree、Hightopo、Three.js和BabylonJS之间。
      
      Potree
      
      研究了Potree中最接近于三维漫游与热点切换的例子。加载速度很快,但清晰度太差,达不到业务需求。
      
    三、大场景基于earth的开源三维js引擎:
      
      cesiumjs(http://cesiumjs.org/)
      优点:有较多的demo,详细的api文档,有测试平台,比较丰富的展示特性和扩展。
      webglearth(http://www.webglearth.com/)
      demo较少,但一些基本的gis功能都有,简单实用,好像没什么更新过。
      openwebglobe(http://world.openwebglobe.org/)
      效果不是很好,加载不流畅,展示的功能也比较少,后面就没有进步了解了。

    展开全文
  • 基于HTML5的WebGL技术电信3D机房漫游源代码

    千次下载 热门讨论 2015-05-01 23:02:24
    基于HTML5的WebGL技术电信3D机房漫游源代码
  • WebGL技术储备指南

    2016-07-13 01:38:37
    WebGL 虽然还未有广泛应用,但极具潜力和想象空间。本文是我学习 WebGL 时梳理知识脉络的产物,花点时间整理出来与大家分享。 文章出处:http://www.open-open.com/news/view/1eb8555 WebGL 是 HTML 5 ...

    摘要:WebGL 是 HTML 5 草案的一部分,可以驱动 Canvas 渲染三维场景。WebGL 虽然还未有广泛应用,但极具潜力和想象空间。本文是我学习 WebGL 时梳理知识脉络的产物,花点时间整理出来与大家分享。

    WebGL 是 HTML 5 草案的一部分,可以驱动 Canvas 渲染三维场景。WebGL 虽然还未有广泛应用,但极具潜力和想象空间。本文是我学习 WebGL 时梳理知识脉络的产物,花点时间整理出来与大家分享。

    示例

    WebGL 很酷,有以下 demos 为证:

    寻找奥兹国
    赛车游戏
    划船的男孩(Goo Engine Demo)

    本文的目标

    本文的预期读者是:不熟悉图形学,熟悉前端,希望了解或系统学习 WebGL 的同学。

    本文不是 WebGL 的概述性文章,也不是完整详细的 WebGL 教程。本文只希望成为一篇供 WebGL 初学者使用的提纲。

    Canvas

    熟悉 Canvas 的同学都知道,Canvas 绘图先要获取绘图上下文:

    var context = canvas.getContext('2d'); 

    context上调用各种函数绘制图形,比如:

    // 绘制左上角为(0,0),右下角为(50, 50)的矩形
    context.fillRect(0, 0, 50, 50); 

    WebGL 同样需要获取绘图上下文:

    var gl = canvas.getContext('webgl'); // 或 experimental-webgl 

    但是接下来,如果想画一个矩形的话,就没这么简单了。实际上,Canvas 是浏览器封装好的一个绘图环境,在实际进行绘图操作时,浏览器仍然需要调用 OpenGL API。而 WebGL API 几乎就是 OpenGL API 未经封装,直接套了一层壳。

    Canvas 的更多知识,可以参考:

    矩阵变换

    三维模型,从文件中读出来,到绘制在 Canvas 中,经历了多次坐标变换。

    假设有一个最简单的模型:三角形,三个顶点分别为(-1,-1,0),(1,-1,0),(0,1,0)。这三个数据是从文件中读出来的,是三角形最初始的坐标(局部坐标)。如下图所示,右手坐标系。

     WebGL技术储备指南

    模型通常不会位于场景的原点,假设三角形的原点位于(0,0,-1)处,没有旋转或缩放,三个顶点分别为(-1,-1,-1),(1,-1,-1),(0,1,-1),即世界坐标。

     WebGL技术储备指南

    绘制三维场景必须指定一个观察者,假设观察者位于(0,0,1)处而且看向三角形,那么三个顶点相对于观察者的坐标为(-1,-1,-2),(1,-1,-2),(0,1,-2),即视图坐标。

     WebGL技术储备指南

    观察者的眼睛是一个点(这是透视投影的前提),水平视角和垂直视角都是90度,视野范围(目力所及)为[0,2]在Z轴上,观察者能够看到的区域是一个四棱台体。

     WebGL技术储备指南

    将四棱台体映射为标准立方体(CCV,中心为原点,边长为2,边与坐标轴平行)。顶点在 CCV 中的坐标,离它最终在 Canvas 中的坐标已经很接近了,如果把 CCV 的前表面看成 Canvas,那么最终三角形就画在图中橙色三角形的位置。

     WebGL技术储备指南

    上述变换是用矩阵来进行的。

    局部坐标 –(模型变换)-> 世界坐标 –(视图变换)-> 视图坐标 –(投影变换)–> CCV 坐标。

    以(0,1,0)为例,它的齐次向量为(0,0,1,1),上述变换的表示过程可以是:

     WebGL技术储备指南

    上面三个矩阵依次是透视投影矩阵,视图矩阵,模型矩阵。三个矩阵的值分别取决于:观察者的视角和视野距离,观察者在世界中的状态(位置和方向),模 型在世界中的状态(位置和方向)。计算的结果是(0,1,1,2),化成齐次坐标是(0,0.5,0.5,1),就是这个点在CCV中的坐标,那么 (0,0.5)就是在Canvas中的坐标(认为 Canvas 中心为原点,长宽都为2)。

    上面出现的(0,0,1,1)是(0,0,1)的齐次向量。齐次向量(x,y,z,w)可以代表三维向量(x,y,z)参与矩阵运算,通俗地说,w 分量为 1 时表示位置,w 分量为 0 时表示位移。

    WebGL 没有提供任何有关上述变换的机制,开发者需要亲自计算顶点的 CCV 坐标。

    关于坐标变换的更多内容,可以参考:

    比较复杂的是模型变换中的绕任意轴旋转(通常用四元数生成矩阵)和投影变换(上面的例子都没收涉及到)。

    关于绕任意轴旋转和四元数,可以参考:

    关于齐次向量的更多内容,可以参考。

    着色器和光栅化

    在 WebGL 中,开发者是通过着色器来完成上述变换的。着色器是运行在显卡中的程序,以 GLSL 语言编写,开发者需要将着色器的源码以字符串的形式传给 WebGL 上下文的相关函数。

    着色器有两种,顶点着色器和片元(像素)着色器,它们成对出现。顶点着色器任务是接收顶点的局部坐标,输出 CCV 坐标。CCV 坐标经过光栅化,转化为逐像素的数据,传给片元着色器。片元着色器的任务是确定每个片元的颜色。

    顶点着色器接收的是 attribute 变量,是逐顶点的数据。顶点着色器输出 varying 变量,也是逐顶点的。逐顶点的 varying 变量数据经过光栅化,成为逐片元的 varying 变量数据,输入片元着色器,片元着色器输出的结果就会显示在 Canvas 上。

     WebGL技术储备指南

    着色器功能很多,上述只是基本功能。大部分炫酷的效果都是依赖着色器的。如果你对着色器完全没有概念,可以试着理解下一节 hello world 程序中的着色器再回顾一下本节。

    关于更多着色器的知识,可以参考:

    程序

    这一节解释绘制上述场景(三角形)的 WebGL 程序。点这个链接,查看源代码,试图理解一下。这段代码出自WebGL Programming Guide,我作了一些修改以适应本文内容。如果一切正常,你看到的应该是下面这样:

     WebGL技术储备指南

    解释几点(如果之前不了解 WebGL ,多半会对下面的代码困惑,无碍):

    1. 字符串 VSHADER_SOURCE 和 FSHADER_SOURCE 是顶点着色器和片元着色器的源码。可以将着色器理解为有固定输入和输出格式的程序。开发者需要事先编写好着色器,再按照一定格式着色器发送绘图命令。

    2. Part2 将着色器源码编译为 program 对象:先分别编译顶点着色器和片元着色器,然后连接两者。如果编译源码错误,不会报 JS 错误,但可以通过其他 API(如gl.getShaderInfo等)获取编译状态信息(成功与否,如果出错的错误信息)。

      // 顶点着色器
      var vshader = gl.createShader(gl.VERTEX_SHADER);
      gl.shaderSource(vshader, VSHADER_SOURCE);
      gl.compileShader(vshader);
      // 同样新建 fshader
      var program = gl.createProgram();
      gl.attachShader(program, vshader);
      gl.attachShader(program, fshader);
      gl.linkProgram(program); 
    3. program 对象需要指定使用它,才可以向着色器传数据并绘制。复杂的程序通常有多个 program 对 象,(绘制每一帧时)通过切换 program 对象绘制场景中的不同效果。

      gl.useProgram(program); 
    4. Part3 向正在使用的着色器传入数据,包括逐顶点的 attribute 变量和全局的 uniform 变量。向着色器传入数据必须使用 ArrayBuffer,而不是常规的 JS 数组。

      var varray = new Float32Array([-1, -1, 0, 1, -1, 0, 0, 1, 0]) 
    5. WebGL API 对 ArrayBuffer 的操作(填充缓冲区,传入着色器,绘制等)都是通过 gl.ARRAY_BUFFER 进行的。在 WebGL 系统中又很多类似的情况。

      // 只有将 vbuffer 绑定到 gl.ARRAY_BUFFER,才可以填充数据
      gl.bindBuffer(gl.ARRAY_BUFFER, vbuffer);
      // 这里的意思是,向“绑定到 gl.ARRAY_BUFFER”的缓冲区中填充数据
      gl.bufferData(gl.ARRAY_BUFFER, varray, gl.STATIC_DRAW);
      // 获取 a_Position 变量在着色器程序中的位置,参考顶点着色器源码
      var aloc = gl.getAttribLocation(program, 'a_Position');
      // 将 gl.ARRAY_BUFFER 中的数据传入 aloc 表示的变量,即 a_Position
      gl.vertexAttribPointer(aloc, 3, gl.FLOAT, false, 0, 0);
      gl.enableVertexAttribArray(aloc); 
    6. 向着色器传入矩阵时,是按列存储的。可以比较一下 mmatrix 和矩阵变换一节中的模型矩阵(第 3 个)。

    7. 顶点着色器计算出的 gl_Position 就是 CCV 中的坐标,比如最上面的顶点(蓝色)的 gl_Position 化成齐次坐标就是(0,0.5,0.5,1)。

    8. 向顶点着色器传入的只是三个顶点的颜色值,而三角形表面的颜色渐变是由这三个颜色值内插出的。光栅化不仅会对 gl_Position 进行,还会对 varying 变量插值。

    9. gl.drawArrays()方法驱动缓冲区进行绘制,gl.TRIANGLES 指定绘制三角形,也可以改变参数绘制点、折线等等。

    关于 ArrayBuffer 的详细信息,可以参考:

    关于 gl.TRIANGLES 等其他绘制方式,可以参考下面这张图或这篇博文

     WebGL技术储备指南

    深度检测

    当两个表面重叠时,前面的模型会挡住后面的模型。比如这个例子,绘制了两个交叉的三角形( varray 和 carray 的长度变为 18,gl.drawArrays 最后一个参数变为 6)。为了简单,这个例子去掉了矩阵变换过程,直接向着色器传入 CCV 坐标。

     WebGL技术储备指南

     WebGL技术储备指南

    顶点着色器给出了 6 个顶点的 gl_Position ,经过光栅化,片元着色器获得了 2X 个片元(假设 X 为每个三角形的像素个数),每个片元都离散的 x,y 坐标值,还有 z 值。x,y 坐标就是三角形在 Canvas 上的坐标,但如果有两个具有相同 x,y 坐标的片元同时出现,那么 WebGL 就会取 z 坐标值较小的那个片元。

    在深度检测之前,必须在绘制前开启一个常量。否则,WebGL 就会按照在 varray 中定义的顺序绘制了,后面的会覆盖前面的。

    gl.enable(gl.DEPTH_TEST); 

    实际上,WebGL 的逻辑是这样的:依次处理片元,如果渲染缓冲区(这里就是 Canvas 了)的那个与当前片元对应的像素还没有绘制时,就把片元的颜色画到渲染缓冲区对应像素里,同时把片元的 z 值缓存在另一个深度缓冲区的相同位置;如果当前缓冲区的对应像素已经绘制过了,就去查看深度缓冲区中对应位置的 z 值,如果当前片元 z 值小,就重绘,否则就放弃当前片元。

    WebGL 的这套逻辑,对理解蒙版(后面会说到)有一些帮助。

    顶点索引

    gl.drawArrays()是按照顶点的顺序绘制的,而 gl.drawElements()可以令着色器以一个索引数组为顺序绘制顶点。比如这个例子

     WebGL技术储备指南

    这里画了两个三角形,但只用了 5 个顶点,有一个顶点被两个三角形共用。这时需要建立索引数组,数组的每个元素表示顶点的索引值。将数组填充至gl.ELEMENT_ARRAY,然后调用 gl.drawElements()。

    var iarray = new Uint8Array([0,1,2,2,3,4]);
    var ibuffer = gl.createBuffer(gl.ARRAY_BUFFER, ibuffer);
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibuffer);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, iarray, gl.STATIC_DRAW); 

    纹理

    attribute 变量不仅可以传递顶点的坐标,还可以传递其他任何逐顶点的数据。比如 HelloTriangle 程序把单个顶点的颜色传入了 a_Color,片元着色器收到 v_Color 后直接赋给 gl_FragmentColor,就决定了颜色。

    attribute 变量还可以帮助绘制纹理。绘制纹理的基本原理是,为每个顶点指定一个纹理坐标(在(0,0)与(1,1,)的正方形中),然后传入纹理对象。片元着色器拿 到的是对应片元的内插后的纹理坐标,就利用这个纹理坐标去纹理对象上取颜色,再画到片元上。内插后的纹理坐标很可能不恰好对应纹理上的某个像素,而是在几 个像素之间(因为通常的图片纹理也是离散),这时可能会通过周围几个像素的加权平均算出该像素的值(具体有若干种不同方法,可以参考)。

    比如这个例子

     WebGL技术储备指南

    纹理对象和缓冲区对象很类似:使用 gl 的 API 函数创建,需要绑定至常量 gl.ARRAY_BUFFER 和 gl.TEXTURE_2D ,都通过常量对象向其中填入图像和数据。不同的是,纹理对象在绑定时还需要激活一个纹理单元(此处的gl.TEXTURE0),而 WebGL 系统支持的纹理单元个数是很有限的(一般为 8 个)。

    var texture = gl.createTexture();
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, textureImage);
    var sloc = gl.getUniformLocation(program, 'u_Sampler');
    gl.uniform1i(sloc, 0); 

    片元着色器内声明了 sampler2D 类型的 uniform 变量,通过texture2D函数取样。

    precision mediump float;
    uniform sampler2D u_Sampler;
    varying vec2 v_TexCoord;
    void main() {
      gl_FragColor = texture2D(u_Sampler, v_TexCoord);
    }; 

    混合与蒙版

    透明效果是用混合机制完成的。混合机制与深度检测类似,也发生在试图向某个已填充的像素填充颜色时。深度检测通过比较z值来确定像素的颜色,而混合机制会将两种颜色混合。比如这个例子

     WebGL技术储备指南

    混合的顺序是按照绘制的顺序进行的,如果绘制的顺序有变化,混合的结果通常也不同。如果模型既有非透明表面又有透明表面,绘制透明表面时开启蒙版, 其目的是锁定深度缓冲区,因为半透明物体后面的物体还是可以看到的,如果不这样做,半透明物体后面的物体将会被深度检测机制排除。

    开启混合的代码如下。gl.blendFunc方法指定了混合的方式,这里的意思是,使用源(待混合)颜色的 α 值乘以源颜色,加上 1-[源颜色的 α]乘以目标颜色。

    gl.enable(gl.BLEND);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA); 

    所谓 α 值,就是颜色的第 4 个分量。

    var carray = new Float32Array([
      1,0,0,0.7,1,0,0,0.7,1,0,0,0.7,
      0,0,1,0.4,0,0,1,0.4,0,0,1,0.4
      ]); 

    浏览器的WebGL系统

    WebGL 系统各个组成部分在既定规则下互相配合。稍作梳理如下。

     WebGL技术储备指南

    这张图比较随意,箭头上的文字表示 API,箭头方向大致表现了数据的流动方向,不必深究。

    光照

    WebGL 没有为光照提供任何内置的方法,需要开发者在着色器中实现光照算法。

    光是有颜色的,模型也是有颜色的。在光照下,最终物体呈现的颜色是两者共同作用的结果。

    实现光照的方式是:将光照的数据(点光源的位置,平行光的方向,以及光的颜色和强度)作为 uniform 变量传入着色器中,将物体表面每个顶点处的法线作为 attribute 变量传入着色器,遵循光照规则,修订最终片元呈现的颜色。

    光照又分为逐顶点的和逐片元的,两者的区别是,将法线光线交角因素放在顶点着色器中考虑还是放在片元着色器中考虑。逐片元光照更加逼真,一个极端的例子是:

     WebGL技术储备指南

    此时,点光源在距离一个表面较近处,表面中央 A 处较亮,四周较暗。但是在逐顶点光照下,表面的颜色(的影响因子)是由顶点内插出来的,所以表面中央也会比较暗。而逐片元光照直接使用片元的位置和法线计算与点光源的交角,因此表面中央会比较亮。

    复杂模型

    复杂模型可能有包括子模型,子模型可能与父模型有相对运动。比如开着雨刮器的汽车,雨刮器的世界坐标是受父模型汽车,和自身的状态共同决定的。若要计算雨刮器某顶点的位置,需要用雨刮器相对汽车的模型矩阵乘上汽车的模型矩阵,再乘以顶点的局部坐标。

    复杂模型可能有很多表面,可能每个表面使用的着色器就不同。通常将模型拆解为组,使用相同着色器的表面为一组,先绘制同一组中的内容,然后切换着色器。每次切换着色器都要重新将缓冲区中的数据分配给着色器中相应变量。

    动画

    动画的原理就是快速地擦除和重绘。常用的方法是大名鼎鼎的 requestAnimationFrame 。不熟悉的同学,可以参考正美的介绍

    WebGL库

    目前最流行的 WebGL 库是 ThreeJS,很强大,官网代码

    调试工具

    比较成熟的 WebGL 调试工具是WebGL Inspector

    网络资源和书籍

    英文的关于 WebGL 的资源有很多,包括:

    国内最早的 WebGL 教程是由郝稼力翻译的,放在 hiwebgl 上,目前 hiwebgl 已经关闭,但教程还可以在这里找到。郝稼力目前运营着Lao3D

    国内已经出版的 WebGL 书籍有:

    来自: http://taobaofed.org/blog/2015/12/21/webgl-handbook/

    展开全文
  • WebGL技术学习之路

    千次阅读 2016-07-05 15:11:20
    相比其他前端技术WebGL最大的特点的就是学习曲线异常之陡,入门感觉比较难。另外在这方面的资料也非常少,一部分因为该技术出现的时间还比较晚,另外它和OpenGL这样成熟的技术类似,很多人熟悉了OpenGL之后并不再...
  • SuperMap WebGL技术

    2021-06-16 13:41:05
    1.图层加载 1.工作空间下单图层加载 ...var promise = viewer.scene.addS3MTilesLayerByScp(url,{name:name}); promise.then(function (map) { // 可在此处设置场景属性,添加属性查询等功能 },function (e) {
  • 内容来源:http://developer.51cto.com/art/201601/504553.htm根据运维系统的特点,运维人员可能并不熟悉建筑建模软件的使用,同时让运维人员使用建模软件来做...互联网技术的兴起极大地改变了我们的娱乐、生活和生产
  • webgl框架介绍以及webgl项目的技术选型问题

    千次阅读 多人点赞 2020-07-26 10:32:41
    废话部分 最近面试了很多公司,感慨颇多 技术选型是重中之重,应该是所有企业的共识,这不仅关于到...让我印象最深刻的就是前些天遇到一家专做交通规划的公司,选了一个不合适的技术栈全家桶,项目进行到中期整个技术
  • WebGL 图像处理技术

    2021-10-18 18:28:27
    为了在 WebGL 中绘制图像,我们需要使用纹理。类似于当渲染代替像素时,WebGL 会需要操作投影矩阵的坐标,WebGL 读取纹理时需要获取纹理坐标。纹理坐标范围是从 0.0 到 1.0。 因为我们仅需要绘制由两个三角形组成的...
  • 其中浏览器就是一个比较典型的例子,从最开始单纯的只是打开网页的工具,到现在得力于HTML5技术的逐渐成熟,Web App开始让浏览器变成一个平台级应用。在HTML5兼容性测试中取得了482分的高分当然,Web App能否成为...
  • 结合WebGL技术和具体的HTML5框架添加场景和制作热点数据,上传至服务器端完成发布.该技术成功应用于桂平市智慧旅游建设项目当中,实现了景区的全景虚拟漫游系统.通过该系统,用户可在线虚拟游览欣赏景区的景点风光,...
  • 基于webGL技术的3D库ThingJS支持天空盒技术实现。引用地图组件脚本之后地球相机参数就改变,需要校正天空盒。为什么偏偏是天空盒呢?这就得问一下,天空盒的原理是什么?OpenGL中天空盒的思想就是绘制一个大的立方体...
  • 尤其是HTML5/WebGL技术的发展更是在各个行业内引起颠覆性的变化,大家感受最深刻的可能是游戏、电商、O2O等和我们生活息息相关的行业,但这次我想讲一下不受普通人关注但又人人都离不开的建筑业在互联网大潮冲击下的...
  • G3D 是一款基于 WebGL 的 javascript 3D 绘图引擎。与其他的 WebGL 3D 引擎相比,G3D 是更加「纯粹」的渲染引擎,也就是说,它完全不依赖任何 DOM API,而是仅仅依赖一个 canvas 对象(或者类 canvas 对象)
  • 英文:cssdesignaward出处:设计达人链接:http://www.shejidaren.com/30-best-webgl-demo-examples.html网站开发人员通过 WebGL 技术可以实现一些超酷的 2D/3D 图形,令网站视觉提升一个档次,从而吸引访客继续关注...
  • 最近遇到一个问题,百思不得其解,最后发现是自己的操作流程出了问题,最后乱逛在这个技术专题里面找到了正确且详细的操作流程,然后问题得以解决。 遇到问题最大的原因是知识面广度不行,有的东西你没见过你是真...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 15,766
精华内容 6,306
关键字:

webgl技术