webgl
关注
分享
扫一扫
文章平均质量分 86
allenjiao
深耕计算机图形学、BIM数字孪生、大数据可视化、物联网+GIS等领域，拥有多项软件著作权和发明专利。
展开
-
Threes.js入门篇之4 - World View Projection
在三维世界，一个模型要想最终呈现到一个照片上，需要经过三次矩阵变换，这三个矩阵分别是： 模型矩阵（World） - 视图矩阵（View）- 投影矩阵（Projection）一. 模型矩阵 将 局部坐标系 下的模型坐标（相对于自身原点的坐标） 转化到 世界坐标系 下，通常称为World Matrix。 可以理解为把多个不同坐标系下的子模型统一到一个世界坐标空间。...转载 2018-03-14 17:28:52 · 739 阅读 · 0 评论 -
三维坐标要建一个4*4的矩阵？
怎么平移一个三维空间中的点我们应该怎么平移一个三维空间中的点呢？答案很简单，我们只需要对这个点的坐标中的每个分量（x,y,z)和对应轴上的平移距离相加即可。 例如，点p1(x1,y1,z1)在X轴Y轴以及Z轴上分别平移Δx,Δy,Δz到新的点p2(x2,y2,z2)，那么我们只需在坐标对应的分量上加上这些增量就可以确定点p2的坐标了。 x2 = x1 + Δx y2 = y1 + Δy z2 = ...转载 2018-05-17 11:25:23 · 8230 阅读 · 2 评论 -
threejs中矩阵旋转原理
矩阵的概念threejs中的矩阵矩阵的应用用于旋转一个几何体创建一个立方体cube放到场景中；绕向量(1,1,0)旋转30度var axis = new THREE.Vector3(1,1,0); //创建一个三维向量var rotWorldMatrix = new THREE.Matrix4(); //创建一个4*4矩阵rotWorldMatrix.makeRotationA...转载 2018-05-17 18:13:41 · 3070 阅读 · 1 评论 -
从3dMax导出供threeJS使用的带动作模型与加载（认真修改详尽版）
评论区发现的建议，最近没空测试，先贴这还有好多人说找不到插件的 https://pan.baidu.com/s/1Q5g0... 密码：b43e 。 应该是他们现在只是维护blender，只有这个的插件，不如改用blender？ 在自己做的一个小玩意中，发现要从3dMax中导出js文件供给threeJS使用，真是太多坑了！所以打算详细记录一下方法，好像开发会3dMax的比较少，但是至少...转载 2018-06-07 14:26:01 · 9500 阅读 · 2 评论 -
【GLSL教程】（一）图形流水线
这是一些列来自lighthouse3d的GLSL教程，非常适合入门。我将边学习边翻译该教程的内容，同时记录在这里，方便以后查询。流水线概述下图描述了一个简化的图形处理流水线，虽然简略但仍然可以展示着色器编程（shader programming）的一些重要概念。一个固定流水线包括如下功能：顶点变换（Vertex Transformation）这里一个顶点是一个信息集合，包括空间中的位置、顶点的颜色...转载 2018-07-13 14:46:19 · 871 阅读 · 0 评论 -
【GLSL教程】（二）在OpenGL中使用GLSL
设置GLSL这一节讲述在OpenGL中配置GLSL，假设你已经写好了顶点shader和像素shader。如果你还没有准备好，可以从如下网址获得相关内容：http://www.3dshaders.com/home/http://www.opengl.org/sdk/tools/ShaderDesigner/http://developer.amd.com/archive/gpu/rendermonk...转载 2018-07-13 14:47:45 · 718 阅读 · 0 评论 -
【GLSL教程】（三）在OpenGL中向shader传递信息
引言一个OpenGL程序可以用多种方式和shader通信。注意这种通信是单向的，因为shader的输出只能是渲染到某些目标，比如颜色和深度缓存。OpenGL的部分状态可以被shader访问，因此程序改变OpenGL某些状态就可以与shader进行通信了。例如一个程序想把光的颜色传给shader，可以直接调用OpenGL接口，就像使用固定功能流水线时做的那样。不过，使用OpenGL状态并不是设置sh...转载 2018-07-13 14:49:00 · 505 阅读 · 0 评论 -
【GLSL教程】（四）shder的简单示例
GLSL的Hello World这一节中包含一个最基本的shader，它提供如下功能：顶点变换然后使用单一的颜色渲染图元。顶点shader前面已经说过，顶点shader负责完成顶点变换。这里将按照固定功能的方程完成顶点变换。固定功能流水线中一个顶点通过模型视图矩阵以及投影矩阵进行变换，使用如下公式：vTrans = projection * modelview *incomingVertex首先G...转载 2018-07-13 14:49:54 · 415 阅读 · 0 评论 -
【GLSL教程】（五）卡通着色
引言卡通着色可能是最简单的非真实模式shader。它使用很少的颜色，通常是几种色调（tone），因此不同色调之间是突变的效果。下图显示的就是我们试图达到的效果：茶壶上的色调是通过角度的余弦值选择的，这个角度是指光线和面的法线之间的夹角角度。如果法线和光的夹角比较小，我们使用较亮的色调，随着夹角变大，逐步使用更暗的色调。换句话说，角度余弦值将决定色调的强度。在本教程中，我们先介绍逐顶点计算色调强度（...转载 2018-07-13 14:50:41 · 526 阅读 · 0 评论 -
【GLSL教程】（六）逐顶点的光照
引言在OpenGL中有三种类型的光：方向光（directional）、点光（point）、聚光（spotlight）。本教程将从方向光讲起，首先我们将使用GLSL来模仿OpenGL中的光。我们将向shader中逐渐添加环境光、散射光和高光效果。后面的教程中我们将使用逐像素光照以获得更好的效果。接下来我们将实现逐像素的点光和聚光。这些内容与方向光很相近，大部分代码都是通用的。在卡通着色的教程中我们接...转载 2018-07-13 14:51:19 · 564 阅读 · 0 评论 -
【GLSL教程】（七）逐像素的光照
逐像素的方向光（Directional Light per Pixel）这一节将把前面的shader代码改为逐像素计算的方向光。我们需要将工作按照两个shader拆分，以确定哪些是需要逐像素操作的。首先看看每个顶点接收到的信息：•法线•半向量•光源方向我们需要将法线变换到视点空间然后归一化。我们还需要将半向量和光源方向也归一化，不过它们已经位于视点空间中了。这些归一化之后的向量会进行插值，然后送入...转载 2018-07-13 14:52:14 · 664 阅读 · 0 评论 -
【GLSL教程】（八）纹理贴图
简单的纹理贴图（Simple Texture）为了在GLSL中应用纹理，我们需要访问每个顶点的纹理坐标。GLSL中提供了一些属性变量，每个纹理单元一个：attribute vec4 gl_MultiTexCoord0;attribute vec4 gl_MultiTexCoord1;attribute vec4 gl_MultiTexCoord2;attribute vec4 gl_MultiTe...转载 2018-07-13 14:52:51 · 1709 阅读 · 0 评论 -
【GLSL教程】（九）其他说明
法线矩阵在很多顶点shader中都用到了gl_NormalMatrix。这里将介绍这个矩阵是什么，以及它的作用。大部分计算是在视图空间内完成的，主要原因是光照的运算要放在这个空间内，否则一些依赖观察点坐标的效果，比如镜面反射光就很难实现。所以我们需要将法线变换到视图空间。变换一个顶点到视图空间的方法如下：vertexEyeSpace = gl_ModelViewMatrix * gl_Vertex...转载 2018-07-13 14:53:27 · 372 阅读 · 0 评论 -
在Three.js中对mesh使用”z-index” 不遮挡
一次业务需要中，需要让场景中的一部分mesh不受场景遮挡限制，类似于透视穿墙效果，就是能隔着墙看到墙后面的物体，也有点类似于css中对页面元素做z-index的操作，比如下图透视外挂的原理：Three.js根据THREE.JS文档提示：只需要修改mesh.renderOrder属性mesh.renderOrder=99;但根据我具体实现后，却发现根本没有作用，后来在网上查了，需要...转载 2018-08-23 16:40:15 · 8187 阅读 · 5 评论 -
THREE.JS 场景世界坐标和平面二维坐标互转
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>场景世界坐标转</title> <style type="text/css">转载 2018-09-19 14:42:09 · 3111 阅读 · 0 评论 -
向量点乘（内积）和叉乘（外积、向量积）概念及几何意义解读
向量是由n个实数组成的一个n行1列（n*1）或一个1行n列（1*n）的有序数组；向量的点乘,也叫向量的内积、数量积，对两个向量执行点乘运算，就是对这两个向量对应位一一相乘之后求和的操作，点乘的结果是一个标量。点乘公式对于向量a和向量b： ...转载 2018-11-07 17:29:27 · 60491 阅读 · 0 评论 -
Threejs ShapeGeometry自定义形状贴图
最近项目需要在3D场景中给自定义的楼层区域进行贴图区分，对于普通的的纯色材质，实现比较简单，但是如果要进行纹理贴图的材质，就有点复杂了，这里写篇文章记录下。首先看看我们的楼层定义，如何实现自定义区域。其实很简单，我们使用有序的点来定义楼层的平面形状，然后根据平面的定义，自动生成3d的平面区域。var areaPts = [];for (var idx = 0 ; idx < ar...转载 2018-11-21 14:40:22 · 12210 阅读 · 5 评论 -
图解WebGL&Three.js工作原理
一、我们讲什么？我们讲两个东西：1、WebGL背后的工作原理是什么？2、以Three.js为例，讲述框架在背后扮演什么样的角色？ 二、我们为什么要了解原理？我们假定你对WebGL已经有一定了解，或者用Three.js做过了一些东西，这个时候，你可能碰到了这样一些问题：1、很多东西还是做不出来，甚至没有任何思路；2、碰到bug无法解决，甚至没有方向；3、性能出现问题，完全不知道如何去优化。这个时候，...转载 2018-04-12 15:14:15 · 1178 阅读 · 0 评论 -
three.js内部拖拽例子全详解
<!DOCTYPE html><html> <head> <title>three.js webgl - draggable cubes</title> <meta charset="utf-8"> <meta name="viewport"转载 2018-04-11 16:46:04 · 2210 阅读 · 0 评论 -
Threes.js入门篇之5 - 场景操纵器Trackball
Three.js 提供了很多操纵器，example下也给了一些操纵器（也叫控制器）的例子，引用 js 可以参考 examples/js/controls/TrackballControls.js 。 Trackball 是众多控制器中应用最多的样例之一，将场景对象封装到一个包围球，将鼠标操作映射为对包围球的旋转（拖拽）。 下图是 example下提供的例子：（对应代码 m...转载 2018-03-14 17:35:12 · 859 阅读 · 0 评论 -
Threes.js入门篇之6 - 场景漫游
THREE.js 支持两种形式的漫游，第一人称漫游（First Person） 和 飞行（Fly），可以分别参考 example 下的 “misc_fps.html” 和 “misc_controls_fly.html”。一. 第一人称漫游 例子中的效果是这样的，通过 【ASDW】控制平移，通过【←↑↓→】控制朝向（try 一下）。 漫游主要是通过 camera 的参数调整...转载 2018-03-14 17:36:53 · 719 阅读 · 0 评论 -
Threes.js入门篇之7 - 场景光照
Three.js 主要支持四种光源模式，分别是 环境光、点光源、平行光 和 聚光灯。另外有半球光源、面光源等，本节暂不涉及。一. 环境光 Ambient Light：所有对象的整体光照模型，控制整个场景的明暗。[html] view plain copyvar ambientLight = new THREE.AmbientLight(ambiColor); // 环境光颜色 s...转载 2018-03-14 17:38:07 · 582 阅读 · 0 评论 -
Threes.js入门篇之8 - 材质与纹理
材质是指几何对应的 颜色信息，想让一个对象最终呈现出你所希望的样子，其中最重要的一个因素就是材质。 来看一下例子 “canvas_material.html”[html] view plain copy// Spheres var geometry = new THREE.SphereGeometry( 100, 14, 7 ); var textureLoader = new ...转载 2018-03-14 17:38:54 · 450 阅读 · 0 评论 -
Threes.js入门篇之9 - 全景图
全景图是一个当下非常流行的展示方式，在 VR | AR领域有广泛应用。 在三维内的 全景图 通常是根据 鼠标事件调整摄像机位置（在包围球内旋转），其基本思路一致，包围球可以通过 球面、立方体来实现，在几何上面贴上全景图纹理，一个典型的全景纹理图可能是下面这几种： 或者也有可能是多副图的形式，组成一个Cube（根据实际的方式会有所不同）。 概念就不解释了，...转载 2018-03-14 17:39:29 · 776 阅读 · 0 评论 -
Three.js进阶篇之1 - 网格
在学习了几何形状和材质之后，我们就能使用他们来创建物体了。最常用的一种物体就是网格（Mesh），网格是由顶点、边、面等组成的物体；其他物体包括线段（Line）、骨骼（Bone）、粒子系统（ParticleSystem）等。创建物体需要指定几何形状和材质，其中，几何形状决定了物体的顶点位置等信息，材质决定了物体的颜色、纹理等信息。本章将介绍创建较为常用的物体：网格，然后介绍如何修改物体的属性。 ...转载 2018-03-14 17:43:50 · 546 阅读 · 0 评论 -
Three.js进阶篇之2 - 动画
动画原理在这里，我们将动态画面简称为动画（animation）。正如动画片的原理一样，动画的本质是利用了人眼的视觉暂留特性，快速地变换画面，从而产生物体在运动的假象。而对于Three.js程序而言，动画的实现也是通过在每秒中多次重绘画面实现的。为了衡量画面切换速度，引入了每秒帧数FPS（Frames Per Second）的概念，是指每秒画面重绘的次数。FPS越大，则动画效果越平滑，当FPS小于2...转载 2018-03-15 10:11:58 · 571 阅读 · 0 评论 -
Three.js进阶篇之3 - 外部模型导入
Three.js有一系列导入外部文件的辅助函数，是在three.js之外的，使用前需要额外下载，在https://github.com/mrdoob/three.js/tree/master/examples/js/loaders可以找到。*.obj是最常用的模型格式，导入*.obj文件需要OBJLoader.js；导入带*.mtl材质的*.obj文件需要MTLLoader.js以及OBJMTLL...转载 2018-03-15 10:12:32 · 5520 阅读 · 1 评论 -
Three.js进阶篇之4 - 着色器
“渲染”（Rendering）是即使非计算机专业的都不会觉得陌生的词，虽然在很多人说这个词的时候，并不清楚“渲染”究竟意味着什么。相反，“着色器”（Shader）很可能是大家比较陌生的词，从名字看上去似乎是用来上色的，但它具体能做什么呢？在解释着色器之前，我们先来聊聊渲染。渲染用通俗的话来说，渲染就是将模型数据在屏幕上显示出来的过程。这听起来好像很简单呢！但正如你打开一个Word写文档一样，之所以...转载 2018-03-15 10:13:15 · 2203 阅读 · 0 评论 -
Three.js进阶篇之5 - 粒子系统
Three.js是一个伟大的开源WebGL库，WebGL允许JavaScript操作GPU，在浏览器端实现真正意义的3D。但是目前这项技术还处在发展阶段，资料极为匮乏，爱好者学习基本要通过Demo源码和Three.js本身的源码来学习。 0.简介 嗨，又见面了。这么说我们已经开始学习Three.js了，如果你还没有看过之前三篇教程，建议你先读完。如果你已经读完前面的教程了，你可能会想做一些关于粒子...转载 2018-03-15 10:13:55 · 1763 阅读 · 0 评论 -
Three.js进阶篇之6 - 碰撞检测
最近在试着用Three.js做一个简单的赛车游戏，里面有一个需要解决的问题是如何判断两个物体发生了碰撞，比如赛车是否碰上了障碍物或者获得了奖励物品。示例我找了一些资料，发现了两个示例程序：第一个示例、 第二个示例 。 以上两个程序都是用 THREE.Raycaster 类来解决问题的。 Raycaster类Raycaster 应该翻译为“光线投射”，顾名思义，就是投射出去的一束光线。 Rayc...转载 2018-03-15 10:14:28 · 3208 阅读 · 0 评论 -
Three.js进阶篇之7 - 3D宇宙特效
[html] view plain copy<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> body {margin: 0;} body, html {overflow: hidden;} body, html, .canvasbox {width: ...转载 2018-03-15 10:15:18 · 1774 阅读 · 0 评论 -
Three.js进阶篇之8 - Physijs物理引擎
Three.js可以通过使用Physijs库向场景中加入物理效果。这个库是基于著名的物理引擎ammo.js。Physiji1.导入库文件[html] view plain copy Physijs.scripts.worker = 'js/Physijs/physijs_worker.js'; Physijs.scripts.ammo = 'js/Physijs/ammo.js'; 两个属性分...转载 2018-03-15 10:15:53 · 2299 阅读 · 0 评论 -
Three.js进阶篇之9 - 纹理映射和UV映射
本文将详细描述如何使用Three.js给3D对象添加贴图（Texture Map，也译作纹理映射，“贴图”的翻译要更直观，而“纹理映射”更准确。）。为了能够查看在线演示效果，你需要有一个兼容WebGL的现代浏览器（最好是Chrome/FireFox/Safari/Edge/IE11+）。本文的在线演示结果和代码请点击这里：Three.js贴图实例。什么是贴图（Texture Mapping）贴图是...转载 2018-03-15 10:16:46 · 1931 阅读 · 0 评论 -
Three.js入门篇之1 - WebGL on HTML
一. 何为WebGL？ WebGL 是基于Web的 三维渲染接口，与OpenGL的不同之处在于，添加了对 JavaScript 的支持，能够为 HTML5 提供硬件加速的三维图形渲染（通过Canvas来和DOM打交道）。 WebGL 是基于 OpenGL ES 2.0 的 Javascript API。通过 HTML5 的 Canvas 来和 DOM 打交道。 讲到这...转载 2018-03-14 17:01:43 · 545 阅读 · 0 评论 -
Threes.js入门篇之2 - Hello World
与OpenGL一样，Three.js 符合右手坐标系，X轴向右，Y轴向上，Z轴朝外： Three.js 的绘制流程可以描述为：1. 生成 渲染器 - THREE.WebGLRenderer，并绑定Canvas绘图画布2. 建立 场景管理器 - THREE.Scene，管理场景对象（场景树） 生成场景对象THREE.mesh，添加到场景管理器3. 创建 相机 - T...转载 2018-03-14 17:02:19 · 556 阅读 · 0 评论 -
Threes.js入门篇之3 - 场景与相机
Three.js 的场景 THREE.Scene 执行场景树管理，场景的创建只需要一句话：[html] view plain copyvar scene = new THREE.Scene(); 场景常用操作包含：1.scene.add(obj); // 在场景中添加物体2.scene.remove(obj); ...转载 2018-03-14 17:03:13 · 677 阅读 · 0 评论 -
three.js and cesium
Three.js是一个轻量级的跨浏览器JavaScript库，用于在浏览器中创建和显示动画3D计算机图形。将Cesium的行星级渲染和GIS功能与Three.js广泛而易用的通用3D API相结合，为新的WebGL体验开启了许多可能性。3D JavaScript库现在已经完全成熟并且广为人知，使得开发人员可以避免在浏览器中使用3D的麻烦。开发人员可以轻松创建相机，对象，灯光，材质和图形，并选择渲染...转载 2019-06-17 15:18:21 · 3414 阅读 · 2 评论