WebGL 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
WebGL 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
WebGL 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !
授权协议 未知
开发语言
操作系统 跨平台
软件类型 开源软件
开源组织
地区 不详
投 递 者 红薯
适用人群 未知
收录时间 2011-03-04

软件简介

WebGL是一种3D绘图标准,这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,WebGL可以为HTML5 Canvas提供硬件3D加速渲染,这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了,还能创建复杂的导航和数据视觉化。显然,WebGL技术标准免去了开发网页专用渲染插件的麻烦,可被用于创建具有复杂3D结构的网站页面,甚至可以用来设计3D网页游戏等等。

展开阅读全文

评论 (0)

加载中
更多评论
发表了资讯
2017/03/20 15:14

Google Chrome 悄悄升级 WebGL 2.0 标准

Google Chrome 悄悄升级了 WebGL 2.0 标准,可以借助新一代显卡,提供先进的 3D 影像,还可以使用 WebGL 2.0 获得更快的 3D 渲染。 其实早在 Chrome 56(今年一月底更新)的时候,Google 就已经加入了对 WebGL 2.0 的支持,但当时并没有特别介绍,但在最近的一篇博客文章里对其做了特别的描述。WebGL 是一套让网页靠显卡加速的可以显示 3D 画面的 JavaScript API。 WebGL 2.0 目前适用于 Windows, macOS, 和 Linux 上具有现代图...

18
26
发表了资讯
2014/08/12 00:00

180 度大转弯 微软宣布加入 WebGL 工作组

8月12日消息:微软在日前宣布加入Khronos Group和WebGL工作组,这让很多人感到诧异,因为这在几年前是根本无法想像的事。 WebGL是基于OpenGL ES和Javascript的一种浏览器3D显示技术规范,而微软在此之前一直是排斥WebGL和OpenGL的,理由 是可能会在安全性方面存在隐患。直到不久前微软才表示支持OpenGL,现在更进一步加入了Khronos Group和WebGL工作组。 Khronos Group Khronos Group是由其成员所提供之基金支持的行业协会,专注...

26
9
发表了资讯
2013/01/23 00:00

Android Chrome Beta 开始支持 WebGL

早前我们提到过 Google 肯定会把 WebGL 带到 Android Chrome 上的,这一天终于来了。在本月 10 日,Google Play 上出现了新的 Chrome Beta 应用,这一版本的 Beta 是基于 Chrome 25 的代码的,相对于目前的稳定版的 Chrome 18,可谓是有了巨大的提升,除此之外最吸引人的则是从该版本开始,Android Chrome 将开始支持 WebGL! 但是测试版毕竟还是测试版,想要开启 WebGL 支持还真是有些麻烦。著名的 WebGL 开发者 Brandon Jone...

3
4
发表了资讯
2012/03/14 00:00

八大疯狂的 HTML5 Canvas 及 WebGL 动画效果

HTML5、WebGL和JavaScript改变了长久以来的动画制作行业。在过去的几年中,我们想要制作卓越的网页动画只能使用Flash和Java Applet。而现在,使用脚本语言和渲染器在浏览器中实现疯狂的动画效果已经成为可能。究其原因,大概有以下几点: 处理器的性能越来越高。我们的电脑已经有足够的强大的能力去渲染最为复杂的动画效果。 现在浏览器和web技术的不断发展。浏览器如Firefox、Chrome、Safari和IE10,web技术如Canvas、SVG和Web...

8
48
发表了资讯
2012/03/09 00:00

15 个可在 Chrome 浏览器上体验 WebGL 的例子

本文中 15 个 WebGL 的例子仅限在 Chrome 浏览器中体验,其他浏览器或许可以,但表现不佳。 GLOW – Complicated Aquarium Barry Martin’s Hopalong Orbits Visualizer WebGL HelloRacer Materials Cars WebGL Water Lights Red Shooting Hood Surface Nouvelle Vague by ultranoir VideoFX WebGL Bookcase ROME Tankworld Source: http://designmodo.com/webgl-chrome/...

23
59
发表了资讯
2012/01/27 00:00

索爱宣布将 Android 4.0 上的 WebGL 后端实现开源

在去年11月的时候,我们报道了索爱成为世界上第一个正式支持WebGL的手机厂商。目前,作为下一步跟进,索爱正在将这一支持延续到Android 4.0上,而且是完全开源的。1月25日,索爱高级软件架构师Anders Edenbrandt在开发者频道的网站上对此进行了详细的说明。 自从索爱宣布将在Android 2.3系统上添加WebGL支持之后,就收到了来自于开发者社区的很多反馈,其中不少都非常鼓舞人心;但是与此同时,索爱也收到了很多评论说WebGL需 要...

