webgl智慧楼宇发光效果算法系列之高斯模糊如果使用过PS之类的图像处理软件，相信对于模糊滤镜不会陌生，图像处理软件提供了众多的模糊算法。高斯模糊是其中的一种。在我们的智慧楼宇的项目中，要求对楼宇实现楼宇发光的效果。 比如如下图所示的简单楼宇效果：楼宇发光效果需要用的算法之一就是高斯模糊。高斯模糊简介高斯模糊算法是计算机图形学领域中一种使用广泛的技术, 是一种图像空间效果，用于对图像进行模糊处理，创建原始图...
//案例3.绘制三角形，将顶点数据存到缓冲区对象（gl.ARRAY_BUFFER）中，然后顶点着色器从里面读数据（3个顶点） //顶点着色器中去掉gl_PointSize = 10.0，绘制三角不能设置顶点的大小 //gl.drawArrays(gl.TRIANGLES,0,n);第一个参数改为三角，因为此时不是绘制点了var vShader = `attribute vec4 a_Position;void main(){gl_Position = a_Position;} `; var fShader = `void main(){gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);} `;f...
前言工业互联网，物联网，可视化等名词在我们现在信息化的大背景下已经是耳熟能详，日常生活的交通，出行，吃穿等可能都可以用信息化的方式来为我们表达，在传统的可视化监控领域，一般都是基于 Web SCADA 的前端技术来实现 2D 可视化监控，本系统采用 Hightopo 的 HT for Web 产品来构造轻量化的 3D 可视化场景，该 3D 场景从正面展示了一个地铁站的现实场景，包括地铁的实时运行情况，地铁上下行情况，视频监控，烟雾报警，电梯运...
引入Three.js<!DOCTYPE html> <html> <head><title></title> </head> <body><script src="https://raw.github.com/mrdoob/three.js/master/build/three.js"></script> </body> </html>三大要素：场景，相机和渲染器场景：动画中的容器，所有物体都存在于一个场景当中，三维中的场景类似与二维动画中的canvas相机：一个视角，对场景进行拍摄，通过切换位置和角度能拍摄到不同的景象渲染器：将相机拍摄的内容渲染到浏览器中，最终用户...
Memory Considerations when targeting WebGL构建WebGL目标时的内存考量Memory in Unity WebGL can be a constraining factor restricting the complexity of the content you can run, so we would like to provide some explanation on how memory is used in WebGL.对于Unity WebGL来说，内存限制了所运行内容的复杂度。下面我们将解释一下在WebGL中内存是如何被使用的。Your WebGL content will run inside a browser, so any ...
网址：https://www.douban.com/doulist/45940373/webgl来自: Pasu 2017-04-17创建 2017-07-25更新 推荐关注 2 人关注全部(8) · 图书(8) 来自：豆瓣读书OpenGL Insights (8人评价)作者: Patrick Cozzi / Christophe Riccio 出版社: A K Peters/CRC Press 出版年: 2012-6-262017年7月25日赞 回复 来自：豆瓣读书WebGL Insights (2人评价)作者: Patrick Cozzi 出版社: A K Peters/CRC Press 出版年: 2015-8-32017年7月25日赞 回复 ...
前面文章：WebGL入门教程(一)-初识webglWebGL入门教程(二)-webgl绘制三角形WebGL入门教程(三)-webgl动画颜色效果图： 操作步骤： 1.创建HTML5 canvas 2.获取画布 canvas 的 ID 3.获取WebGL 4.编译着色器 5.使用缓冲区对象向顶点传入多个顶点数据 6.绘制图像以上1~3参考：http://www.cnblogs.com/bsman/p/6128447.html4.编译着色器改顶点着色器，片着色器//顶点着色器程序var VSHADER_SOURCE ="attribute vec4 a_Position;" +...
今天和大家分享的是 3D 系列之 3D 预定义模型。HT for Web 提供了多种基础类型供用户建模使用，不同于传统的 3D 建模方式，HT 的建模核心都是基于 API 的接口方式，通过 HT 预定义的图元类型和参数接口，进行设置达到三维模型的构建。接下来我们就来谈谈预定义的 3D 模型及参数设置。HT 预定义的 3D 模型有：box、sphere、cone、torus、cylinder、star、rect、roundRect、triangle、tightTriangle、parallelogram 和 trapezoid 这十...
注：文章译自http://wgld.org/，原作者杉本雅広(doxas)，文章中如果有我的额外说明，我会加上［lufy：］，另外，鄙人webgl研究还不够深入，一些专业词语，如果翻译有误，欢迎大家指正。坐标变换矩阵的基本功能进行基本的3D渲染的时候，需要准备3个坐标变换矩阵，这个在之前的文章中说过很多次了。第一个是模型变换矩阵，DirectX中叫做世界变换矩阵。模型变换矩阵影响的是所绘制的模型，模型的位置，模型的旋转，模型的放大和缩小等...
Autodesk 发布了一款完全无需插件的三维模型浏览器 Autodesk 360 Viewer，大家有没有兴趣，下班后过来聊聊吧！ 8月7号 周四， 19:00~21:00Autodesk北京办公室， 北京市朝阳区东大桥路9号侨福芳草地大厦 A 栋9层 报名： http://huiyi.csdn.net/activity/product/goods_list?project_id=1248 或：http://www.meetup.com/Beijing-3D-Modeling-Cloud-Development-Technology-Meetup/events/192107732/ 会议介绍在本次技术沙龙中，杜长...
需要引入相机控制插件OrbitControls1 <script type="text/javascript" src="framework/jquery.1.11.1.min.js"></script> 2 <script src="framework/three.js"></script> 3 <script src="framework/OrbitControls.js"></script> 直接看代码 1 <html>2 3 <head>4 <meta charset="UTF-8">5 <link rel="stylesheet" type="text/css" href="stylesheets/main.css">6 <script type="text/javascript" src="frame...
U3D的AssetBundle真的是博(坑)大精(坑)深啊 安卓的话要先打包到StreamingAssetPath中，安装后第一次运行，自动把Streaming 中的解压到PersistentDataPath中，因为persistent目录是在运行过一次才创建的。这样，之后再更新资源就直接下载到persistent目录下了但是，WebGL项目呢这个就不存在什么streaming或者persistent了，因为不能加载本地路径所以就只有缓存，加载包时就要用WWW.LoadFromDownloadOrCache(url, version)这样会把资...
在HT for Web中2D和3D应用都支持树状结构数据的展示，展现效果各异，2D上的树状结构在展现层级关系明显，但是如果数据量大的话，看起来就没那么直观，找到指定的节点比较困难，而3D上的树状结构在展现上配合HT for Web的弹力布局组件会显得比较直观，一眼望去可以把整个树状结构数据看个大概，但是在弹力布局的作用下，其层次结构看得就不是那么清晰了。所以这时候结构清晰的3D树的需求就来了，那么这个3D树具体长成啥样呢，我们来...
注：文章译自http://wgld.org/，原作者杉本雅広(doxas)，文章中如果有我的额外说明，我会加上［lufy：］，另外，鄙人webgl研究还不够深入，一些专业词语，如果翻译有误，欢迎大家指正。本次的demo的运行结果使用多个纹理上次介绍了WebGL中的纹理的使用方法。简单的实现了将纹理贴到四边形中，果然是使用图片数据的话比较灵活吧。那么，这次来说说使用多个纹理来合成图像的方法，学习了这个方法之后可以再一个多边形中使用多个纹理。...
接上一节，游戏控制首先要解决的就是碰撞检测了这里用到了学习笔记（三）射线检测的内容了以鸟为射线原点，向前、上、下分别发射3个射线，射线的长度较短大概为10~30.根据上一节场景的建设，我把y轴设为前进方向，z轴设为高度~如果射线返回有结果，那么说明鸟遇到了障碍物。代码如下： var raycaster1 = new THREE.Raycaster(birdmesh.position, new THREE.Vector3(0, 1, 0), 0, 30)var raycaster2 = new THREE.Ray...