WebGL

前言 近年来，无人机的发展越发迅速，既可民用于航拍，又可军用于侦察，涉及行业广泛，也被称为“会飞的照相机”。但作为军事使用，无人机的各项性能要求更加严格、重要。本系统则是通过 Hightopo 的 HT for Web 产品来搭建的一款 无人机 3D 可视化系统，通过对无人机及其信息的全景展示来模拟无人机状态的监控。 系统中包含 4 种展示模式：实体模式 、热力模式、线框模式和内部模式，通过飞机下方操作按钮即可进行模式切换。 预览地址： http://www.hightopo.com/demo/Drones/ 实现过程 加载界面采用 2D 拓扑组件进行绘制，全矢量化图标，与传统的 png、jpg 等格式的图片相比，完美适配移动端、PC 端、大屏等各种尺寸及分辨率屏幕，不会出现失真情况。 无人机及周边信息面板采用 3D 引擎进行场景搭建，用户可从场景任意位置对无人机进行查看。 动画过程采用产品提供的动画函数 ht.Default.startAnim 来驱动图形属性值的改变，应用其 Time-Based 的方式，只需要指定动画周期 duration 的毫秒数，由系统去计算帧数或 action 函数被调用的次数，以保证更加高效、平滑的进行动画过程。 界面 加载界面中通过动态改变图形的属性值来展现加载进度，加载完毕后通过动画的 finishFunc 调用 hidden2d

OpenGL和WebGL基本概念 OPEN GL:一个跨编程语言、跨平台 的编程接口规格的专业的图形程序接口。它用于三维图像（二维的亦可），是一个功能强大，调用方便的底层图形库。 WebGL:›一个3D图形标准›融合了Javascript和OPEN GL ES2.0›为HTML5 Canvas提供了硬件3D加速渲染Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化 OpenGL是一个底层库，他是一个和语言和平台无关图形程序接口（包括二维和三维）可以有多种实现方式，而WebGL则是跟Web有关，是一个Web层面的标准，在WebGL标注下，我们可以通过javascript来实现调用OpenGL等底层图形库进行三维动画制作，是不是相当cool 当然目前由于硬件的限制，Web层面的三维动画开发才刚刚开始，也许几年之后硬件有了很大的发展，说不定WebGL会火热起来 他们之间的关系如上所示 WebGL的特点 1. WebGL最大的特点就是他是浏览器自带的标准，也就是不需要安装任何插件和组件，不同于flash和siverlight，这对于他来说是一个很大的优势 2. 其次WebGL通过统一的、标准的、跨平台的OpenGL接口实现，从而可以利用底层的图形硬件加速功能进行的图形渲染 支持情况 从图中可以看到，Webkit浏览器基本都是支持的

原文地址： WebGL多模型光照综合实例 WebGL是一个非常的接近硬件底层的光栅化API, 从非常类似C/C++风格的API调用方式就可以看出来, 习惯了高级语言的我们会觉得很不友好,觉得特别繁琐. 这个也是很多人觉得WebGL难的原因之一. 如果我们要使用WebGL做一些项目,毫无疑问要么使用Three.js之类的3D库, 要么需要对原生的API进行封装. 这段时间查看了一些WebGL工具库的源代码, 参考封装出了一个简单的工具库,这样往后用WebGL做小项目就方便多了. 经过前面章节的学习, WebGL的知识点掌握的差不多了, 终于到了做特效和Demo的阶段了,来看一下这节实现的特效： WebGL多物体多光源场景 内容大纲 实现图形绕坐标原点旋转, 同时给所有的物体增加环境光, 漫反射, 高光. 其中旋转功能使用矩阵复合变换实现; 光照部分比较复杂,实现了多个光源照射. 着色器 模型变换 着色器 顶点着色器 代码很简单,逐顶点传入坐标,法向量矩阵,模型矩阵,mvp矩阵. attribute vec4 a_position; attribute vec4 a_normal; uniform mat4 u_modelMatrix; uniform mat4 u_normalMatrix; uniform mat4 u_mvpMatrix; varying vec3 v

　　webgl1不支持设置线段宽度，这就只好通过shader来实现了，参考了踏得网的例子，引用地址：http://wow.techbrood.com/fiddle/43140。先在此感谢踏得网创始人之一 Ryan.chen 陈晓峰。介绍一下踏得网，这是一个推广交流webgl的网站，同学们可以去学习交流。由于本文代码完全抄用踏得网的例子，所以本文不是案例原创，但本文会将对借鉴代码的理解详细分析。 　　我们先贴出shader着色器代码，来看一下。 <script id="vertex" type="x-shader"> attribute vec2 aVertexPosition; void main() { gl_Position = vec4(aVertexPosition, 0.0, 1.0); } </script> <script id="fragment" type="x-shader"> #ifdef GL_ES precision highp float; #endif uniform vec4 uColor; void main() { gl_FragColor = uColor; } </script> 首先我们来分析一下顶点着色器vertex，只有一个attribute参数，是vec2类型的参数 aVertexPosition，线段的两个顶点坐标

====教程=================== webGL中文网：http://www.hewebgl.com/ webGL API：https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API 如何启用WebGL ：http://blog.csdn.net/long405581649/article/details/22614153 ====文章=================== WebGL API概述：http://www.tuicool.com/articles/uM7ZJfR WebGL框架：http://www.csdn.net/article/a/2013-12-18/15817486 WebGL技术储备指南：http://www.open-open.com/news/view/1eb8555 原生API介绍：http://www.csdn.net/article/a/2013-12-21/15817510 来源： https://www.cnblogs.com/jymz/p/6015857.html