0
2
发表了资讯
2011/11/30 00:00

谷歌WebGL浏览器图形技术Angle现雏形

Angle是Google为Windows计算机开发的图形项目,目前已通过一个重要认证里程碑,可以提高某些浏览器的图形识别。谷歌于2010年3月推出Angle,是WebGL的图形辅助工具,借用新生的3D图形技术提升浏览器体验。昨日,谷歌程序员Vangelis Kokkevis宣布,Angle已经通过OpenGL 2.0的认证测试套件。 WebGL提供了级别较低的图形界面,遵循MAC OS X,Linux的,iOS以及Android的OpenGL标准;但目前推广仍不及OpenGL。Windows自带微软标准的D...

7
7
发表了资讯
2011/11/28 00:00

Lights:奇妙的 WebGL 3D 体验

来自 @雷锋网 投稿: 了解WebGL技术的人应该都知道,WebGL是一种3D绘图标准,通过该技术标准Web开发人员可以借助系统显卡在浏览器里更流畅地展示3D场景和模型,创建复杂的导航和数据视觉化。而Lights就是这样一款拥有强大WebGL显示功能的产品,无需插件便可在支持WebGL的浏览器(如 Chrome、Safari和Firefox等)中运行自如,给用户创造一场奇妙的视听盛宴。 进入Lights网站,便可看到一条黄色“亮线”随着鼠标点击位置的变化而左...

4
13
发表了资讯
2011/10/26 00:00

Google 用 WebGL 打造 Bookcase 3D 书架

Google开发了一个叫做Bookcase的3D书架网页应用,可展示超过一万本图书,被分了28个分类,用鼠标即可让书架一直滚动下去,找到你想要的书。整个网页的3D效果赞到爆。在你选择了一本书之后,该应用会直接引导你到Google Books在线阅读。选取图书时还会显示出一个二维码,利用手机扫描也可直接快速在手机上阅读。 Bookcase的效果如果将来移植到Android平板上就爽了。 目前你需要一个支持WebGL的浏览器(Chrome或Firefox 8+)和兼容...

14
8
发表了资讯
2011/10/14 00:00

桌面版Google Maps试用WebGL替换flash

如果你喜欢Google Maps for Android那远比桌面版流畅的界面,那么现在是时候尝试新事务了。如果你使用Chrome 14+或Firefox 8+浏览器,且显卡支持WebGL标准,那么现在打开Google Maps即可在左侧看到一个提示:“Want to try something new?”,点击之后Google Maps就不会再使用flash技术来显示街景了,而换用WebGL(Google称其为MapGL),且可显示出跟Android手机上一样的3D地图界面。 使用WebGL之后,地图的性能会大大提升,进入...

6
3
发表了资讯
2011/09/29 00:00

Google Chrome AngryBirds电视广告提及WebGL

上周Google为Chrome浏览器制作了一段视频,主要是以《愤怒的小鸟》为背景,Rovio公司的三位高管分别亲自配音出演,另外还为他们三位新制作了三只可爱的小鸟。 虽然小编之前第一时间就看过了这个视频,但考虑到这不是什么Demo也不是什么技术或者业界文章,也没有发布。不过今天得到的消息是,这个视频已经登陆了美国各大国家级电视网络,而且Khronos官网都兴致勃勃的专门写了一条新闻,还兴奋的叫道“里面提到了WebGL,还是两次!...

3
2
发表了资讯
2011/06/21 00:00

Mozilla 出声捍卫 WebGL 安全问题

据国外媒体报道,Mozilla日前回应微软就WebGL安全性问题提出的质疑,指出微软本身配合自己的Silverlight浏览器插件使用3D交互界 面技术就意味着其已经接受了一样的风险。WebGL是Khronos Group管理的新标准,网络程序员可以在网络浏览器内展示3D图像,而其经由的界 面则将Android和iOS设备使用的OpenGL ES 2.0标准做了镜像。 WebGL为虚拟世界和图像丰富的游戏等的网上推广提供了可能,并已经用于Mozilla的火狐和谷歌的Chrome浏览...

5
3
发表了资讯
2011/06/17 00:00

微软以安全为由拒绝支持WebGL

