three.js
文章平均质量分 82
小秧@
专注于webgl, webgpu,three.js, cesium.js等web3d的前端开发工程师
展开
-
webgl点光源的漫反射
1.webgl点光源的漫反射点光源的特点:点光源照射到物体上的每个顶点的入射光方向是各不相同的。需要一个点光源的位置。需要一个点光源的光颜色。需要计算的是我们需要计算出每个顶点的入射光线的方向。点光源向四周放射光线,所以顶点处的光线方向是由点光源坐标 - 顶点坐标而得到得矢量入射光线的方向 = 点光源的坐标 - 顶点坐标顶点着色器中声明点光源的位置'uniform vec3 u_LightPosition;\n' + // 点光源的位置获取地址,并且赋值const u_Li原创 2022-01-11 00:18:45 · 4193 阅读 · 0 评论 -
webgl添加环境光示例
1.环境光环境光(间接光)是指那些光源发出后,被墙壁等物体多次反射,然后照到物体表面上的光。环境光从各个角度照射物体,其强度是一致的。比如说,在夜间打开冰箱的门,整个房间都会有些微微亮,这就是环境光的作用。环境光不用指定位置和方向。只需要指定颜色就可以了。2.环境光的反射特点:方向,环境光的反射方向是,和入射光的方向刚好相反。照射物体的方式都是各方向均匀,强度相等的。公式:环境光反射光的颜色 = 物体表面基底色 * 环境光的颜色3.漫反射,环境光反射同时存在时公式:表面的反射光颜色原创 2022-01-10 18:13:13 · 456 阅读 · 0 评论 -
webgl的平行光漫反射示例
1.webgl的平行光漫反射示例在现实生活中,我们看到物体是什么颜色,都是要通过光的反射进入我们眼睛我们才能看到物体是什么颜色。所以在webgl中我们要感受到光照明暗差异的效果,最终我们是通过改变每个顶点的颜色来实现的。2.反射光的颜色物体朝哪个方向反射光,反射光的颜色是什么?取决与:入射光的颜色, 入射光的方向, 物体的本身的颜色,物体反射特性,共四个参数来决定。而反射类型又分为: 漫反射,环境反射。漫反射光的颜色 = 物体表面基底色 * 入射光的颜色 * cosθ好了现在我们知道漫反射光原创 2022-01-10 03:43:57 · 1941 阅读 · 0 评论 -
webgl中解决深度冲突-多边形偏移
1.webgl中解决深度冲突-多边形偏移1.什么是深度冲突?就是当几何图形或者物体的两个表面极为接近时,就会使得表面看上去斑斑点点,这种现象就是 深度冲突。看看这个缓冲区渲染出的效果缓冲区数据var verticesColors = new Float32Array([ // Vertex coordinates and color 0.0, 2.5, -5.0, 0.4, 1.0, 0.4, // The green triangle -2.5, -2.5,原创 2022-01-03 22:13:09 · 784 阅读 · 0 评论 -
webgl的隐藏面消除
1. webgl的隐藏面消除在将这个的时候,我想需要知道一个前提。webgl中使用缓冲区,来绘制图形时,是按照顺序来绘制的。webgl中绘制图形时,后绘制的图形会覆盖先绘制的图形。缓冲区的数据var verticesColors = new Float32Array([ 0.0, 1.0, 0.0, 0.4, 0.4, 1.0, // The front blue one -0.5, -1.0, 0.0, 0.4, 0.4, 1.0, // 蓝色 z:原创 2022-01-03 01:43:34 · 556 阅读 · 0 评论 -
webgl的透视投影矩阵
1.将webgl的可视空间设置为透视投影矩阵2.什么是透视投影矩阵它能实现一种效果,近大远小的效果。因为我们用人眼去观察世界的效果,也是近大远小。使用cuon-matrix.js来创建一个透视投影矩阵。const projMatrix = new Matrix4(); // 创建一个4*4的矩阵projMatrix.setPerspective(30, canvas.width / canvas.height, 1, 1000); // 设置矩阵为透视投影矩阵垂直视角,及可视空间顶面 和原创 2022-01-03 00:34:17 · 658 阅读 · 0 评论 -
webgl,正射投影矩阵
1.正射投影矩阵正射投影矩阵,牵扯到六个参数left近裁剪面的 左边值top近裁剪面的 上边值right近裁剪面的 右边值bottom近裁剪面的 下边值near近边界点far远边界点会形成一个立方体的可见区域,在这个立方体的物体,才会绘制出来。如果物体有有一部分在可视区域立方体外面,一部分在立方体里面,那么就只会在可视区域(立方体)里面的那部分。所以我们会见到有些物体,被裁剪了,有缺失。其实是哪个物体的一部分超出了可视区范围。才会出现缺失。2.设置正射投影矩阵代码cons原创 2021-12-27 00:50:14 · 815 阅读 · 0 评论 -
webgl中实现根据顶点位置,来确定颜色
1.webgl中实现更加顶点位置,来确定颜色要实现这个功能的话,重点是gl_FragCoord该内置变量2.gl_FragCoord该内置变量的第一个分量,和第二个分量表示片元在<canvas></canvas>坐标系统中的坐标值。1.顶点着色器const VSHADER_SOURCE = 'attribute vec4 a_Position;\n' + 'void main() {\n' + '原创 2021-12-18 21:07:01 · 349 阅读 · 0 评论 -
webgl中顶点着色器的varying变量,使用方法。
1.webgl中顶点着色器的varying变量,使用方法。1.在webgl中我们在顶点着色器中使用varying声明了的变量2.那么只有在片源着色器张也使用varying声明了同种类型的变量了3.varying变量的作用是从顶点着色器向片元着色器传输数据。1.顶点着色器const VSHADER_SOURCE = 'attribute vec4 a_Position;\n'+ 'attribute vec4 a_Color;\n'+ 'varyi原创 2021-12-18 17:56:24 · 612 阅读 · 0 评论 -
webgl中如何通过一个缓冲区,实现传递多种顶点数据.
1.webgl中如何通过一个缓冲区,实现传递多种顶点数据.这个要求是什么呢?一般我们创建一个缓冲区,都是对顶点坐标进行操作。如果我们要对每个顶点的尺寸也是一个缓冲区进行的赋值操作,那么我们一般又要创建一个缓冲区。如果我们又要对什么进行赋值的话,我们又又要创建一个新的缓冲区。 而我要讲的是入通过一个缓冲区,将顶点的不同信息一起传入赋值。如何完成上面的需求呢?首先你要会使用webgl的缓冲我们只需要改变 vertexAttribPointer这个API的某几个参数就可以了。如果你不知道 如何使原创 2021-12-14 01:42:46 · 1187 阅读 · 0 评论 -
WebGL中,如何通过javascript来修改着色器的数据。
1.WebGL中,如何通过javascript来修改着色器的数据。1.在对应的着色器中,将需要通过js修改的数据,使用attribute来声明2.通过gl.getAttribLocation()来获取,attribute声明的变量的地址。3.通过gl.vertexAttrib3f()来修改对应的新的值在对应的着色器中,将需要通过js修改的数据,使用attribute来声明。以顶点着色器为例。const VSHADER_SOURCE = 'attribute vec4 a_Po原创 2021-11-23 01:24:41 · 629 阅读 · 0 评论 -
分析THREE.JS中examples的案例之-canvas_geometry_panorama_fisheye.html纹理贴图
1.分析THREE.JS中examples的案例之-canvas_geometry_panorama_fisheye.html纹理贴图1.首先我们先看这个案例的效果图,2. 那么这个应该怎么做呢?这个其实不能,如何让我做的话我会是在一个矩形的几何体中添加对应的纹理贴图但是如果你和我是一样的想法的话,那你就错了。其实这个案例的代码也挺简单的,不难就是有两个疑惑点我这里就是说一些特殊点,不会从头说明这个代码的实现。4. 创建了一个立方体几何体(THREE.BoxGeometry(300,3原创 2021-08-02 22:14:16 · 312 阅读 · 0 评论 -
THREE.JS中如何保存和加载场景中的网格模型,以BoxGeometry几何体为例。
1.THREE.JS中如何保存场景中的网格模型,以BoxGeometry几何体为例。我们向把场景中的立方体对象保存下来,这里我们保存到本地存储中然后从本地存储中拿到这个对象,经过解析然后在加载到场景中2.初始化场景,渲染器,相机,立方体let boxGeomtry = new THREE.BoxGeometry(30,30,30);let boxMaterial = new THREE.MeshLambertMaterial({ color: 'red'})let box = new T原创 2021-07-18 17:22:23 · 712 阅读 · 0 评论