WebGL初步

hushhw 2015-01-20

1.概述

WebGL是一项利用JavaScriptAPI呈现3D电脑图形的技术，有别于过往需加装浏览器插件，通过WebGL的技术，只需要编写网页代码即可实现3D图像的展示。WebGL的规格尚在发展中，由非营利的KhronosGroup管理。WebGL基于OpenGLES2.0，提供了3D图像的程序接口。它使用HTML5Canvas并允许利用文档对象模型接口。可利用部分Javascript实现自动存储器管理。

目前，主流浏览器都原生支持WebGL。

一些Demo

如果看不了的话，可以试一下chrome浏览器。

IE的话要IE11以上才原生支持webgl。

firefox如果看不了的话，可尝试如下2种方案：

第1种方案

输入about:support

找到这句话：”因您的显卡驱动版本已屏蔽。尝试更新您的显卡驱动至版本8.15.10.2342或更新的版本。“，说明显卡驱动太旧，可尝试更新显卡驱动。

第2种方案

输入about:config

搜索webgl.force-enabled

改为webgl.force-enabled=true

这样可强制打开webgl

2.链接

初识WebGL

three.js

three.js例子

http://www.canvasdemos.com/很多关于2d,3d的demo

网络三维

hushhw

hushhw

相关推荐

Unity打包WebGL所遇到的坑！！！

WebGL打包过程可真是异常坎坷，开发过程中会有各种坑，大概总结了一下，记录下来。public Dictionary<string, string> data { get; set; }. 如果是按照上面这样写，恭喜你，打包出来的东西肯定报错，

unityd / 0评论 2020-06-28

webgl进阶之旋转的立方体

与其说是webgl，倒不如说是图形学，毕竟语言只是一个工具。用过three.js或者其他三维库来开发三维程序的都知道，对于标题所指，其实实现起来很简单，拿three.js来说，一段很简短的代码就能实现：。这里也感谢作者和其他开源工作者做出的贡献，因为他们的

oLaoJiang / 0评论 2020-04-25

WEBGl之THREEJS导入shp文件，生成三维模型

如果threejs可以导入shp文件，就可以呈现效果那是多么完美的事情啊！当然这是肯定的，那是我在经历的痛苦期，现在来分享我的甜品。有个偶然，一个QQ群的人，告诉我有个大神写了shp.js，可以读取线坐标，这才是我豁然开朗。之后，我就开始潜心，通读代码，已

ixshells / 0评论 2020-03-05

基于 H5与webGL 的低碳工业园区监控系统

低碳工业园区的建设与推广是我国推进工业低碳转型的重要举措，低碳工业园区能源与碳排放管控平台是低碳工业园区建设的关键环节。如何对园区内的企业的能源量进行采集、计量、碳排放核算，如何对能源消耗和碳排放进行实时动态监测等问题，涉及多个技术领域，专业性强。其数据不

TWaver可视化 / 0评论 2020-02-14

基于H5与webGL的 3d 电子围栏展示

现代工业化的推进在极大加速现代化进程的同时也带来的相应的安全隐患，在传统的可视化监控领域，一般都是基于 Web SCADA 的前端技术来实现 2D 可视化监控，本系统采用 Hightopo 的 HT for Web 产品来构造轻量化的 3D 可视化场景，该

ixshells / 0评论 2020-02-12

C# WPF 嵌入网页版WebGL油田三维可视化监控

最近做的一个项目，是一个油田三维可视化监控的场景编辑和监控的系统，和三维组态有些类似，不过主要用于油田上。效果如下图所示：。首先当然是上模型，设计人员跟进。一切进展的都很顺利。直到客户说，我们有一个WPF开发的桌面端程序，我们需要把你们的三维嵌入到桌面端。

teliduxing0 / 0评论 2020-01-14

C# WPF 嵌入网页版WebGL油田三维可视化监控

最近做的一个项目，是一个油田三维可视化监控的场景编辑和监控的系统，和三维组态有些类似，不过主要用于油田上。效果如下图所示：。首先当然是上模型，设计人员跟进。一切进展的都很顺利。直到客户说，我们有一个WPF开发的桌面端程序，我们需要把你们的三维嵌入到桌面端。

ixshells / 0评论 2020-01-14

Unity生成的WebGL如何在浏览器中运行