IE9改进了IE浏览器的标准支持,IE10则继续走在这条道路上,增加了许多新标准特性。但微软有一样东西没有碰,那就是在浏览器中实现3D的新技术WebGL,它所用的API是基于OpenGL API。 微软安全工程师在博客上解释了他们为什么不采用WebGL:担心安全。 微软指出,WebGL暴露了太多敏感的、拥有优先权的、未强化安全的代码,容易遭受DDoS之类的攻击。视频硬件和视频驱动一般只利用相对受信任的代码, 而显示驱动通常bug很多,很不稳定...

36
2
发表了资讯
2011/05/11 00:00

WebGL存在严重的安全漏洞

HTML5中的WebGL技术已在Firefox和Chrome等浏览器中实现,并被默认开启,但这实际上给浏览器带来了极大的安全隐患。问题根源在于, 大多显卡以及显卡驱动在设计时并不考虑安全问题,而将相关安全问题交由操作系统完成。但浏览器沙盒跳过了这一环节默认WebGL可以被安全执行,这会使脚 本取得跨域名的执行权限,甚至取得访问本地文件的权限。 安全专家建议,用户应该在浏览器中关闭WebGL,直到WebGL标准作出相应修正解决这一安全问...

2
1
发表了资讯
2011/03/04 00:00

Khronos发布WebGL标准规范 1.0

The Khronos Group在2011游戏开发者大会上发布了WebGL标准规范 R 1.0(中文), 支持WebGL的浏览器不借助任何插件便可提供硬件图形加速从而提供高质量的3D体验。 目前WebGL标准已经获得了业界大佬们的支持: Apple (Mac OS Safari nightly builds), Google (Chrome9.0), Mozilla (Firefox4.0 beta)和Opera (preview build)。 WebGL定义了Javascript 和openGL ES 2.0的结合标准,从而让浏览器在提供OpenGL和OpenGL ES 图形接口的平...

0
1
发表了资讯
2011/03/04 00:00

基于Web的3D绘图标准 —— WebGL发布1.0版本

Khronos 组织在游戏开发者大会发布了 WebGL 规范 1.0 正式版本,该版本带来了全新的 OpenGL ES 2.0,使得浏览器可通过 HTML5 和 JavaScript 进行识别,这表明 WebGL 将逐渐进入我们的视野。 WebGL 是一种3D绘图标准,这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,WebGL可以为HTML5 Canvas提供硬件3D加速渲染,这样Web开发人员就可以借助系统显卡来在浏览器里更流畅...

6
3
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表于大前端专区
2019/09/17 10:22

WebGL坐标系

WebGL使支持HTML<canvas>标签的浏览器不安装任何插件,便可以使用基于OpenGL ES 2.0的API在canvas中进行3D渲染。WebGL程序由js控制代码和计算机的图形处理单元(GPU,Graphics Processing Unit)中执行的渲染代码(shader code)组成。webgl元素可以和其他HTML元素混合,并且会和页面的其他部分或页面背景相合成。 需要理解的几个概念 canvas: 画布 vertex shader: 顶点着色器,用来存储图像的位置相关信息,如坐标、大小等 fragm...

0
0
发表了博客
2019/05/31 19:23

WebGL第一步

什么是WebGL? WebGL使用了GLSL ES(OpenGL ES)着色器语言,通过配合调用js相关的绘制接口来实现3D效果。 采用页面中的<canvas>元素来定义绘图区域,canvas支持三维图形的绘制,但它不直接提供绘图方法,而是提供一种叫上下文(context)机制来绘制图形。 绘制流程 获取画布canvas和3D绘制上下文 1 var canvas = document.getElementById('canvas'); 2 var gl = canvas.getContext('webgl'); 具体的参数可以参考这里:https://dev...

0
0
发表了博客
2018/10/13 18:24

webgl优化

浏览器支持: Mozilla Firefox 42,Google Chrome 46,Apple Safari 9.0,MS Internet Explorer 11,MS Edge 13 Safari不支持全屏 Chrome需要大量内存解析js代码,可能导致内存不足 IE11号称支持,但是太慢,导致webgl基本不可用 减小发布包的大小 尝试发布空场景,发布文件的全部大小接近6M。。太大了。其中js代码文件xxx.jsgz4.6M。。 优化png文件之类手段并不能减少发布包大小,因为unity最后实际使用的是自己的内部格式。 删除没...

0
0
发表了博客
2018/04/26 23:48

webgl helloworld

之前的webgl 初识1, 初识2 已经介绍了webgl的基本概念,工作原理. 没有理解的自己yy. 现呈上例子一枚 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>helloworld</title> 6 7 <script id="2d-vertex-shader" type="notjs"> 8 attribute vec4 a_position; 9 attribute vec2 a_texCoord; 10 varying vec2 v_texCoord; 11...