一、我们讲什么？ 我们讲两个东西： 1、WebGL背后的工作原理是什么？ 2、以Three.js为例，讲述框架在背后扮演什么样的角色？ 二、我们为什么要了解原理？ 我们假定你对WebGL已经有一定了解，或者用Three.js做过了一些东西，这个时候，你可能碰到了这样一些问题： 1、很多东西还是做不出来，甚至没有任何思路； 2、碰到bug无法解决，甚至没有方向； 3、性能出现问题，完全不知道如何去优化。 这个时候，我们需要了解更多。 三、先了解一个基础概念 1、什么是矩阵？ 简单说来，矩阵用于坐标变换，如下图： 2、那它具体是怎么变换的呢，如下图： 3、举个实例，将坐标平移2，如下图： 如果这时候，你还是没有理解，没有关系，你只需要知道，矩阵用于坐标变换。 四、WebGL的工作原理 4.1、WebGL API 在了解一门新技术前，我们都会先看看它的开发文档或者API。 查看Canvas的绘图API，我们会发现它能画直线、矩形、圆、弧线、贝塞尔曲线。 于是，我们看了看WebGL绘图API，发现： 它只能会点、线、三角形？一定是我看错了。 没有，你没看错。 就算是这样一个复杂的模型，也是一个个三角形画出来的。 4.2、WebGL绘制流程 简单说来，WebGL绘制过程包括以下三步： 1、获取顶点坐标 2、图元装配（即画出一个个三角形） 3、光栅化（生成片元，即一个个像素点） 接下来

之前的文章介绍了webgl. 这里进一步精简。 WebGL的全部内容就是创建不同的着色器， 向着色器提供数据然后调用 gl.drawArrays 或 gl.drawElements 让WebGL调用当前顶点着色器处理每个顶点，调用当前片断着色器渲染每个像素。 既然着色器需要数据,着色器分两部分,顶点和片段着色器 顶点着色器需要的数据，可以通过以下三种方式获得。 Attributes 属性 (从缓冲中获取的数据) Uniforms 全局变量 (在一次绘制中对所有顶点保持一致值) Textures 纹理 (从像素或纹理元素中获取的数据) 片断着色器所需的数据，可以通过以下三种方式获取 Uniforms 全局变量 (values that stay the same for every pixel of a single draw call) Textures 纹理 (data from pixels/texels) Varyings 可变量 (data passed from the vertex shader and interpolated) 属性写入 var buf = gl . createBuffer (); gl . bindBuffer ( gl . ARRAY_BUFFER , buf ); gl . bufferData ( gl . ARRAY_BUFFER ,

“哥，你又来啦？” “是啊，我随便逛逛。” “别介啊……给我20分钟，成不？” “5分钟吧，我很忙的。” “不行， 20分钟，不然我真很难跟你讲清楚。” “好吧……” “行，那进来吧，咱好好聊聊” 一、我们讲什么？ 我们讲两个东西： 1、WebGL背后的工作原理是什么？ 2、以Three.js为例，讲述框架在背后扮演什么样的角色？ 二、我们为什么要了解原理？ 我们假定你对WebGL已经有一定了解，或者用Three.js做过了一些东西，这个时候，你可能碰到了这样一些问题： 1、很多东西还是做不出来，甚至没有任何思路； 2、碰到bug无法解决，甚至没有方向； 3、性能出现问题，完全不知道如何去优化。 这个时候，我们需要了解更多。 三、先了解一个基础概念 1、什么是矩阵？ 简单说来，矩阵用于坐标变换，如下图： 2、那它具体是怎么变换的呢，如下图： 3、举个实例，将坐标平移2，如下图： 如果这时候，你还是没有理解，没有关系，你只需要知道，矩阵用于坐标变换。 四、WebGL的工作原理 4.1、WebGL API 在了解一门新技术前，我们都会先看看它的开发文档或者API。 查看Canvas的绘图API，我们会发现它能画直线、矩形、圆、弧线、贝塞尔曲线。 于是，我们看了看WebGL绘图API，发现： 它只能会点、线、三角形？一定是我看错了。 没有，你没看错。 就算是这样一个复杂的模型

WebGL 是什么？ WebGL 是一组基于 JavaScript 语言的图形规范，浏览器厂商按照这组规范进行实现，为 Web 开发者提供一套 3D图形 相关的 API。 这些 API 能够让 Web 开发者使用 JavaScript 语言直接和显卡（GPU）进行通信。当然 WebGL 的 GPU 部分也有对应的编程语言，简称 GLSL 。我们用它来编写运行在 GPU 上的着色器程序。着色器程序需要接收 CPU（WebGL 使用 JavaScript） 传递过来的数据，然后对这些数据进行流水线处理，最终显示在屏幕上，进而实现丰富多彩的 3D 应用，比如 3D 图表，网页游戏，3D 地图，WebVR 等。 WebGL 工作原理 3D 模型数据从诞生到最终显示在屏幕上，大家可以想象一下 流水线 的生产过程，流水线按照既定的步骤对原料进行加工，当前步骤只对前一步骤的结果进行处理，然后将处理后的结果传递给下一步骤，最终将原材料生产成完整的产品。WebGL 的工作方式和流水线类似，也是按照流水线的方式将 3D 模型数据渲染到 2D 屏幕上的，业界把这种渲染方式称为 图形管线 或者 渲染管线 。 WebGL 只能够绘制 点 、 线段 、 三角形 这三种基本图元，但是我们经常看到 WebGL 程序中含有立方体、球体、圆柱体等规则形体，甚至很多更复杂更逼真的不规则模型，那么 WebGL