前言：以为在学完了COMP30019后，应该不会再接触Unity了，没想到之后实习让我去做把一个Unity项目转到WebGL，而关于Unity的WebGL资料很少，基本除了Unity的Manual就只能看别人零星的记录了。遇到了一堆问题，可能以后会也写在博

TWaver可视化 / 0评论 2020-01-11

基于HTML5 WebGL的工业化3D电子围栏

现代工业化的推进在极大加速现代化进程的同时也带来的相应的安全隐患，在传统的可视化监控领域，一般都是基于 Web SCADA 的前端技术来实现 2D 可视化监控，本系统采用 Hightopo 的 HT for Web 产品来构造轻量化的 3D 可视化场景，该

TWaver可视化 / 0评论 2020-01-09

基于 HTML5 + WebGL 的无人机 3D 可视化系统

近年来，无人机的发展越发迅速，既可民用于航拍，又可军用于侦察，涉及行业广泛，也被称为“会飞的照相机”。但作为军事使用，无人机的各项性能要求更加严格、重要。本系统则是通过Hightopo的HT for Web产品来搭建的一款 无人机 3D 可视化系统，通过对

UltraLAB / 0评论 2019-12-31

基于 HTML5 + WebGL 的无人机 3D 可视化系统

近年来，无人机的发展越发迅速，既可民用于航拍，又可军用于侦察，涉及行业广泛，也被称为“会飞的照相机”。但作为军事使用，无人机的各项性能要求更加严格、重要。本系统则是通过Hightopo的HT for Web产品来搭建的一款 无人机 3D 可视化系统，通过对

fengaid / 0评论 2019-12-30

基于 HTML5 WebGL 构建智能数字化城市 3D 全景

自 2011 年我国城镇化率首次突破 50% 以来，《新型城镇化发展规划》将智慧城市列为我国城市发展的三大目标之一，并提出到 2020 年，建成一批特色鲜明的智慧城市。截至现今，全国 95% 的副省级以上城市、76% 的地级以上城市，总计约 500 多个城

pythonclass / 0评论 2019-12-19

基于 HTML5 WebGL 构建智能数字化城市 3D 全景

自 2011 年我国城镇化率首次突破 50% 以来，《新型城镇化发展规划》将智慧城市列为我国城市发展的三大目标之一，并提出到 2020 年，建成一批特色鲜明的智慧城市。截至现今，全国 95% 的副省级以上城市、76% 的地级以上城市，总计约 500 多个城

swiftwwj / 0评论 2019-12-19

基于 H5 + WebGL 实现 3D 可视化地铁系统