0
0
发表于游戏开发专区
2015/07/13 21:25

WebGL笔记

o3djs 1、google的开源项目,将o3d插件用js实现,成为webgl的js框架 2、需要将dae格式转换成json格式,然后再加载,google提供了开源转换工具,有小问题,但可解决。 3、加载官方提供的例子没问题,都是小场景 4、接口丰富,提供绘制线面以及各种三维体的接口,提供各种事件接口,开发复杂,难度大 5、api和o3d插件相同,因此不支持webgl的ie理论上可使用o3d插件兼容 6、因为之前作为一个浏览器插件的js接口,初始化流程让人感觉...

0
0
发表了博客
2020/11/28 01:04

如何启用WebGL

在支持mono-design的过程中,还是有些用户不是很清楚如何启动WebGL,尤其是在XP的环境下,所以简单总结了下,WebGL在主流的浏览器上如何设置,但是对于IE没有详细介绍,由于IE11才支持WebGL,IE6-10只能使用其他办法,所以后期用单独一篇介绍IE的情况 要运行WebGL,必须有一个支持它的浏览器。先来看看在桌面平台上有哪些设备和平台已经支持WebGL了 Google Chrome 9及以上版本 Mozilla Firefox 4以及上版本 Safari 5.1及以上版本...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表了问答
2016/05/24 15:58

Three.js渲染的全景视频在移动端无法播放的问题

用HTML5的video标签播放的MP4格式的全景视频文件,参考的是Three.js的示例webgl_video_panorama_equirectangular.html。上传到服务器上pc端可以看到,移动端看不到,移动端用chrome播放也不行,没有任何反应。

3
0
发表了问答
2017/03/22 21:14

请问一下,我想把dwg文件在threejs中显示,怎么做呢??

我看到可以将dwg文件转换为json格式,请问是怎么用的啊?

2
0
2019/06/28 14:14

为什么做webgl开发的人这么少?

webgl一般运用在什么行业比较多?为什么那么少人在做这个?

3
0
发表了问答
2016/02/26 18:15

使用Threejs绘制粒子,为什么最终只有一个点出现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> *{ margin:0; padding:0;} </style> <script src="build/three.js"></script> <script src="build/dat.gui.min.js"></script> <s...

3
0
发表了问答
2012/08/07 09:26

Three.JS OBJ转化为JSON 的导入问题

