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...
WebGL入门教程第1篇——六色立方
WebGL入门教程第1篇——六色立方WebGL，一项允许开发人员在浏览器里操纵GPU来显示图形的技术。让我们一起走进WebGL的世界。 读者对象 本系列适合具有基础JavaScript知识的开发人员。 准备工作 我们应该在本地搭建好web服务器，或者安装了具有预览功能的IDE。如果你安装了Visual Studio，Nivk童鞋为我们开发了WebGL代码提示功能，你可以通过以下步骤使Visual Studio支持WebGL代码提示：打开Visual Studio——点击工具——点击选项—...
WebGL中使用window.requestAnimationFrame创建主循环【代码】【图】
今天总结记录一下WebGL中主循环的创建和作用。我先说明什么是主循环，其实单纯的webgl不存在主循环这个概念，这个概念是由渲染引擎引入的，主循环就是利用一个死循环或无截止条件的递归达到定时刷新canvas场景的函数，也就是人们常说的canvas刷新率（fps）。在讨论主循环的用处之前，我们先明确一下一个简单的完整webgl的渲染过程是怎样的，请看下图。好了我们通过上图看到一个mesh完整的渲染流程，大致再讲解一下，首先如果是持续...
WebGL 3D on iOS8 正式版【图】
今天iOS8终于正式发布了，升级了手头设备后对我来说最重要的就是测试WebGL的3D是否真的能跑苹果的系统了，跑了多个HT for Web的3D例子都非常流畅，比Android刚支持WebGL时好太多了，基本还没发现什么问题，苹果做事还是值得肯定，要嘛不做，要做就做真正能用的WebGL。 以下是跑HT for Web的3D网络空间拓扑图在iphone5上的截图和视频操作效果，自然不如PC上流畅，但iOS8第一步就能让WebGL达到这样的效果和性能我已经很知足了，感谢苹...
javascript – WebGL / Three.js中的Softbody？
有没有办法将软体物理与WebGL或threejs集成？我可以以某种方式集成PhysX引擎吗？ 我需要在3d柔软的身体内移动一个3d刚体,让软体变形.理想的柔软体具有与粘土相似的塑性. 我正在努力实现的目标是什么？ 任何建议或方向将不胜感激.解决方法:已经有一些3D物理引擎,如ammo.js,cannon.js,oimo.js或goblin physics.你会发现所有这些都在与软体挣扎. 基于ammo.js的子弹引擎可以做软体,但(官方)它还没有实现.见https://github.com/kripken/...
WebGL之绘制三维地球【代码】【图】
通过Three.js也许可以很方便的展示出3D模型，但是你知道它是怎么一步一步从构建网格到贴图到最终渲染出3D模型的吗？现在我们直接使用底层的webgl加上一点点的数学知识就可以实现它。 本节实现的效果: WebGL三维地球内容大纲构建网格编写着色器实现3D地球构建网格 首先我们要建立球体的三维模型，三维网格模型包括如下属性（不熟悉请复习webgl教程）：顶点(position) 法线(normal) 贴图坐标(uv) 顶点索引(indices)最后要构建出如下所...
Javascript高性能WebGL图表--LightningChart JS【图】
高性能的JavaScript图表库，专注于实时数据可视化。 Web上性能最高的图表库 LightningChartJS具有出色的执行性能-使用高数据速率同时监视数十个数据馈送。GPU加速和WebGL渲染可确保有效利用设备的图形处理器，从而实现高刷新率和流畅的动画效果。性能高达TENS的数百万在实时数据点 良好用户体验 LightningChart?JS极其强大的渲染功能可确保平滑的动画超出所有行业标准的每个图表数据量。图形库提供直观的触摸屏交互，包括缩放，...
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】【图】
本文实例讲述了jQuery+HTML5实现WebGL高性能烟花绽放动画效果。分享给大家供大家参考，具体如下： 运行效果：完整代码如下： <!DOCTYPE html> <html class=" -webkit- js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations cssc...
WebGL / Javascript：具有多个对象的对象转换【代码】
我想绘制几个对象,然后通过选择具有键盘索引的特定对象来转换它们.我们说1-5. >我装了画布.>我初始化了webgl-context.>我定义了顶点/片段着色器并将它们绑定到我“使用”的程序(gl.useProgram(“program”)). 然后我初始化了一个VertexBuffer(它是一个自己的函数).我在那里定义了一个立方体的顶点并绑定了该缓冲区.在同一个函数中,我定义了我的锥顶点,并将其绑定到不同的缓冲区. 问题是,我如何制作不同的物体,我可以单独转换？我的...
WebGL学习教程之Three.js学习笔记(第一篇)
webgl介绍 WebGL是一种3D绘图协议，它把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染。 WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏。 原生的WebGl比较复杂，主要通过对顶点着色器和片元着色器的操作，来实现渲染，但实现起来比较复杂，需要一定的数学基础，但更多的是需...
基于HTML5和WebGL的碰撞效果实现【图】
这是公司大神写的一个放官网上给用户学习的例子，我一开始真的不知道这是在干嘛，就只是将三个形状图元组合在一起，然后可以同时旋转、放大缩小这个三个图形，点击“Animate”就能让中间的那一个图元单独绕着某一个点旋转，表单最上方的“Axis”真的完全不知道拿来干嘛用的，觉得好累赘，而且是官网的demo，也没有解释。。。所以我今天得任务就是完全剖析这个例子！首先让我们来看下这个案例：我们来看看如何操作这个3d交互模型，可...
javascript-选项卡处于非活动状态/用于录制时有背景时,画布不会重新绘制(WebGL)【代码】
我正在构建在线Web应用程序,该应用程序在画布上呈现视频,然后使用canvas.captureStream()和mediaRecorder记录画布.问题在于,当用户切换选项卡或最小化窗口时,画布会冻结.我使用了webWorkerSetInterval(Hacktimer.js)后,动画一直保持运行状态.根据Chrome,他们尚未提供解决方案https://bugs.chromium.org/p/chromium/issues/detail?id=639105. 有人可以建议解决方法吗？我尝试了不允许最小化但未成功的新窗口.切换窗口时录制不会停止...
javascript – 我们如何在webgl中的两个画布中显示相同的对象？【代码】
我在一个情况下,我有两个画布,我想在两个画布中显示相同的对象(事实上我必须在每个画布中显示不同的对象,但我想从两个中显示相同的对象开始),但我我不能这样做, 有人可以请我这样做吗？ 我尝试这样做是:(我有两个灰色的画布(帆布和帆布2),它在两者中都显示多个方块,但它只显示一个),如何在两者中显示. 我的代码是：<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head><script class="WebGL">var gl,gl...
unity打包webgl程序和js键盘监听事件冲突的问题。【代码】
最近用unity发布webgl程序时，出现了一个挺蛋疼的问题就是，webgl里面的程序他会接受js的键盘监听事件，这样就导致了webgl程序可以使用出入框，让后js程序的输入框就无效了，为了解决这个问题，我也找了一些资料，不过看了以后感觉大部分不能用，后来通过自己研究总结得出了下面的代码，亲测可用，废话不多说，直接上代码。//初始化页面禁用unity的键盘监听事件。function hackWebGLKeyboard(str) {RemoveEventClick( );}//给unity...
WebGL中的第三个小程序（着色器）【代码】
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Draw a point</title> </head> <body onl oad="main()"><canvas id="webgl" width="400" height="400"></canvas><script src="lib/webgl-utils.js"></script><script src="lib/webgl-debug.js"></script><script src="lib/cuon-utils.js"></script><script src="HelloPoint1.js"></s...
怎样用H5的WebGL实现3D虚拟机房的漫游动画
这次给大家带来怎样用H5的WebGL实现3D虚拟机房的漫游动画，用H5的WebGL实现3D虚拟机房的漫游动画的注意事项有哪些，下面就是实战案例，一起来看一下。第一人称在 3D 中的用法要参考第一人称在射击游戏中的使用，第一人称射击游戏（FPS）是以第一人称视角为中心围绕枪和其他武器为基础的视频游戏类型;也就是说，玩家通过主角的眼睛来体验动作。自从流派开始以来，先进的3D和伪 3D图形已经对硬件发展提出了挑战，而多人游戏已经不可或...
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)【图】
本文实例讲述了WebGL利用FBO完成立方体贴图效果的方法。分享给大家供大家参考，具体如下： 这篇主要记录WebGL的一些基本要点，顺便也学习下如何使用FBO与环境贴图。先看下效果图(需要支持WebGL，Chrome,火狐，IE11)。主要实现过程如下，先用FBO输出当前环境在立方体纹理中，再画出当前立方体，最后画球，并且把FBO关联的纹理贴在这个球面上。 开始WebGL时，最好有些OpenGL基础，在前面讲Obj完善与MD2时，大家可能已经发现了，因为着...