自动巡检模式 -- 该模式下用户不需要任何操作，场景自动前进后退来巡查当前地铁站的场景。上述为自动巡检的漫游效果，场景自动进行前进旋转。ht.Default.loadObj(‘obj/metro.obj‘, ‘obj/metro.mtl‘, {. 上面通过

unityd / 0评论 2019-12-16

用shader实现流动的水面(webgl)

大多数资料都是基于opengl实现，过多关注点在渲染上面而不是水波的mesh实现上，让人没有看下去的欲望。有的就直接是照搬别人的博客，公式大段大段地搬，却没有自己的一丝见解，太过敷衍。代码不加注释，对前来学习者不太友好。针对webgl的实现，网上的资料太少

你好乔先生 / 0评论 2019-10-27

WebGL简易教程(十一)：纹理

‘ gl_Position = u_MvpMatrix * a_Position;\n‘ + // 设置顶点坐标。var currentAngle = [0.0, 0.0]; // 绕X轴Y轴的旋转角度

TWaver可视化 / 0评论 2019-10-19

基于HTML5的WebGL应用内存泄露分析

Adobe的Flex和微软的Silverlight/WPF本被业界寄予厚望，没想这哥俩如匆匆过客被老东家抛弃了，但他们还是推动了MVP和MVVM设计模式的普及，如今HTML5领域的KnockoutJS、Backbone.js、AngularJS、PureM

xueliangEmail / 0评论 2015-10-25

基于HTML5的WebGL呈现A星算法的3D可视化

实现代码比较容易一百多行，不过算法核心在astar.js了，界面核心在ht.js里面了，我只需要构建网格信息，只需监听用户点击，然后调用astar.js进行最短路径计算，将结果通过动画的方式呈现出走动的过程，所有代码如下：。w = 40; m = 20;

wty00 / 0评论 2015-11-18

基于 HTML5 WebGL 的 3D SCADA 主站系统

3D 的模拟一般需要鹰眼来辅助的，这样找产品以及整个空间的概括会比较明确，在这个例子中我也加了，这篇文章就算是我对这次项目的一个总结吧。进入正题，整个例子用了两百多行的代码来实现的，这就是我喜欢用HT的原因，能够快速开发。现在 Web3d 技术兴起，大体就

oLaoJiang / 0评论 2018-02-05

基于 HTML5 WebGL 的 3D 场景中的灯光效果

构建 3D 的场景除了创建模型，对模型设置颜色和贴图外，还需要有灯光的效果才能更逼真的反映真实世界的场景。这个例子我觉得既美观又代表性很强，所以拿出来给大家分享一下。上面场景中主要的知识点包括：3D 灯光以及 3D 模型的流动。添加灯光场景中出现的灯光，除

haocxy / 0评论 2018-01-02

基于 HTML5 WebGL 的 3D 服务器与客户端的通信

3D 机房方面的模拟一般都是需要鹰眼来辅助的，这样找产品以及整个空间的概括会比较明确，在这个例子中我也加了，这篇文章就算是我对这次项目的一个总结吧。对了，这个例子我是参考一个 DEMO 来完成的，和示例中的显示有些不同，大家莫惊奇。HT 就是基于 HTML

pythonclass / 0评论 2017-12-28

基于 HTML5 WebGL 的 3D “弹力”布局

分子力，又称分子间作用力、范得瓦耳斯力，是指分子间的相互作用。当二分子相距较远时，主要表现为吸引力，这种力主要来源于一个分子被另一个分子随时间迅速变化的电偶极矩所极化而引起的相互作用；当二分子非常接近时，则排斥力成为主要的，这是由于各分子的外层电子云开始重

前端后端学习之路 / 0评论 2017-11-22

基于HTML5的WebGL经典3D虚拟机房漫游动画

第一人称在 3D 中的用法要参考第一人称在射击游戏中的使用，第一人称射击游戏是以第一人称视角为中心围绕枪和其他武器为基础的视频游戏类型;也就是说，玩家通过主角的眼睛来体验动作。自从流派开始以来，先进的3D和伪 3D图形已经对硬件发展提出了挑战，而多人游戏已

oLaoJiang / 0评论 2017-11-14

根据矩阵变化实现基于 HTML5 的 WebGL 3D 自动布局

矩阵的主要应用是表示线性变换，即f= 4x等线性函数的推广。两个变换矩阵的乘积是表示两个变换组成的矩阵。如果矩阵是方形的，可以通过计算其行列式来推断它的一些性质。例如，当且仅当其行列式不为零时，方阵具有相反的。从矩阵的特征值和特征向量中可以看到线性变换的几

运维工程师日记 / 0评论 2017-11-13

玩转 HTML5 下 WebGL 的 3D 模型交并补

建设性的立体几何具有许多实际用途，它用于需要简单几何对象的情况下，或者数学精度很重要的地方，几乎所有的工程 CAD 软件包都使用 CSG。CSG 对象可以用二叉树表示，其中叶子表示基元，节点表示操作。CSG 提供的模型或表面看起来很复杂，但实际上不过是巧妙

owhile / 0评论 2017-11-09

基于HTML5 Canvas WebGL制作分离摩托车

这里我们因为是示例，所以将两种方法都用上了：。treeView = new ht.widget.TreeView; //树组件。其中 toolbar 中的 item 也是遵守 HT 设置规则的，item 是一个数组，数组中每一个元素都是toolbar上的一

Abudula / 0评论 2017-11-06

基于HTML5 WebGL实现 json工控风机叶轮旋转

突然有个想法，如果能把一些用到不同的知识点放到同一个界面上，并且放到一个盒子里，这样我如果要看什么东西就可以很直接显示出来，而且这个盒子一定要能打开。我用HT实现了我的想法，代码一百多行，这么少的代码能实现这种效果我觉得还是牛的。pumpGV.getCan

ilovedich / 0评论 2017-10-26

基于HTML5及WebGL开发的2D3D第一人称漫游进行碰撞检测

为了实现一个基于HTML5的场景小游戏，我采用了HT for Web来实现，短短200行代码，我就能实现用“第一人称”来操作前进后退上下左右，并且实现了碰撞检测。我的想法是先把场景布局好，代码如下：。这几个都是自定义的函数，createHT为描绘HT形状的

oLaoJiang / 0评论 2017-10-23

WebGL 动画

有一种动画书，就是快速翻动就可以看见里面的内容运动起来了。电脑动画和这个差不多，通过在动画区域内用一张新的图片代替旧的图片，并快速持续的改变，根据视觉暂留现象就在我们的大脑中形成了动画。我们先用代码把第一段话翻译一下吧：。首先，我们通过init方法绑定到b

TWaver可视化 / 0评论 2017-09-14

基于HTML5和WebGL的3D网络拓扑结构图

现在，3D模型已经用于各种不同的领域。它们可以在三维建模工具中使用或者单独使用。为了容易形成动画，通常在模型中加入一些额外的数据，例如，一些人类或者动物的三维模型中有完整的骨骼系统，这样运动时看起来会更加真实，并且可以通过关节与骨骼控制运动。

前端后端学习之路 / 0评论 2017-10-17

基于 HTML5 的 WebGL 3D 智能楼宇监控系统

智能监控的领域已经涉及到了各大领域，工控、电信、电力、轨道交通、航天航空等等，为了减少人员的消耗，监控系统必不可少。智能监控系统在 3D 中应用比较广泛的除了 3D 机房以外，我觉得就是楼宇的监控了，可是之前做了很多关于机房方面的 Demo，所以最终决定做

前端后端学习之路 / 0评论 2018-04-23

WebGL 3D 工业隧道监控实战

监控隧道内的车道堵塞情况、隧道内的车祸现场，在隧道中显示当前车祸位置并在隧道口给与提示等等功能都是非常有必要的。这个隧道 Demo 的主要内容包括：照明、风机、车道指示灯、交通信号灯、情报板、消防、火灾报警、车行横洞、风向仪、微波车检、隧道紧急逃生出口的控

hushhw / 0评论 2018-03-26

WebGL three.js学习笔记之阴影与实现物体的动画效果

<!DOCTYPE html>. border: none;cursor: pointer;width: 100%;height: 850px;background-color: #333333;this.rotationSpeed = 0.0

前端后端学习之路 / 0评论 2019-04-25

WebGL学习教程之Three.js学习笔记(第一篇)

WebGL是一种3D绘图协议，它把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染。WebGL技术标准免去了开发网页专

百度地图开放平台 / 0评论 2019-04-25

分享一个WebGL开发的网站-用JavaScript + WebGL开发3D模型

人民心目中的程序员是这样的：坐在电脑面前噼里啪啦敲着键盘，运键如飞。今天我要给大家分享一个用WebGL开发的网站，感兴趣的朋友可以在Chrome开发者工具里调试它的源码来学习WebGL。借助WebGL，前端开发人员可以开发出非常专业的3D场景和模型。今天我

yanyan00 / 0评论 2018-09-04

WebGL 绘制Line的bug(三)

上一篇已经讲述了通过面模拟线条时候，每一个顶点的顶点数据包括：端点坐标、偏移量、前一个端点坐标、后一个端点坐标，当然如果我们通过索引的方式来绘制的话，还包括索引数组，下面的代码通过传递一组线条的端点数组来创建上述相关数据：。var count = len

TWaver可视化 / 0评论 2018-08-29

WebGL 绘制Line的bug(二)

上一篇文章简单介绍了WebGL绘制Line的bug，这一篇文章会讲述解决这个问题的work around。因此要绘制一条线段，则需要六个顶点，两个三角形；当时从上图中，可以看出有些顶点是共享，实际上只需要四个顶点，然后通过索引的方式绘制两个三角形，相信熟悉

wty00 / 0评论 2018-07-10

WebGL 绘制Line的bug（一）

熟悉WebGL的同学都知道，WebGL绘制模式有点、线、面三种；通过点的绘制可以实现粒子系统等，通过线可以绘制一些连线关系；面就强大了，通过面，我们可以绘制我们想绘制的所有的三维对象。一切看起来都很完美，perfect。然而，不幸的是，WebGL在绘制线条

TWaver可视化 / 0评论 2018-06-29

什么是WebGL,它有什么优点?

WebGL是一种 3D 绘图标准，这种绘图技术标准允许把 JavaScript 和 OpenGL ES 2.0 结合在一起，通过增加 OpenGL ES 2.0 的一个 JavaScript 绑定， WebGL 可以为 HTML5 Canvas 提供硬件

前端后端学习之路 / 0评论 2018-06-20

WebGL 着色器偏导数dFdx和dFdy介绍

本文适合对webgl、计算机图形学、前端可视化感兴趣的读者。偏导数函数是片元着色器中的一个用于计算任何变量基于屏幕空间坐标的变化率的指令（函数）。在WebGL中，使用的是dFdx和dFdy，还有另外一个函数fwidth = dFdx + dFdy。偏导数计

yanyan00 / 0评论 2019-07-06

WebGL three.js学习笔记 使用粒子系统模拟时空隧道（虫洞）

第一种是在场景中使用很多歌THREE.Sprite创建单个的精灵，这样创建的每一个精灵体，我们都可以单独对它们进行操作，同时我们也可以用一个THREE.Group把他们放在一起，整合起来一起操作。具有很高的自主性。但同时也是需要大量的性能支持与开发上的不便

百度地图开放平台 / 0评论 2019-07-01

WebGL three.js学习笔记 阴影与实现物体的动画

实现物体的旋转、跳动以及场景阴影的开启与优化本程序将创建一个场景，并实现物体的动画效果运行的结果如图：

百度地图开放平台 / 0评论 2019-07-01

WebGL three.js学习笔记 创建three.js代码的基本框架

WebGL学习----Three.js学习笔记webgl介绍WebGL是一种3D绘图协议，它把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canv

unityd / 0评论 2019-07-01

招聘webgl工程师，或者有意向往GL方向发展也可以

羡慕大牛扎实广阔的，自己却苦于没有平台和机会?真幸运我们相遇了——。塔木科技的产品：云深智能SaaS， 致力于帮助家居建材行业，实现新零售购物。我们的开发方向涵盖包括AR，VR，360全景模型等技术领域。此外，你还将参与到我们智能门店的开发中。在美丽的高新

黄飞鸿 / 0评论 2019-07-01

基于WebGL架构的3D可视化平台ThingJS—让粮仓“智慧”升级

首先我们先了解一下基于WebGL架构的3D可视化平台——ThingJS是什么？ThingJS是优锘科技开发的一套面向物联网应用的在线3D可视化应用开发及运营PaaS平台，以“ ThingJS云视PaaS服务”形式面向广大物联网企业提供全生命周期在线3D可视

hushhw / 0评论 2019-07-01

WebGL 纹理颜色原理

导语WebGL绘制图像时，往着色器中传入颜色信息就可以给图形绘制出相应的颜色，现在已经知道顶点着色器和片段着色器一起决定着向颜色缓冲区写入颜色信息并最终呈现出来，那么这个过程是什么样，如果图形的颜色需要用现有图片来渲染那么又该如何操作？可以将颜色缓存区看成

unityd / 0评论 2019-06-30

基于WebGL架构的ThingJS可视化平台—城市地下管线3D可视化

前言城市管网是城市最重要的公共基础设施之一，与城市的发展和居民日常生活息息相关。根据不同的市政建设，管网分供水、排污、供暖、通信、电力等多种类别，其广泛分布遍及地下。随着城市发展建设所衍生出空间分布复杂，变化大，种类繁多等问题，可视化管理是未来发展最好的解

黄飞鸿 / 0评论 2019-06-30

基于WebGL架构的3D可视化平台—平面图导航（一）

利用CampusBuilder来搭建自己的虚拟世界过程有这样一个问题:如何快速聚焦到虚拟场景的某一位置。当然我们可以创建几个按钮对应查找我们需要去的位置（参照物）并聚焦，但是按钮并不是很炫酷也不能很好的反馈给我们一些信息。接下来我们就用平面导航图来解决这一

unityd / 0评论 2019-06-30

分享一个WebGL开发的网站-用JavaScript + WebGL开发3D模型

人民心目中的程序员是这样的：坐在电脑面前噼里啪啦敲着键盘，运键如飞。现实中程序员是这样的：编码5分钟，调试两小时。今天我要给大家分享一个用WebGL开发的网站，感兴趣的朋友可以在Chrome开发者工具里调试它的源码来学习WebGL。借助WebGL，前端开发

wty00 / 0评论 2018-09-04

WebGL 绘制Line的bug(二)

基本思路上一篇文章简单介绍了WebGL绘制Line的bug，这一篇文章会讲述解决这个问题的work around。两个三角形模拟的线段因此要绘制一条线段，则需要六个顶点，两个三角形；当时从上图中，可以看出有些顶点是共享，实际上只需要四个顶点，然后通过索引的

hushhw / 0评论 2018-07-10