我写了一个Three.js,使用Maya导出了一个OBJ的三维模型文件,使用Three.js默认给出的转换脚本使OBJ转换为JS的JSON文件,转换代码 convert_obj_three.py -i model.obj -o model.js 编写了一个页面 装载了Three.js,并创建场景摄像机等,现在的问题是我要jsonloader.load就假死在那里没有反应,比较关键的是我不清楚jsonloader.load的用法是什么,代码如下 问题代码 function initObject_JS() {   /* Show model */   var json...

3
3
发表了问答
2013/12/30 14:42

【经验分享】这个牛逼的网站是如何用WebGL实现超炫3D效果的?

前几天,@洋葱头 发的那个牛逼的网站《月熊志》,赢在了视觉设计和互动效果上。今天,给大家分享一下它里面的一个重要技术运用——WebGL实现3D月熊建模。网址是这个:http://moonbear.animalsasia.org/ie/。大家可以先进去看看。下面切入正题: 翻开月熊志的第一本书,首先映入眼帘的就是一只可爱的月熊——Jasper。它是贯穿月熊志的主角,在这页中可以看到月熊及场景是3D的并且是无插件的,那么它是如何被活灵活现的搬到网页中...

2
12
发表了问答
2016/10/19 11:37

web三维物体(三维模型obj)展示

实现网页加载本地3D模型程序(obj),实现物品的3D显示,并且能放大缩小及旋转查看功能

2
0
发表了问答
2016/09/14 14:45

如何用Canvas,webgl实现图片中的从影效果

需求是做一个这种效果的游戏,求各位大神支招!

1
0
发表了问答
2016/08/15 22:53

在javascript中如何使用new

请问我像这样写 var DetectCollision = function () { //被检测的物体 this.detectArray = []; this.movingCube = function(){ var geometry = new THREE.SphereGeometry(0.5); var cube = new THREE.Mesh(geometry); cube.visible = false; return cube; }; ...

1
0
发表了问答
2016/08/11 10:22

threejs碰撞检测

用threejs做检测,我不想将碰撞检测函数写在逐帧渲染函数里面,于是我想按照下面这样进行碰撞检测 orbitControls.addEventListener("change", collision, false); 碰撞检测的函数是这个 function collision(collisionArray, Movingcube, camera, orbitControls){ var offset = new THREE.Vector3(); //获取到底部cube的中心点坐标 var originPoint = Movingcube.position.clone(); for(var...

1
3
发表了问答
2016/03/14 14:54

three.js中如何对3D物体的点击事件监听

在three.js中如何监听一个3维空间的物体是否被点击了,已经如何对3D物体的都一个面进行点击的监听呢?求大侠

4
1
发表了问答
2016/03/14 12:46

HTML5 + WebGL打造的无插件纯web 3D机房(第三季新增资产容量管理、动环监控等)

@MonoLog 你好,想跟你请教个问题: HTML5 + WebGL打造的无插件纯web 3D机房(第三季新增资产容量管理、动环监控等) 可否把这个代码发给小弟一份,小弟好好学习学习670717@qq.com

2
1
发表了问答
2016/01/26 13:39

请问这段代码是什么意思啊??希望能详细点

2
0
发表了问答
2014/03/29 21:30

html5 webGL 中给矩形和圆形放上纹理贴图

Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': the cross-origin image at file:///C:/Users/menkeyDyvh/Downloads/webGL/png1.png may not be loaded. 这个是控制台报的错误 有没有人知道怎么解决? 这个图片要怎么贴图上去渲染? 最好能说一下圆形和正方形贴图的原理...

1
0
发表了问答
2015/06/15 11:45

three.js的问题

@抢小孩糖吃 你好,想跟你请教个问题:我们现在需要运用web3d。实现用户DIY家居产品。实现沙发的拼装和沙发布料的选择。请问three.js能够实现吗?有没有相关的文章?谢谢

5
0
发表了问答
2013/12/27 11:37

【开发教程】HTML5网页内的视频拼图特效-源码吐血分享

前几天那谁发布的《月熊志》那个网站,我对里面的视频拼图这个效果很感兴趣。琢磨好几天,终于搞定了,并且知道是怎么做出来的了,在这里分享给大家。 大家先去这个网站看效果(网址:http://moonbear.animalsasia.org/ie/),然后往下看具体怎么实现,我会在这里很详细的给大家讲解。 网站中第一部分第二页《月熊的标志》是月熊志中互动性较强的一页,页面上会随机分布9块视频碎片,用户可以通过鼠标或者触控移动碎片完成拼图。...

3
23
发表了问答
2013/12/11 16:22

一个牛逼网站的精彩背后

挖到一个值得学习的网站:http://moonbear.animalsasia.org/ie/ 对于传统的网站来讲,这是一个神奇的网站!呵呵,,你在浏览整个体验的过程当中,就像翻阅一本杂志一样轻松,我把这个网站开发背后的技术精华罗列出来,和大家分享讨论! 网站中的翻页依靠了 CSS Transitions 和 CSS Transforms,但这又不是一本传统的电子杂志,在杂志中加入了非常丰富的 3D 元素、高清图、视频和信息交互方式,并且可以触控流畅体验。 现在触控设...

34
62
发表了问答
2011/04/19 22:27

8个惊艳的Javascript WebGL示例

WebGL是一种3D绘图标准,这种绘图技术标准允许把javascript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个javascript绑定,WebGL可以为HTML5 Canvas提供硬件3D加速渲染,这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了,还能创建复杂的导航和数据视觉化。 显然,WebGL技术标准免去了开发网页专用渲染插件的麻烦,可被用于创建具有复杂3D结构的网站页面,甚至可以用来设计3D网页游戏等等。...

7
19
发表了问答
2012/03/26 11:05

如何使webkit内核浏览器在windows平台使用webgl?

本人在做一个项目,是基于webkit内核浏览器的3D绘图实现,即实现webkit内核浏览器使用webgl,webkit的最新的nightly builds已经包含了webgl,支持mac/qt等平台,但是不支持windows平台,请问如何可以支持windows平台?

6
0
发表了问答
2013/02/26 10:39

关于three.js 模型文件 的转换问题。怎么能在maya下导出支持trhee的模型

下载了three.js。并将utils\exporters\maya 目录下的plug-ins和scripts文件。拷贝到C:\Users\Administrator\Documents\maya\2008中,在maya插件管理界面中开启threeJsFileTranlator.py,但第一个复选框怎么也选不中,maya提示错误。 除了这个方法,还有什么办法能把模型转换到json格式的模型。 看到\utils\converters\obj目录下的两个py文件,不知道这个能不能转换,又如何操作呢。...

2
1
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
0 评论
81 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部