WebGL

Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。使用它它能让 WebGL 变得更加简单。 下面用Three.js渲染一个物体360旋转也是一个很基础的入门学习挺不错的。 WebGL可以完美地通过 HTML脚本 本身实现Web交互式三维动画的制作，无需任何 浏览器插件 支持，它利用底层的图形 硬件加速 功能进行的图形渲染。 其实在3D世界只有三种运动方式：移动、旋转、放大缩小。下面将展示3d旋转效果： 代码： 来源： https://www.cnblogs.com/yscode/p/8941447.html

在这里，我们将动态画面简称为动画（animation）。正如动画片的原理一样，动画的本质是利用了人眼的视觉暂留特性，快速地变换画面，从而产生物体在运动的假象。而对于Three.js程序而言，动画的实现也是通过在每秒中多次重绘画面实现的。 为了衡量画面切换速度，引入了每秒帧数FPS（Frames Per Second）的概念，是指每秒画面重绘的次数。FPS越大，则动画效果越平滑，当FPS小于20时，一般就能明显感受到画面的卡滞现象。 那么FPS是不是越大越好呢？其实也未必。当FPS足够大（比如达到60），再增加帧数人眼也不会感受到明显的变化，反而相应地就要消耗更多资源（比如电影的胶片就需要更长了，或是电脑刷新画面需要消耗计算资源等等）。因此，选择一个适中的FPS即可。 NTSC标准的电视FPS是30，PAL标准的电视FPS是25，电影的FPS标准为24。而对于Three.js动画而言，一般FPS在30到60之间都是可取的。 setInterval方法 如果要设置特定的FPS（虽然严格来说，即使使用这种方法， JavaScript也不能保证帧数精确性 ），可以使用JavaScript DOM定义的方法： setInterval(func, msec) 其中， func 是每过 msec 毫秒执行的函数，如果将 func 定义为重绘画面的函数，就能实现动画效果。 setInterval

HTML部分 <script type="text/javascript" src="gl-matrix.js"></script> <canvas id="myCanvas" width="400" height="400" style="border: 1px solid red"></canvas> JavaScript部分 以下两点若不注意texture2D有可能取不到值，一片黑色。 老的显卡只支持图片尺寸为2的n次幂的纹理图片。 TEXTURE_MAG_FILTER和TEXTURE_MIN_FILTER参数需要制定。 const vertex = ` attribute vec3 v3Position; uniform mat4 u_matrix; attribute vec2 inUv; varying vec2 outUv; void main() { gl_Position = u_matrix * vec4(v3Position, 1.0); outUv = inUv; } `; // texture2D(u_texture, vec2(outUv.x, outUv.y)); // texture2D(u_texture, outUv; // 从纹理texture中根据outUv坐标取色素rgba const fragment = ` precision

