WebGL

博客原文地址： http://blog.wolfire.com/2010/01/Why-you-should-use-OpenGL-and-not-DirectX && https://www.cnblogs.com/y114113/p/10676352.html 当我们遇到其他游戏程序员并谈论我们使用 OpenGL 开发 Overgrowth 时总是会遇到怀疑的眼神。为什么要用OpenGL？ DirectX 才是未来。当我们使用OpenGL去告诉显卡如何工作时，房间的温度下降了10度。 OpenGL 是什么? 在1982年，Silicon公司开发售卖使用称为 Iris GL 的API的高性能图形显示终端。随后的几年，Iris GL变得臃肿和难以维护，直到silicon决定彻底走向新的一步：完全的重构Iris GL并开源。他们的竞争者可以使用这种新的开放图形库（OpenGL）但是作为回报，他们必须帮助维护更新该库。 如今，OpenGL 由 Khronos Group 管理。一个由很多公司参与组成的非营利组织，重点是维护高质量多媒体API。在底层，由 OpenGL Architecture Review Board (ARB) 来管理。各种游戏平台都支持OpenGL，包括：Mac，Windows，Linux，PS3，Wii，IPhone，PSP和DS，除了XBox，下面我们就要介绍它

上周四(6.20)GMTC2019大会的第一天，很荣幸作为「UI与图形渲染」专场出品人获得了与图形领域几位技术专家同场交流的机会。 图形技术在前端范畴内是一个相对小众的话题，虽然前端工程师几乎每天都在跟图形打交道(CSS)。CSS能够满足绝大多数的需求，即便偶尔遇到相对复杂的UI(比如描边文字)，稍加使用canvas或SVG便足以应对。大多数前端工程师在日常开发工作中并不会(也没必要)思考每个CSS方块背后的底层技术原理。除了从事于数据可视化、地图、游戏等强依赖图形技术行业的人以外，Canvas/SVG/WebGL及其背后的数学知识对于大多前端工程师而言都比较陌生。所以在一个前端大会上，尤其是在“大前端”以及“全栈”概念越来越普及的时代背景下，一个受众群体非常有限的小众技术专场便显得异常冷门和特立独行。当然，做图形专场的目的并不是为了凸显自身的与众不同，而是因为图形技术对前端工程师至关重要，具体原因稍后再表。 主办方在筹备GMTC2019之初并未设定图形专场，后承蒙主办方首肯采纳本人的建议，将去年的「UI与动画」专场更名为「UI与图形渲染」。其实我之所以极力争取设立图形专场有一点小小的私心，因为我本人从事于地图行业，目前的工作绝大多数是跟WebGL打交道但是水平非常粗浅，所以很想跟此领域的技术专家们请教一些技术问题。然而仍然高估了这个领域的从业者规模，讲题的收集异常艰难。相比去年的

当 微信小程 序遇到 AR ，会擦出怎么样的 火花 ？ 期待 与 激动 ...... 通过该教程，可以从基础开始打造一个微信小程序的AR框架，所有代码开源，提供大家学习。 本课程需要一定的基础：微信开发者工具，JavaScript，Html，Css 第四章：基石-摄像头与Three.js结合 【前情提要】 　　上一章，前面的两章内容，我们学习了基本的摄像头数据读取以及Three.js三维场景的创建。这两章内容学习之后，我们已经可以做很多更定制化的开发了。例如： 　　1. 我们已经可以做基于摄像头图像的AR内容开发，（比如人脸识别，AR美妆涂口红，戴帽子，适眼镜等等） 　　2. WebGL的三维游戏。 　　这一章，既是基础也是升华，主要是探讨，如何在微信小程序中出现摄像头画面的背景，然后在背景之上渲染出WebGL的三维内容。 1. 实现在微信小程序中访问摄像头，并且可以实时的拿到每一帧画面的数据。 2. 实现在微信小程序中访问WebGL接口，实现绘制三维物体。该教程采用Three.js引擎 3. 实现在背景为摄像头实时画面的背景上显示WebGL的3D物体。 4. 整体框架搭建 5. 图像算法接入 【目的】 微信小程序中实现摄像头画面为背景，之上渲染WebGL内容 [方案] 　　在开始开发之前，我们想罗列一下各种可能的方案。 　　要想在摄像头画面之上渲染出WebGL的内容

