WEBGL - 技术教程文章
WebGL------osg框架学习二【代码】
今天我们继续来学习osg.js框架。上一篇我们介绍了DrawActor对象绘制操作类和Drawable可绘制对象类，我们大致知道了osg对Drawable可绘制对象的绘制流程管理。今天我们要继续介绍StateBin状态树节点类。我们来看一下StateBin，他管理的是StateSet状态，他将每个模型节点的StateSet状态信息（shaderLink，材质，depth等）包装成树节点，从而能够将状态节点递归组装成一棵状态树。我们来看看StateBin的构造函数。 1/* 2状态树结点3保存...
基于HTML5的WebGL电信网管3D机房监控应用【图】
先上段视频，不是在玩游戏哦，是规规矩矩的电信网管企业应用，嗯，全键盘的漫游3D机房:http://www.hightopo.com/guide/guide/core/3d/examples/example_3droom.html随着PC端支持HTML5浏览器的普及，加上主流移动终端Android和iOS都已支持HTML5技术，新一代的电信网管应用几乎一致性的首选HTML5，当然Flex和Silverlight的遗留系统依然存活着，如果不考虑移动终端，不考虑将来维护人员难找，不考虑需要承载成千上万的网元数量，不考虑...
WebGL 进入三维世界【代码】【图】
1.观察目标点和上方向 为了确定观察者的状态，你需要获取两项信息：视点，即观察者的位置；观察目标点（look-at point），即被观察目标所在的点，它可以用来确定视线。此外，因为我们需要把观察到的景象绘制到屏幕上，还需要知道上方向（up direction）。有了这三项信息，就可以确定观察者的状态了。 视点：观察者所在的三维空间中位置，视线的起点。视点坐标一般用(eyeX, eyeY, eyeZ)表示。 观察目标点：被观察目标所在的...
初学WebGL引擎-BabylonJS：第4篇-灯光动画与丛林场景【代码】【图】
前几章接触的案例都是接近静态的，由这张开始开始接触大量动态的内容，包括球体灯光，变动的形体，以及一个虚拟的丛林场景下章我会试着结合1-9案例的内容做出一个demo出来【playground】-lights（灯光）源码 var createScene = function () {var scene = new BABYLON.Scene(engine);// Setup cameravar camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, BABYLON.Vector3.Zero(), scene);camera.setPosition(new BABYLON....
WebGL学习笔记（十）：雾化
雾化是指距离我们较远的物体看不清晰的情况，比如模拟大雾环境，或者模拟水下环境时会用到。实现雾化的方式有很多种，我们这里使用的是线性雾化的方式；线性雾化线性雾化比较简单，我们算出每个像素点到摄像机的距离之后，就可以确定当前像素的雾化因子，用雾化因子就可以算出新的颜色值；示例点击这里：https://hammerc.github.io/dou3d-ts/examples/learningNotes/lesson_11/Fog.htmlw 分量优化直接在顶点着色器中使用 gl_Positi...
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
WebGL开启了网页3D渲染的新时代，它允许在canvas中直接渲染3D的内容，而不借助任何插件。WebGL同canvas 2D的API一样，都是通过脚本操纵对象，所以步骤也是基本相似：准备工作上下文，准备数据，在canvas中绘制对象并渲染。与2D不同的就是3D涉及的知识更多了，例如世界、光线、纹理、相机、矩阵等专业知识。WebGL有一个很好的中文教程，就是下面使用参考中的第一个链接，所以这里不再班门弄斧，后面的内容只是简单的总结一下学习的内...
WebGL简易教程(十一)：纹理【代码】【图】
目录1. 概述2. 实例2.1. 准备纹理2.2. 配置纹理2.3. 使用纹理3. 结果4. 参考1. 概述在之前的之前的教程《WebGL简易教程(九)：综合实例：地形的绘制》中，绘制了一个带颜色的地形场景。地形的颜色是根据高程赋予的RGB值，通过不同的颜色来表示地形的起伏，这是表达地形渲染的一种方式。除此之外，还可以将拍摄得到的数字影像，贴到地形上面，得到更逼真的地形效果。这就要用到我们这一章的新知识——纹理了。这里用到的纹理图像，是...
初学WebGL引擎-BabylonJS：第6篇-学习挑战：碰撞交错与挑选【代码】【图】
【playground】-collisions（碰撞） 先贴官方源码（机器翻译版本）var createScene = function () {var scene = new BABYLON.Scene(engine);// Lightsvar light0 = new BABYLON.DirectionalLight("Omni", new BABYLON.Vector3(-2, -5, 2), scene);var light1 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(2, -5, -2), scene);// Need a free camera for collisionsvar camera = new BABYLON.FreeCamera("FreeCamera", ne...
webgl智慧楼宇发光效果算法系列之高斯模糊【代码】【图】
webgl智慧楼宇发光效果算法系列之高斯模糊如果使用过PS之类的图像处理软件，相信对于模糊滤镜不会陌生，图像处理软件提供了众多的模糊算法。高斯模糊是其中的一种。在我们的智慧楼宇的项目中，要求对楼宇实现楼宇发光的效果。 比如如下图所示的简单楼宇效果：楼宇发光效果需要用的算法之一就是高斯模糊。高斯模糊简介高斯模糊算法是计算机图形学领域中一种使用广泛的技术, 是一种图像空间效果，用于对图像进行模糊处理，创建原始图...
WebGL编程指南案例解析之绘制三角形【代码】【图】
//案例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...
基于 HTML5 WebGL 的地铁站 3D 可视化系统【代码】【图】
前言工业互联网，物联网，可视化等名词在我们现在信息化的大背景下已经是耳熟能详，日常生活的交通，出行，吃穿等可能都可以用信息化的方式来为我们表达，在传统的可视化监控领域，一般都是基于 Web SCADA 的前端技术来实现 2D 可视化监控，本系统采用 Hightopo 的 HT for Web 产品来构造轻量化的 3D 可视化场景，该 3D 场景从正面展示了一个地铁站的现实场景，包括地铁的实时运行情况，地铁上下行情况，视频监控，烟雾报警，电梯运...
【WebGL】2.基础概念【代码】【图】
引入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相机：一个视角，对场景进行拍摄，通过切换位置和角度能拍摄到不同的景象渲染器：将相机拍摄的内容渲染到浏览器中，最终用户...
构建WebGL目标时的内存考量
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 ...
webgl推荐书籍【图】
网址：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入门教程(四)-webgl颜色【代码】【图】
前面文章：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;" +...
基于 HTML5 的 WebGL 技术构建 3D 场景（一）【代码】【图】
今天和大家分享的是 3D 系列之 3D 预定义模型。HT for Web 提供了多种基础类型供用户建模使用，不同于传统的 3D 建模方式，HT 的建模核心都是基于 API 的接口方式，通过 HT 预定义的图元类型和参数接口，进行设置达到三维模型的构建。接下来我们就来谈谈预定义的 3D 模型及参数设置。HT 预定义的 3D 模型有：box、sphere、cone、torus、cylinder、star、rect、roundRect、triangle、tightTriangle、parallelogram 和 trapezoid 这十...
[WebGL入门]十三，minMatrix.js和坐标变换矩阵
注：文章译自http://wgld.org/，原作者杉本雅広(doxas)，文章中如果有我的额外说明，我会加上［lufy：］，另外，鄙人webgl研究还不够深入，一些专业词语，如果翻译有误，欢迎大家指正。坐标变换矩阵的基本功能进行基本的3D渲染的时候，需要准备3个坐标变换矩阵，这个在之前的文章中说过很多次了。第一个是模型变换矩阵，DirectX中叫做世界变换矩阵。模型变换矩阵影响的是所绘制的模型，模型的位置，模型的旋转，模型的放大和缩小等...
8月7号晚7点Autodesk北京办公室，我们来聊聊HTML5/ WebGL 3D 模型浏览技术【图】
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/ 会议介绍在本次技术沙龙中，杜长...
webGL相机控制器【代码】
需要引入相机控制插件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...
WebGL AssetBundle 加载 缓存【代码】
U3D的AssetBundle真的是博(坑)大精(坑)深啊 安卓的话要先打包到StreamingAssetPath中，安装后第一次运行，自动把Streaming 中的解压到PersistentDataPath中，因为persistent目录是在运行过一次才创建的。这样，之后再更新资源就直接下载到persistent目录下了但是，WebGL项目呢这个就不存在什么streaming或者persistent了，因为不能加载本地路径所以就只有缓存，加载包时就要用WWW.LoadFromDownloadOrCache(url, version)这样会把资...
HTML5的WebGL实现的3D和2D拓扑树【代码】【图】
在HT for Web中2D和3D应用都支持树状结构数据的展示，展现效果各异，2D上的树状结构在展现层级关系明显，但是如果数据量大的话，看起来就没那么直观，找到指定的节点比较困难，而3D上的树状结构在展现上配合HT for Web的弹力布局组件会显得比较直观，一眼望去可以把整个树状结构数据看个大概，但是在弹力布局的作用下，其层次结构看得就不是那么清晰了。所以这时候结构清晰的3D树的需求就来了，那么这个3D树具体长成啥样呢，我们来...
[WebGL入门]二十七，多纹理【图】
注：文章译自http://wgld.org/，原作者杉本雅広(doxas)，文章中如果有我的额外说明，我会加上［lufy：］，另外，鄙人webgl研究还不够深入，一些专业词语，如果翻译有误，欢迎大家指正。本次的demo的运行结果使用多个纹理上次介绍了WebGL中的纹理的使用方法。简单的实现了将纹理贴到四边形中，果然是使用图片数据的话比较灵活吧。那么，这次来说说使用多个纹理来合成图像的方法，学习了这个方法之后可以再一个多边形中使用多个纹理。...
WEBGL学习笔记（七）：实践练手1-飞行类小游戏之游戏控制【代码】
接上一节，游戏控制首先要解决的就是碰撞检测了这里用到了学习笔记（三）射线检测的内容了以鸟为射线原点，向前、上、下分别发射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...
unity 发布WebGL版本找不到unity自带的类
加载asset bundle的时候出现Could not produce class with ID XXX的错误在asset 文件夹下建一个Link的XML，内容如下：<?xml version="1.0" encoding="utf-8"?><linker> <assembly fullname="UnityEngine"> <type fullname="UnityEngine.SphereCollider" preserve="all"/> <type fullname="UnityEngine.AudioSources" preserve="all"/> <type fullname="UnityEngine.ReflectionProbe" preserve="all"/> <type fullname...
基于 HTML5 + WebGL 的宇宙(太阳系) 3D 可视化系统【代码】【图】
前言近年来随着引力波的发现、黑洞照片的拍摄、火星上存在水的证据发现等科学上的突破，以及文学影视作品中诸如《三体》、《流浪地球》、《星际穿越》等的传播普及，宇宙空间中那些原本遥不可及的事物离我们越来越近，人们对未知文明的关注和对宇宙空间的好奇达到了前所未有的高度。站在更高的立足点上，作为人类这个物种中的一员，我们理所应当对我们生活的星球、所在的太阳系有一定的认识，对 8 大行星各自的运行轨道、质量、资源...
Unity发布的WebGL页面应用实现全屏/非全屏切换【代码】【图】
很简单，在场景中添加一个UGUI按钮，实现点击就切换全屏/非全屏状态 其实发布出webgl之后，页面上场景窗口右下会有一个按钮，就是切换全屏的，但是想用代码在程序里实现首先看页面上那个按钮的js脚本是怎么写的<div onclick="gameInstance.SetFullscreen(1)"></div>注意里面的代码就一行：gameInstance.SetFullscreen(1);也就是在Unity中调用外面的js方法所以先在js中写个切换全屏的方法function FullScrSwitch(para){gameInstanc...
[WebGL入门]二十三，反射光的光照效果【图】
注：文章译自http://wgld.org/，原作者杉本雅広(doxas)，文章中如果有我的额外说明，我会加上［lufy：］，另外，鄙人webgl研究还不够深入，一些专业词语，如果翻译有误，欢迎大家指正。本次的demo的运行结果各种各样的光照上次，以及上上次，介绍了通过顶点着色器来实现光照效果。最开始介绍了从平行光源发出的光，上次介绍了平行光源的缺点，以及对应这个缺点的方法，就是环境光源。这次是光照处理的第三篇，进一步介绍反射光照。...
WebGL实现HTML5贪吃蛇3D游戏【代码】【图】
js1k.com收集了小于1k的javascript小例子，里面有很多很炫很酷的游戏和特效，今年规则又增加了新花样，传统的classic类型基础上又增加了WebGL类型，以及允许增加到2K的++类型，多次想尝试提交个小游戏但总无法写出让自己满意还能控制在这么小的字节范围。自己写不出来，站在巨人肩膀总是有机会吧，想起《基于HTML5的电信网管3D机房监控应用》这篇提到的threejs，babylonjs和Hightopo的几种基于WebGL的3D引擎，突然想挑战下自己实现...
学习WebGL：第一个代码【代码】
利用canvas和javascript，就可以在页面绘制2d图像，但对于3d的图像，目前是无能为力的。要绘制3d图像，就必须使用WebGL。以我的理解，WebGL是内嵌在浏览器中，在使用时是通过javascript调用浏览器提供的WebGL API，然后在canvas绘图区绘制图像。刚开始接触WebGL时，没有理解这一点，于是觉得代码怎么会写得这么麻烦，重重复复的写一堆就为一个简单的的功能。下面是一个最简单的WebGL例子<!DOCTYPE html><html lang=‘zh-cmn-Hans‘...
WebGL编程指南pdf
下载地址：网盘下载WebGL 是一项在网页上渲染三维图形的技术，也是HTML5 草案的一部分。 《WebGL编程指南》的主要篇幅讲解了WebGL 原生API 和三维图形学的基础知识，包括渲染管线、着色器、矩阵变换、着色器编程语言（GLSL ES）等等，也讲解了使用WebGL 渲染三维场景的一般技巧，如光照、阴影、雾化等等。《WebGL编程指南》提供了丰富的示例程序供读者钻研，也提供了极具价值的附录供读者参考。 《WebGL编程指南》适合有一定前端开...