<canvas id="myCanvas" width="600" height="300" style="border: 1px solid red"></canvas> 　　 function createProgram(webgl, vertex, fragment) { // 创建程序 let shader_vertex = webgl.createShader(webgl.VERTEX_SHADER); let shader_fragment = webgl.createShader(webgl.FRAGMENT_SHADER); webgl.shaderSource(shader_vertex, vertex); webgl.shaderSource(shader_fragment, fragment); // 编译源码 webgl.compileShader(shader_vertex); webgl.compileShader(shader_fragment); if (webgl.getShaderParameter(shader_vertex, webgl.COMPILE_STATUS) === false) { console.error('Compile Shader Error: shader_vertex,' + webgl

3 月，跳不动了？>>> 前言： 大数据，人工智能，工业物联网，5G 已经或者正在潜移默化地改变着我们的生活。在信息技术快速发展的时代，谁能抓住数据的核心，利用有效的方法对数据做数据挖掘和数据分析，从数据中发现趋势，谁就能做到精准控制，实时分析，有的放矢，从而获取更快速、更平稳、更长远地发展。在航空领域，机场、航班和航线信息是至关重要的数据，本文将介绍以 HT 为平台，应用 JavaScript、HTML5、GIS 等技术开发的全球航线实例。 界面预览 - 主界面 - 飞机及飞机阴影动画 代码实现 - 场景搭建 本实例的场景包括 3D 和 2D 场景两部分，分别是通过 HT 的 3D 和 2D 编辑器构建，该编辑工具基于 HTML5 技术开发，易于上手，而且预定义了许多图元类型，用户可以无编码快速可视化搭建各种 3D/2D 场景。3D 场景效果如下： 2D 面板部分主要包括左侧航线表格，右侧风暴实时数据表格以及底部的信息面板。左侧航线表格展示了不同大洲的航线信息，大洲可以通过底部的左侧按钮进行切换；右测风暴信息是模拟生成，实时更新；底部信息栏包括大洲按钮及航线详细信息。面板截图： - 航线来源及机场位置的计算 实例的机场和航线源数据来自于开源网站 openflights.org。拿到原始数据之后，我们首先对机场和航线数据进行了初步处理将其存为 JSON 文件

本文由云+社区发表 作者：ivweb qcyhust 导语 WebGL绘制图像时，往着色器中传入颜色信息就可以给图形绘制出相应的颜色，现在已经知道顶点着色器和片段着色器一起决定着向颜色缓冲区写入颜色信息并最终呈现出来，那么这个过程是什么样，如果图形的颜色需要用现有图片来渲染那么又该如何操作？ 颜色缓冲区 在绘制开始前，经常见到调用函数清空画布的代码gl.clear(gl.COLOR_BUFFER_BIT)，清空画布的绘图区实际上就是用之前定义好的背景颜色将颜色缓冲的的颜色清除。颜色缓冲区中存放着需要显示到画布上的像素的颜色数据，它属于帧缓存的一部分，与深度缓存、模板缓存等一起决定着最终画布上图像的显示信息。 可以将颜色缓存区看成图像颜色存储器，在缓存区中以RGB或RGBA的格式存储着画布上每一个像素的颜色信息，各个像素点组合起来就构成了颜色缓存的矩形阵列。这个定义看起来与图片存储器是很相似的，颜色缓存为RGB或是RGBA每一个通道分配存放位数，其中RGB就是颜色数据，A表示alpha也就是该像素的透明度信息，颜色占用的位数值就是颜色深度，比如颜色深度为24位，表示每一个像素24位，一般24位的分配方案就是红色、蓝色、绿色各占8位，如果需要透明效果的话，可以采用32位颜色深度为alpha通道分配8位。 这里可以总结得出，画布上各个像素点呈现的颜色就是存放在颜色缓冲区的颜色信息所决定的

3 月，跳不动了？>>> 前言 工业机械产品大多体积庞大、运输成本高，在参加行业展会或向海外客户销售时，如果没有实物展示，仅凭静态、简单的图片说明书介绍，无法让客户全面了解产品，不仅工作人员制作麻烦，客户看得也费力。如果能在 Web 上做 3D 设备展示，销售人员可以不限平台随时给客户介绍演示。还可以不受现实条件限制，演示设备拆分和组装的过程，展示产品内部结构和动态运作时的效果，让客户更直观了解产品的部件组成，更准确、全面地了解产品的功能和特点，大大降低了沟通成本。为了解决这些行业痛点，本篇文章采用 Hightopo 的 HT for Web 产品实现了一个发动机设备 3D 可视化案例。 系统预览 预览地址：基于 HTML5 WebGL 的发动机 3D 可视化系统（ http://www.hightopo.com/demo/engine/ ） 场景搭建 发动机模型是设计师通过 3ds Max 建模，然后导出 obj 与 mtl 文件，在 HT 中解析 obj 与 mtl 文件生成 3D 场景中可用的模型（可参考 obj 手册《 通过JSON加载 》章节），因为各个部件需要单独操作，所以设备模型拆分为多个 obj 文件后导入。 2D 面板部分则是通过 HT 的矢量绘制，我们需要创建 ht.graph.GraphView 和 ht.graph3d.Graph3dView 来呈现 2D