Three.js 关于照相机，视角的理解 另附说明：本系列文章只是作者用于学习理解threejs以及WebGL的学习心得，学习途径也是从 WebGL中文网 上学习所得，如果上述网站认定侵权或不正当触犯其利益，请联系作者（PS:千万别告我），其它转载者造成的影响请自己负责，与本人无关 好了，该声明的也声明了，本人也是初入thre.js的丑新，写写也是为了记录理解，说的不对的地方，也欢迎批评指正 通过对 WebGL中文网 初级教程的前三章的学习。 知道3D应用中有4个最重要的组建 场景（scene）、相机（camera）和渲染器（renderer）还有几何体 场景渲染器几何体的理解不难，这里详细说一下相机 这是照相机的构造函数 //fov 代表视角 //aspect 宽高比 //near 最近看到 //far 最远看到 var camera = PerspectiveCamera( fov, aspect, near , far ) //而这里其实确认的是照相机里近平面的距离 camera.position.z = 5 ; 同时需要当心的是这里使用的是右手坐标系（听视频老师讲的，本人也亲测了） 另附学习代码 < script > var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75 ,

WebGL高级编程：开发Web3D图形 目录 WebGL简介1 1.1 WebGL基础1 1.2 浏览器3D图形吸引人的原因2 1.3 设计一个图形API3 1.3.1 即时模式API3 1.3.2 保留模式API3 1.4 图形硬件简介4 1.4.1 GPU4 1.4.2 帧缓存5 1.4.3 纹理存储器6 1.4.4 视频控制器6 1.5 WebGL图形流水线6 1.5.1 顶点着色器8 1.5.2 图元装配11 1.5.3 光栅化12 1.5.4 片段着色器12 1.5.5 逐片段操作15 1.6 WebGL与其他图形技术的比较16 1.6.1 OpenGL16 1.6.2 OpenGL ES 2.018 1.6.3 Direct3D19 1.6.4 HTML5画布21 1.6.5 可缩放矢量图形25 1.6.6 VRML与X3D26 1.7 线性代数简介27 1.7.1 坐标系27 1.7.2 点与顶点27 1.7.3 矢量28 1.7.4 矢量的点积或标积29 1.7.5 叉积30 1.7.6 齐次坐标31 1.7.7 矩阵31 1.7.8 仿射变换34 1.8 小结39 第2章 创建基本的WebGL示例41 2.1 绘制三角形41 2.1.1 创建WebGL上下文45 2.1.2 创建顶点着色器和片段着色器47 2.1.3 编译着色器48 2.1.4

课程目录 01-基础部分 : p S! q5 D z- i 01-WebGL与three.js的基础、与opengl的关系.mp4 02-编写第一个three.js程序.mp4 1 r' ^; [% V7 Z0 F! v) y' ?# f 03-three.js程序框架，绘制一条直线.mp4 & i! |; I! ^- O' `% Y0 x3 t 04-三维世界的组成(点、线).mp4 # Q E P+ n( ?/ P: }8 V/ q 05-坐标系的秘密（世界坐标、本地坐标）.mp4 ; G& u; p3 g7 g2 W$ k 06-three.js让场景动起来的两种方法.mp4 07-帧循环、游戏循环、渲染循环需要知道的深入意义.mp4 1 p$ ~& @6 D5 O5 d# q2 D- i [ 08-three.js（WebGL）相机的工作原理，适用于任何一种3D编程方法.mp4 09-正投影和透视投影相机的实践.mp4 4 y0 \- b5 g/ O+ i* t. k 10-深入浅出WebGL中相机的三个向量参数.mp4 13-光的初体验环境光.mp4 2 i' c/ d. U# W 14-光的初体验环境光2.mp4 15-光的初体验点光源.mp4 ; n/ t; n1 v- ]8 l% \ 16-纹理一种让模型美丽的特殊技能.mp4 ! V4 y9 Z' c& M0 L%

总有人会问，这个或者那个功能怎么弄，或者看到别人做了什么酷炫的效果也想仿造。其实，功能的实现无非两种： 1、调用Cesium现有的API组合实现：往往照猫画虎，还存在性能不过关的问题，绕了半天其实终究还是二次开发的范畴 2、自己动手实现：灵活高可定制，所需要的技术门槛也相对要高 有的效果或者功能，Cesium团队有做，那还好直接调用，但一旦运用起来，还是经常会遇到有的功能实现起来还是很费劲。不想做效果上的让步，就只能眼巴巴等着Cesium每月的更新。其实Cesium整套源代码走的是开源策略，而且采用的是Apache License 2.0许可，这就给我们学习改造提供了基础。我们可以在把控熟读源码的基础之上，运用WebGL1.0 （甚至WebGL2.0）的技术来实现我们想要的效果，毕竟在帧离线绘制、场景顶点数组命令传递、渲染精度算法等等前端三维球模型绘制上Cesium源码上已经有了诸多积累，可以帮助我们快速从底层开发构建，但归根结底，需要我们对源码与WebGL有足够的了解！所以，在学习和掌握Cesium源码的过程中一直信守一点： WebGL才是王道！ 关于Apache 2.0版本许可的详尽描述： https://github.com/AnalyticalGraphicsInc/cesium/blob/master/LICENSE.md 来源： oschina 链接： https:/