WEBGL - 技术教程文章

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编程指南》适合有一定前端开...

WebGL之点精灵的旋转(Rotation Sprite)【代码】

var VSHADER_SOURCE =[ "attribute vec4 a_Position;", "uniform mat4 u_ProjMatrix;","uniform float u_PointSize;","void main() {"," gl_PointSize = u_PointSize;"," gl_Position = u_ProjMatrix * a_Position;","}"].join("\n") var FSHADER_SOURCE = [‘precision mediump float;‘, "uniform sampler2D u_Sampler;", "uniform float u_Angle" "void main() {"," float...

WEBGL用户文档(四):three.js的结构【代码】

我们知道three.js有几大件,掌握好这几个类,那么就算入门了!场景scene,摄像机camera,渲染器render。光源light、控制control、加载器loader three.js的写法由一个套路,基本上是 1.新建场景*2.摄像机*3.新建object3d,光源等(添加到场景)※4.新建渲染器并渲染*(three.js-master\examples\js\renderers)5.添加控制※(three.js-master\examples\js\controls)6.游戏循环和动画※ 上面带*的都是必须的,比较基础这里不说了。下面...

WebGL 创建和初始化着色器过程

1.编译GLSL ES代码,创建和初始化着色器供WebGL使用。这些过程一般分为7个步骤: 创建着色器对象(gl.createBuffer()); 向着色器对象中填充着色器程序的源代码(gl.shaderSource()); 编译着色器(gl.compileShander()); 创建程序对象(gl.createProgram()); 为程序对象分配着色器(gl.attachShader()); 连接程序对象(gl.linkProgram()); 使用程序对象(gl.useProgram());2.着色器对象和程序对象 ...

WebGL实现HTML5的3D贪吃蛇游戏【代码】【图】

js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型,多次想尝试提交个小游戏但总无法写出让自己满意还能控制在这么小的字节范围。自己写不出来,站在巨人肩膀总是有机会吧,想起《基于HTML5的电信网管3D机房监控应用》这篇提到的threejs,babylonjs和Hightopo的几种基于WebGL的3D引擎,突然想挑战下自己实现...

WebGL 支持检测与已支持浏览器版本汇总

WebGL 支持检测与已支持浏览器版本汇总太阳火神的美丽人生 (http://blog.csdn.net/opengl_es)本文遵循“署名-非商业用途-保持一致”创作公用协议转载请保留此句:太阳火神的美丽人生 - 本博客专注于 敏捷开发及移动和物联设备研究:iOS、Android、Html5、Arduino、pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作。是否我的浏览器支持 WebGLhttp://caniuse.com在页面搜索 webgl,找到 WebGL - 3D Canvas graphics ,...

B/S 端基于 HTML5 + WebGL 的 VR 3D 机房数据中心可视化【代码】【图】

前言在 3D 机房数据中心可视化应用中,随着视频监控联网系统的不断普及和发展, 网络摄像机更多的应用于监控系统中,尤其是高清时代的来临,更加快了网络摄像机的发展和应用。在监控摄像机数量的不断庞大的同时,在监控系统中面临着严峻的现状问题:海量视频分散、孤立、视角不完整、位置不明确等问题,始终围绕着使用者。因此,如何更直观、更明确的管理摄像机和掌控视频动态,已成为提升视频应用价值的重要话题。所以当前项目正是...

webgl变换:深入图形平移【代码】【图】

在以前的文章里,不管是绘制图形,绘制点亦或者是改变色值,所有的内容都是静态的。在 webgl 里,图形的运动分为 平移、旋转、缩放 三种类型。接下来,我们会从零基础开始,一点一点来深入了解图形如何进行运动。首先来从零开始了解下图形的平移1. 图形平移首先我们来看如何实现图形的平移操作。平移的操作就是将图形的原始坐标加上对应的移动距离。首先来看下平移的实现const vertexShaderSource = "" +"attribute vec4 apos;" + ...

SuperMap iClient3D for WebGL 9D怎么将s3m图层的纹理变更精细些【图】

设置S3MTilesLayer.lodRangeScale.默认值是1,设的越小越精细,最小值是0.01.越大越模糊,最大值是100 原文:https://www.cnblogs.com/yaohuimo/p/12073407.html

[WebGL入门]十二,模型数据和顶点属性

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中如果有我的额外说明,我会加上[lufy:],另外,鄙人webgl研究还不够深入,一些专业词语,如果翻译有误,欢迎大家指正。顶点属性的意思上次的文章中,介绍了一下从着色器的生成,编译,到程序对象的生成和着色器的连接。这次,简单的说一下模型数据的定义和顶点属性的处理。另外,介绍一下根据模型数据生成VBO的方法。VBO的使用要比生成难理解一些,但是不要担心,后...

HTML5 Canvas,WebGL,CSS Shaders,GLSL的暧昧关系【图】

一、前面的所以然技术的发展日新月异,说不定回家钓几天鱼,就出来个新东西了。新事物新技术发展的初期,你无法预见其未来之趋势,生命诚可贵,没有必要花过多时间深入研究这些新东西,不过,知道了大概,了解个全貌还是很有必要的。虽不是时代缔造者,也不至于落后于时代发展大潮。互联网的发展相当的神速,其他不说,就前端技术这块,出现的些新名词或生名词就让人眼花缭乱,应接不暇,比如说:HTML5 Canvas, WebGL, CSS Shaders...

canvas svg webgl threejs d3js 的区别

canvas绘制2D位图。Echarts是基于Canvas技术的可视化工具,底层封装了原生的JavaScript的绘图 API。canvas里面绘制的图形不能被引擎抓取,canvas中我们绘制图形通常是通过javascript来实现。svg绘制2D矢量图。svg里面的图形可以被引擎抓取,支持事件的绑定,svg更多的是通过标签来实现。webgl用3D画位图的api。threejs基于webgl的3D场景库d3js数据可视化工具,只支持svg原文:https://www.cnblogs.com/knuzy/p/10147889.html

m3u8编码视频webgl、threejs渲染视频纹理demo【代码】【图】

<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>fz-live</title><link href="./css/video.css" rel="stylesheet"><script src="./js/video.js"></script><script src="./js/videojs-live.js"></script><script src="./js/three.min.js"></script> </head> <body><video id="my_video_1" autoplay=true class="video-js vjs-default-skin" preload="auto" width="300" height="200" data-setup=‘{}‘><source src=...

WebGL树形结构的模型渲染流程【代码】【图】

今天和大家分享的是webgl渲染树形结构的流程。用过threejs,babylonjs的同学都知道,一个大模型都是由n个子模型拼装而成的,那么如何依次渲染子模型,以及渲染每个子模型在原生webgl中的流程是怎样的呢,我就以osg框架为原本,为同学们展示出来。  首先介绍osg框架,该框架是基于openGL的几何引擎框架,目前我的工作是将其翻译成为webgl的几何引擎,在这个过程中学习webgl原生架构的原理和工程构造方式,踩了各种坑,每次爬出坑都...

WebGL递归处理和移动?旋转?缩放

3D世界只有三种运动方式:移动、旋转、放大缩小。 使用setTimeout函数可以实现反复的循环处理,那么具体的做法是怎样的呢?setTimeout函数的第一个参数是调用的函数,第二个参数是需要经过多长时间(毫秒)后调用这个函数。如果第一个参数指定为当前所运行的函数的话,那么就可以实现持续循环了。 ?函数A被调用 ?在函数A中,使用setTimeout,并传入函数A作为参数 ?经过指定的时间后,函数A被调用 按照上面的步骤,把W...