WebGL
文章平均质量分 78
孙群
关注前端HTML5,关注地理数据可视化,热爱移动互联网,爱开源,爱分享!
展开
-
用Three.js根据两个三维点创建Cylinder
Three.js中默认不能直接根据两个三维点的坐标创建Cylinder,创建的Cylinder默认是垂直于XOY平面的,不便于实际应用,下面是用Three.js根据两个三维点创建Cylinder:function createCylinderMesh(x1,y1,z1,x2,y2,z2){ var x0 = (x1 + x2) / 2; var y0 = (y1 +原创 2012-05-15 10:41:34 · 4453 阅读 · 2 评论 -
WebGL自学课程(15):WebGL在WebGIS上的应用——WebGlobe
好久没写博客了,最近在工作之余用WebGL做了个WebGlobe,类似于Google Earth之类的东西,当然肯定没人家那个强大了。没有使用任何的WebGL图形库,自己把WebGL绘图命令封装成了一个轻量级的渲染引擎,想通过自己去亲自编码实现洞察Google Earth这种东西是怎么做出来的。整个Demo就一个文件,一共40kb,纯js实现,没有使用任何的第三方图形库或第三方js库。可以加载Go原创 2013-06-18 13:20:28 · 13063 阅读 · 22 评论 -
WebGL自学课程(16):WebGlobe实现的基本算法原理
WebGlobe(http://blog.csdn.net/sunqunsunqun/article/details/9119735)能够加载多种切片地图服务,并将其以正确的形式显示出来,本博文将阐述一下WebGlobe的基本算法原理,之所以称之为“基本”,原因是在实际开发过程中要竟可能的优化这些算法,自己在开发的过程中通过不断总结,发现根本的算法其实就是一句话:我只请求并显示那些应该被我们所看到原创 2013-06-23 15:41:44 · 9171 阅读 · 5 评论 -
WebGL自学课程(8):WebGL+ArcGIS JS API实现TerrainMap
转载请注明出处以前在Esri的博客上看到了一篇用Silverlight+Balder实现TerrainMap的文章,实现的功能是将指定的二维投影地理范围转换成三维地形图,这是链接地址http://maps.esri.com/sldemos/terrainmap/default.html,感觉很有意思,最近在看WebGL,所以就想用WebGL重新进行实现,其中用ArcGIS JS API获取原创 2012-08-20 03:01:22 · 12866 阅读 · 2 评论 -
WebGL自学课程(13):获得三维拾取向量
一个三维点最终展现在屏幕上要经过很多的矩阵变换,如果要根据屏幕上的2D点获取对应的三维信息,那么就需要对3D到2D转变的操作进行逆操作,我们先来看一下从3D到2D的具体的变换过程是怎么样的。三维中一点要想展现在屏幕上需要经过这么几个重要的变换过程:模型变换->视点变换->投影变换->投影除法。在顶点着色器中我们需要自己手动完成前三个变换过程(模型变换、视点变换、投影变换),如下所示:原创 2013-05-05 13:39:13 · 5065 阅读 · 8 评论 -
OpenGL中的坐标变换、矩阵变换
OpenGL中存在六种坐标系:1. Object or model coordinates(模型坐标系)2. World coordinates(世界坐标系)3. Eye (or Camera) coordinates(视坐标系)4. Clip coordinates(裁剪坐标系)5. Normalized device coordinates(归一化设备坐标系)6. Wi原创 2014-06-01 16:12:33 · 20932 阅读 · 17 评论 -
WebGL+ArcGIS JS API实现Web城市地下管线三维场景浏览
注:转载请注明出处WebGL发展的如火如荼,未来的WebGIS也应该体现3D的趋势,本人的本科毕业论文是《Web城市地下管线三维场景浏览技术研究》,通过ArcGIS JS API获取地理数据,然后用WebGL框架Three.js将该地理数据进行三维展示。本论文主要具有以下创新点:(1)在传统的WebGIS的基础上,借助于主流的IT技术(WebGL)实现了在传统网页中嵌入三维GI原创 2012-06-29 17:31:45 · 40072 阅读 · 33 评论 -
[GitHub开源]基于HTML5实现的轻量级Google Earth三维地图引擎,带你畅游世界
A WebGL virtual globe and map engineWebGlobe WebGlobe是基于HTML5原生WebGL实现的轻量级Google Earth三维地图引擎。GitHub:https://github.com/iSpring/WebGlobeDemo: https://ispring.github.io/WebGlobe/index.html如果觉得不原创 2016-09-27 12:49:11 · 34940 阅读 · 11 评论 -
OpenGL ES 2.0编程基础
本人在学WebGL,WebGL的资料很少,由于WebGL是OpenGL ES 2.0的子集,所以先学习一下OpenGL ES 2.0的基础知识。OpenGL中既有固定管线处理流程,也可以使用shader进行可编程的管线处理,OpenGL ES 2.0是完全可编程的管线流程,而没有固定管线流程,这给我们增加了更多的灵活度,以前可以让OpenGL替我们做的事情,现在必须要我们在shader中自己去实现原创 2012-06-10 11:08:02 · 7551 阅读 · 3 评论 -
WebGL不同几何图形的渲染方式
代码摘自《WebGL Beginners Guide》一书第二章的ch2_RenderingModes.htmlWebGL Beginner's Guide - Chapter 2 - Rendering Modes #ifdef GL_ESprecision highp float;#endifvoid main(void) { gl_F翻译 2013-02-04 23:38:01 · 3582 阅读 · 0 评论 -
在WebGL中使用drawElements绘图
代码摘自《WebGL Beginners Guide》一书第二章的ch2_Square.htmlWebGL Beginner's Guide - Chapter 2 - Rendering a Square #ifdef GL_ES precision highp float; #endif void main(voi翻译 2013-02-04 22:52:13 · 7239 阅读 · 0 评论 -
WebGL自学课程(14):WebGL使用Mipmap纹理
未使用Mipmap纹理前锯齿马赛克明显:使用Mipmap纹理后锯齿马赛克不明显,变模糊了:使用Mipmap代码如下:gl.bindTexture(gl.TEXTURE_2D, texture);gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA,原创 2013-05-05 14:58:11 · 5854 阅读 · 0 评论 -
WebGL自学课程(12):光照模型与渲染方式
这篇文章暂且写的简单点,以后会补充图文丰富内容。光照反射模型:Lambertian reflection model(朗伯光照反射模型)只考虑了光照的漫反射情况,没有考虑环境光和镜面反射;与之相对应的是Phong reflection model相对应,考虑了环境光、漫反射以及镜面反射。着色法:Goraud shading(高洛德着色法)是在顶点着色器中计算顶点颜色,然后将原创 2013-02-07 22:22:45 · 3687 阅读 · 0 评论 -
WebGL自学课程(11):ELSL着色器编程中内置的运算符与函数
-x:返回x向量的负值,表示与原向量方向相反的向量。x+y:计算向量x和向量y的和,x和y向量必须是同维度的。x-y:计算两个向量的差值,两个向量也必须是同维度的。x*y:如果x和y都是向量,那么该运算符进行的是逐分量的相乘计算;如果是矩阵相乘,那么该运算符会返回一个线性相乘的矩阵,而不是一个逐分量的相乘结果(如果想得到的是逐分量的相乘结果,那就需要使用matrixCompMult函数原创 2013-02-07 20:40:11 · 3313 阅读 · 0 评论 -
WebGL自学课程(3):原生WebGL+ArcGIS JS API绘制旋转的地球
注:转载请注明出处通过ArcGIS JS API获取地理数据,然后用原生WebGL将其绘制成旋转的地球。一共需要241271个点,绘制了247个国家或地区。截图:以下是代码: World html,body,div{margin:0;padding:0}原创 2012-07-02 13:35:14 · 11554 阅读 · 6 评论 -
WebGL自学课程(4):WebGL矩阵、Camera基础操作
直接使用WebGL进行开发比较困难,所以用WebGL进行三维开发一般都要使用框架,本人也在学习WebGL,所以想构建一个自己习惯的框架,正好加深自己对WebGL技术的理解。WebGL框架中最重要的部分应该是矩阵变换以及Camera操作,所以本人首先构建矩阵和摄像机方面的基础代码。本人的代码还比较基础,谈不上框架,只是为了是自己加深理解而已。代码如下:isZero = function(valu原创 2012-07-08 14:16:33 · 4770 阅读 · 0 评论 -
WebGL自学课程(2):使用自定义glTranslate与glRotate
OpenGL中可以直接使用glTranslate与glRotate,但是WebGL1.0规范中并没有包含该函数,如果想使用,需要自己进行实现。以下是示例代码: World html,body,div{margin:0;padding:0} at原创 2012-06-26 23:08:54 · 3844 阅读 · 0 评论 -
WebGL自学课程(1):原生WebGL简单Demo
以下是一个原生WebGL简单Demo: World html,body,div{margin:0;padding:0} attribute vec3 aPosition; uniform mat4 uModelView原创 2012-06-26 17:35:19 · 8118 阅读 · 0 评论 -
在搜狗浏览器中启用WebGL
搜狗浏览器3.2版本已支持WebGL,搜狗浏览器的“兼容”模式下是不支持WebGL的,要想在搜狗浏览器中启用WebGL,需要将“兼容”模式切换为“高速”模式即可,如下图所示:原创 2012-08-04 15:20:28 · 14899 阅读 · 0 评论 -
WebGL自学课程(6):WebGL加载跨域纹理出错Uncaught Error: SECURITY_ERR: DOM Exception 18
最近在学习WebGL,用图片对WebGL进行纹理贴图,其中图片是从其他网站跨域获取的,image.src = "http://otile1.mqcdn.com/tiles/1.0.0/osm/"+level+"/"+column+"/"+row+".jpg";用Chrome 22运行网页,每次在执行到gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGB原创 2012-07-18 13:58:25 · 8265 阅读 · 2 评论 -
WebGL自学课程(7):WebGL加载跨域纹理出错Cross-origin image load denied by Cross-Origin Resource Sharing policy.
最近在学习WebGL,用图片对WebGL进行纹理贴图,其中图片是从其他网站跨域获取的,用Chrome 22运行网页,开始的时候出现了错误Uncaught Error: SECURITY_ERR: DOM Exception 18,找到了解决方案,参见本人另一篇博文Uncaught Error: SECURITY_ERR: DOM Exception 18。本人最近又从其他网站跨域获原创 2012-08-09 17:53:19 · 12858 阅读 · 1 评论 -
WebGL自学课程(10):通过OpenStreetMap获取数据绘制地球
好久没写博客了,今天再写一篇。前几天想通过OpenStreetMap访问数据来绘制一个最最最最最简单的WebGoogleEarth的雏形,这个Demo比较简单,只是简单的获取OpenStreetMap某一个切片层级下面的所有的切片,然后按照正确的贴图方式绘制在地球上,也就是说这个Demo没有考虑图层的动态管理等等。最后将渲染的代码以EarthOSM类的形式封装到了自己的World.js中,可以用鼠原创 2012-09-13 19:18:22 · 5345 阅读 · 4 评论 -
WebGL自学课程(5):使用一张贴图纹理绘制地球
注:转载请注明出处在《WebGL自学课程(3):原生WebGL+ArcGIS JS API绘制旋转地球》一文中讲述了如何利用地图数据绘制地球的轮廓,但是缺少色彩。本文就是想通过贴图的方式让地球穿上一层靓丽的外衣,并可以通过鼠标拖拽等对绘制的地球进行交互式操作。由于本人《WebGL自学课程(4):WebGL矩阵、Camera基础操作》一文中构建了本人自己常用的代码,封装到World.js原创 2012-07-14 20:21:40 · 7310 阅读 · 0 评论 -
WebGL自学课程(9):WebGL框架World.js(0.3.5版本)
前一段时间在学WebGL,做了一个TerrainMap的Demo,顺便把一些常用的WebGL代码封装成了一个框架,起了个名字叫做World.js,现在的版本是0.3.5,还很不完善,发到博客上主要是为了方便自己查阅。以下是顶点渲染器VertexShader.txt的代码:attribute vec3 aPosition;attribute vec2 aTextureCoord;va原创 2012-08-20 11:10:34 · 6311 阅读 · 3 评论 -
HTML5原生WebGL开发系列教程
1. OpenGL中的坐标变换、矩阵变换2. OpenGL ES 2.0编程基础3. 原生WebGL简单Demo4. 在WebGL中使用drawElements绘图5. WebGL不同几何图形的渲染方式6. 使用自定义glTranslate与glRotate7. 原生WebGL+ArcGIS JS API绘制旋转的地球8. WebGL矩阵、Camera基础操作9. WebGL使用一张贴图纹理绘制地球原创 2017-05-02 12:20:56 · 11309 阅读 · 1 评论