- 博客(213)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 计算机图形学(九)-纹理的应用，环境贴图、凹凸贴图、法线贴图、位移贴图
纹理可以理解为GPU上的一块内存，内存上有一块区域可以做点查询也可以做范围查询，并且很快，可以认为纹理是一块数据，可以做不同类型的查询，不限于把它理解成图像，纹理可以表示很多东西，比如环境光照（环境光映射/环境贴图）
2022-09-18 17:12:45
3124
1
原创 计算机图形学(八)-纹理映射、计算重心坐标、UV插值、双线性插值、MipMap
如上图球的表面贴上一张绘制了地图的二维图片，就变成了地球仪，这张二维的图片就是纹理，把这个图贴到球表面伴随着这纹理的放大缩小以及将纹理中的某个点和球上的某个点对应起来，这个过程就是纹理映射纹理映射的过程通常是这样的，建模人员给开发人员的模型中通常会有与顶点一一对应的uv坐标，同时提供一张纹理贴图，比如说要对模型的某个顶点着色，这时获取到这个顶点对应的uv坐标，拿着这个坐标从纹理贴图中取色，取到后把值赋给存储顶点颜色的变量。
2022-09-18 10:36:04
5039
原创 计算机图形学(七)-深度缓存、着色shadding、着色模型、着色频率、渲染管线
图形渲染过程着色相关知识点，深度缓存实现原理、着色模型，面着色 Flat Shadding，顶点着色 Gauroud Shaddding 片元着色 Phong Shading 光照计算模型：漫反射光照模型、高光模型、环境光模型，渲染管线
2022-09-15 13:15:50
1543
原创 shader编程-三维场景下SDF建模，对模型进行扭曲、弯曲、裁剪、掏空操作（WebGL-Shader开发基础12）
第一张是对方形圆柱进行扭曲操作的效果图，第二张图是对扁平立方体面进行弯曲操作的效果图，第三张图是从内到外依次是原物体，裁剪后的物体，裁剪后掏空物体的效果，从左到右依次对圆柱、球体、甜圈圈进行同样变换的效果
2021-12-22 00:01:37
3814
原创 shader编程-三维场景下SDF建模，平滑交集、平滑并集、平滑差集（WebGL-Shader开发基础11）
三维场景下SDF建模，平滑交集、平滑并集、平滑差集1. demo效果2. 实现要点2.1 平滑运算方法定义2.2 模型计算3. demo代码1. demo效果 smooth-operate 如上所示，三个展示的模型分别为球体和立方体进行平滑交集、平滑并集、平滑差集运算的效果2. 实现要点2.1 平滑运算方法定义demo用到平滑交集、平滑并集、平滑差集运算，它们的定义如下//平滑
2021-12-18 23:32:50
1114
原创 shader编程-RayMarching三维场景下使用交集、并集、差集方法CSG建模（WebGL-Shader开发基础10）
RayMarching三维场景下使用交集、并集、差集方法CSG建模1. CSG介绍2. demo效果3. 实现过程3.1 交集、并集、差集函数3.2 旋转矩阵3.3 基础形状3.4 组合过程3.4.1 互相垂直圆柱实现3.4.2 相交的球体与立方体3.4.3 二者取差集4. demo代码1. CSG介绍上一篇文章学习了模型的基本变换(旋转、缩放、平移)，这篇简单说说CSG建模，即构造实体形状，它是一种通过交集、并集、差集的运算用简单的几何形状创建复杂几何形状的方法，下面的图片可以清楚的描述这种方式建
2021-12-15 00:45:57
2709
1
原创 shader编程-RayMarching三维场景下模型基本变换旋转、缩放、平移（WebGL-Shader开发基础09）
RayMarching三维场景下模型基本变换1. demo概述2. 实现过程2.1 模型的旋转操作2.2 模型的缩放操作2.3 模型的平移操作1. demo概述在之前的一篇文章中讲述了，二维空间中物体的基本变换，即旋转、缩放、平移，现在学习一下三维空间下的基本变换，思路与原理是一样的，只不过是由二维提升为三维2. 实现过程2.1 模型的旋转操作分别绕X轴旋转，Y轴旋转，Z轴旋转的矩阵如下//绕z轴旋转矩阵mat3 rotZ(float a) { return mat3(cos(a),-si
2021-12-12 00:36:40
3207
原创 shader编程-RayMarching与SDF搭建三维场景实现Blinn-Phong光照（WebGL-Shader开发基础08）
RayMarching与Blinn-Phong光照模型搭建三维场景1. demo概述与效果2. Blinn-Phong光照模型介绍3. demo实现3.1 场景物体准备3.2 rayMarching调整3.3 Blinn-Phong光照计算4. demo代码1. demo概述与效果上一篇文章学习了RayMarching，但是做出的场景的效果是黑白，这一篇在上一篇内容的基础上，进行改进，使用Blinn-Phong光照模型渲染出不同色彩的物体，下面是demo的最终效果，不同的物体有了属于自己的色彩
2021-12-11 01:49:00
1098
1
原创 shader编程-RayMarching与SDF结合开始三维探索（WebGL-Shader开发基础07）
RayMarching与SDF结合开始三维探索1. 单色背景颜色1. 单色背景颜色人们之所以可以看到物体，是因为光线从光源发出照射到物体，之后反射进入人们的眼睛，这样就看到了物体，在三维模型中使模型呈现在场景中，光线从光源出发，照射到物体，反射后到达相机，反之，同样可以从相机出发光线摄像物体之后反射到光源，RayMarching 算法就是从相机发射光线，具体请看下图从相机出发，向屏幕中的每一个像素发射一条光线，以其中一条光线为例，光线开始以一定的步长前进，每前进一步判断是否达到物体表面，如果没有继续
2021-11-30 01:00:07
4698
原创 通过代码填充输入框内容校验不生效的处理方式
说明：有一个表单，有两个el-form-item标签，一个是name，一个是age，假如需要通过代码填充有校验的name输入框，但填充完校验不生效，这时需要使用validateField函数对单个表单进行校验处理，测试用例如下<template> <el-col> <el-form ref="ruleForm" :model="ruleForm" label-width="100px"> <el-form-item ref="formIt
2021-11-29 23:20:22
619
原创 shader编程-着色器中颜色基础（WebGL-Shader开发基础06）
shader编程-着色器中颜色基础1. 屏幕颜色2. 颜色根据屏幕坐标变化3. 形状颜色处理4. 借助A通道处理形状颜色1. 屏幕颜色在之前的文章中我们用一个三维向量表示颜色vec3 line_color = vec3(1.0,1.0,0.0);vec3 color = vec3(0.6);用三维向量表示颜色因为正好它的三个分量可以代表RGBA格式的颜色中的Red（红色）Green（绿色）Blue（蓝色）分量，我们在最后通常会有一句gl_FragColor = vec4(color, 1.0
2021-11-23 22:11:13
4932
2
原创 shader编程-2D基本图形SDF(有向距离场)介绍与使用（WebGL-Shader开发基础05）
shader编程-2D基本图形SDF有向距离场介绍与使用1. 有向距离场介绍2. SDF绘制圆3. SDF绘制矩形4. SDF绘制线段1. 有向距离场介绍有向距离场，英文名Signed Distance Field，简称SDF，把空间中与物体表面的距离进行采样，使用负值表示物体内部，使用正值表示物体外部，与物体的表面的距离为0，大于0，小于0和等于0区分物体的区域，你很快可以联想到之前使用的step函数和smoothstep函数，是的，通过与这两个函数的配合，就可以像前面样绘制图形了2. SDF绘制圆
2021-11-21 01:18:50
5502
原创 shader编程-通过交集、并集、差集实现形状的合并（WebGL-Shader开发基础04）
shader编程-通过交集、并集、差集实现形状的合并1. 准备2. 交集实现3. 并集实现3. 差集实现4. 示例代码1. 准备先复习一下数据概念，交集、并集、差集如下图所示我们准备拿圆做实验，绘制圆的函数如下float circle(vec2 st,vec2 center,float radius) { float blur = 0.002; float pct = distance(st,center);//计算任意点到圆心的距离 return 1.0-smoothste
2021-11-17 00:40:34
3499
原创 shader编程-二维空间中使用矩阵实现物体的旋转、缩放、平移变换（WebGL-Shader开发基础03）
shader编程-二维空间中使用矩阵实现物体的旋转、缩放、平移变换1. 变换前物体的绘制2. 旋转的实现1. 变换前物体的绘制在进行变换操前先绘制出要操作的物体，我们就简单的绘制一个矩形来代表，利用之前的绘制矩形的代码稍作修改，之前用的是step函数，现在调整为smoothstep函数，因为旋转时使用step函数绘制的矩形边缘会出现锯齿，具体如下float box(vec3 st){ float right = 0.15; float top = 0.1; float blur = 0.0
2021-11-14 22:44:52
3616
原创 使用shader绘制矩形、矩形框、圆形、圆形框（WebGL-Shader开发基础02）
绘制矩形、矩形框、圆形、圆形框1.绘制矩形1.1 使用if语句绘制1.2 使用step函数绘制1.3 使用step函数简化方法绘制1.4 使用abs对称思想绘制1.5 绘制矩形边框2. 绘制圆2.1 绘制圆形2.2 绘制圆形框3. demo代码1.绘制矩形上一篇文章学习如何绘制线，现在学习如何绘制面，先从绘制矩形开始，其实绘制矩形的思想与绘制线的思想一样，只不过绘制线时限制的区域窄一些，绘制矩形限制的区域宽一些，先来看看绘制第一种绘制矩形的代码1.1 使用if语句绘制思想上面已经说过了，这里只是实践
2021-11-10 00:05:52
6812
原创 使用shader绘制线、线段、曲线（WebGL-Shader开发基础01）
GLSL ES 绘制点、线、面1. 绘制点1.1 绘制方点1.2 绘制圆点2. 绘制线3. 绘制面1. 绘制点1.1 绘制方点1.2 绘制圆点2. 绘制线3. 绘制面
2021-11-03 23:53:28
5906
5
原创 纯shader实现动态警告可视化组件(three.js实战16)
纯shader实现动态警告可视化组件1. demo效果2. 实现要点2.1 绘制外层2.2绘制中间环状圆2.3 绘制中心感叹号3. demo代码1. demo效果 waring-circle 2. 实现要点2.1 绘制外层外层由两部分组成，一个是组成圆环的小圆点，一个是动态变换的弧段，具体实现如下vec4 drawOutCirclePoint(vec2 st){ vec4 o
2021-10-27 00:38:26
1018
原创 纯shader实现移动的箭头(three.js实战15)
纯shader实现移动的箭头1. demo效果2. 实现要点2.1 绘制箭头2.2 绘制不同方向流动箭头3. demo代码1. demo效果 2. 实现要点2.1 绘制箭头首先绘制矩形，然后将两个矩形合并生成一个箭头，然后循环生成五个箭头作为底色，单独绘制一个白色箭头作为当前高亮元素，使白色箭头不断切换到底色中的位置，模拟流动效果 float band(float t,floa
2021-10-27 00:22:18
1809
原创 纯shader实现动态时钟效果(three.js实战14)
纯shader实现动态时钟效果1. demo效果2. 实现要点2.1 绘制刻度2.2
2021-09-05 23:57:28
795
原创 纯shader实现雷达扫描效果(three.js实战13)
1. demo效果2. 实现要点2.1 绘制雷达边框这一步其实就是绘制一个圆，输入一个屏幕坐标st，原型坐标还有半径，使用distance求出坐标上任意点到圆心的距离，将这个距离接近圆半径的点绘制 float drawCircle(vec2 st,vec2 center,float radius) { float pct = distance(st,center); float line_width = 0.01; re...
2021-08-19 23:52:52
3460
3
原创 模拟楼宇扫光效果(three.js实战12)
1.demo效果2. 实现要点2.1 创建shader材质 let buildingSweepingLightShader = { uniforms: { "boxH": { type: "f", value: -10.0 } }, vertexShader: ` varying vec3 vColor; varying float v_pz;..
2021-08-12 23:34:22
3100
6
原创 计算机图形学(六)-光栅化、采样、走样与反走样、滤波与卷积
光栅化1 什么是光栅化（Rasterization）2 单个三角形光栅化3 采样（sampling）1 什么是光栅化（Rasterization）屏幕空间如上图，将电脑屏幕理解为一个二维坐标，屏幕上左下角为坐标原点，水平向右为x轴方向，垂直向上为y轴方向像素(Pixel)在屏幕上排列的最小单位，上图中每一个方块理解为一个像素，假设屏幕大小为w×h，那么在屏幕中一共有w×h个像素，这些像素像二维数组一样在屏幕中排列，左下角像素的坐标是(0,0),右上角像素的坐标为(w-1,h-1)。每个方块的中点
2021-08-07 23:52:34
4347
原创 一个展示百分比的动态可视化组件(three.js实战11)
一个展示百分比的动态可视化组件1. demo效果2. demo代码js3. demo代码HTML1. demo效果2. demo代码js为了方便后期使用，把demo效果抽成组件，写在component.js中，下面是这个文件内容var CirclePercent = function () { var self = this this.percentNum = 0 this.circlePercent = new THREE.Group(); this.materialColor
2021-07-23 22:44:13
813
1
原创 计算机图形学(五)-MVP变换之投影(Projection)变换
MVP变换之投影[Projection]变换1 投影变换介绍2 正交投影2.1 正交投影介绍2.2 正交投影矩阵推导2.3 正交投影矩阵3 透视投影3.1 透视投影介绍3.2 透视投影矩阵推导3.2.1 复习齐次坐标3.2.2 透视投影矩阵推导思路3.2.3 透视投影到正交投影的变换矩阵推导3.3 透视投影矩阵3.4 FOV和Aspect ratio表示透视投影矩阵1 投影变换介绍之前已经提到MVP变换指的是：模型变换(model)、视图变换(view)、投影变换(projection)。这三大变换好比
2021-07-22 23:11:23
3469
5
原创 计算机图形学(四)-MVP变换之视图(View)变换
视图变换与投影变换1 视图变换1.1 相机介绍1.2 视图变换矩阵2 投影变换2.1 正交投影2.2 透视投影1 视图变换视图变换说的通俗易懂一点就像拍照的时候摆相机，那么就要用拍照来类比一下把三维空间中的物体投影到二维平面上展示，拍照通常需要三步，人物摆pose、调整相机、按下快门拍照。把三维物体投影到二维平移则需要经过模型变换(model)、视图变换(view)、投影变换(projection)， 现在把它们与拍照类比如下摆Pose-模型变换调整相机位置-视图变换拍照-投影变换1.1 相
2021-07-21 22:49:58
1738
2
原创 计算机图形学(三)-图形学中的基本变换（缩放、平移、旋转、剪切、镜像）
图形学中的基本变换1. 二维变换1.1 缩放变换1.2.镜像变换1.3 剪切变换1.4 旋转变换1.5 平移变换1.5.1 原本平移变换1.5.2 平移变换齐次坐标表示1.6 逆变换1.7 组合变换1.8 非原点的旋转变换1.9 二维主要变换矩阵总结1.10 二维矩阵变换合并2 三维变换2.1 三维平移变换2.2 三维缩放矩阵2.3 三维旋转矩阵2.3.1 绕x轴旋转矩阵2.3.2 绕y轴旋转矩阵2.3.3 绕z轴旋转矩阵2.3.4 绕任意轴旋转矩阵1. 二维变换1.1 缩放变换如上图，如果想把一
2021-07-18 21:12:12
13909
13
原创 WebGL使用点光源照明（WebGL进阶06）
使用点光源照明1. demo效果2. 点光源介绍1. demo效果上图效果为原点处有点光源照射的效果2. 点光源介绍现实生活中最常见的光照，就是灯泡照明，灯泡发出的光从灯泡开始向四面八方散射出去，实际上，灯泡发出的光衰减醒来。距离越远，到达的光就越少。本次实现的点光源的处理中没有考虑到这种光衰减 我们已经知道，在WebGL中，在使用平行光的时候需要知道平行光的方向，但是点光源只有一个位置属性，本身没有方向属性，但是我们可以用点光源的坐标减去顶点的坐标就得到 点光源的方向点光源方向计算<点
2021-07-17 13:35:28
1012
原创 WebGL三维模型实现Phong着色（WebGL进阶05）
WebGL三维模型实现Phong着色1. demo效果2. Phong着色与Gouraud 着色2.1Gouraud 着色2.2 Phong 着色3. 实现要点4. demo代码1. demo效果2. Phong着色与Gouraud 着色通过前面几篇文章，大致知道典型的照明技术有三种：漫反射光（diffuse light）、环境光（ambient light）和反射光（specular light）。通过与它们组合使用可以实现更加逼真的照明效果。2.1Gouraud 着色前几篇文章的光照实现都
2021-07-15 22:41:41
849
2
原创 三维模型反射光照射实现、物体表面高光实现（WebGL进阶04）
三维模型反射光照射实现1. demo效果2. 反射光介绍3. 实现要点3.1 反射光计算3.2 向着色器传值4. demo代码1. demo效果2. 反射光介绍反射光分为漫反射和镜面反射，平行光属于慢反射。通常反射光指的是镜面反射光又称高光反射，指由光源直接经物体表面反射入眼睛的光线。镜面反射使物体看上去更有光泽下图是反射光模型，光源发出的光照射到物体上并被反射，当反射光和视线正对时，在一定的范围内光大多数的光会反射到眼睛里，这时从物体表面反射的光在这个范围内，就会产生高光现象但是如果上述
2021-07-15 00:53:39
1032
2
原创 三维模型环境光照射实现（WebGL进阶03）
三维模型环境光照射实现1. demo效果2. 环境光介绍3. 实现要点3.1 顶点着色器调整3.2 向着色器中传值环境光颜色4. demo代码1. demo效果上图是平行光照射下效果上图是平行光+环境光照射下效果2. 环境光介绍上一篇文章我们学习了如何使用平行光，在现实世界中除了有平行光（太阳光）,还会存在环境光(平行光在屋子墙面上来回反射，可以从四面八方射向物体)，平行光有一个缺点，就是没有完全暴露在光线下的部分就是一片漆黑。如果正好是黑色背景，有可能会与黑色背景融为一体，看不到模型的真实的
2021-07-14 21:55:40
503
8
原创 计算机图形学(二)-矩阵基础
认识矩阵及其应用1. 什么是矩阵1.1 一些特殊的矩阵1.1.1 单位矩阵2. 矩阵的运算2.1 矩阵加法1. 什么是矩阵线性代数中把矩阵定义为：由m×n 个元素按m 行，n 列的方式排列，就构成矩阵，用下面的方式表示一个矩阵的行数与列数都等于n，称为n阶矩阵或n维矩阵1.1 一些特殊的矩阵1.1.1 单位矩阵一个矩阵的对角线上(从左上角到右下角的对角线）的元素均为1，其余的元素都是0的矩阵称为单位矩阵，二维单位矩阵表示为三维单位矩阵表示为2. 矩阵的运算2.1 矩阵加法...
2021-07-13 23:44:58
3816
2
原创 三维模型平行光照射实现（WebGL进阶02）
三维模型平行光照射实现1. demo效果2. 知识要点2.1 平行光照射2.2 物体变换时表面法线处理3. 实现要点3.1 顶点着色器3.2 相关矩阵计算4. demo代码1. demo效果上图是平行光照射下效果上图是无光照时的效果2. 知识要点2.1 平行光照射平行光的光线相互平行，没有位置信息，只有方向，可以看做是无限远处的光源发出的光，例如太阳照射在地球上的光。平行光照射在物体上会反射，不同方向的面反射光的方向也不同，平行光如何反射，取决于物体的表面法向量，如下图光线从左上方入射进来
2021-07-11 23:20:59
614
2
原创 使用VBO、IBO创建彩色甜圈圈（WebGL进阶01）
使用VBO、IBO创建彩色甜圈圈1. demo效果2. 实现要点2.1 初始化顶点信息2.2 向着色器传值2.3 注册鼠标拖拽事件3. demo代码1. demo效果2. 实现要点2.1 初始化顶点信息如上图绘制甜圈圈的思路是，先绘制一个圆当做管道截面，然后让这个截面圆绕一个中心点沿沿这个截面圆平面垂直方向旋转一周，即可生成甜圈圈状的三维模型以下代码是生成绘制甜圈圈所需信息的函数，它接收四个参数，分别是：第一个参数表示管道截面圆分段数，第二个参数表示管道圆的分段数，第三个参数管道截面圆的半径。
2021-07-11 23:18:52
570
原创 WebGL-Shader入门（6.着色器语言GLSL ES 预处理指令和宏定义）
GLSL ES 预处理指令宏定义1. 预处理指令1. 预处理指令
2021-07-09 01:04:43
1813
1
原创 纯shader实现圆圈内缓缓上升的波浪线(three.js实战10)
使用着色器创建扩散光圈1. demo效果2. RawShaderMaterial介绍3. demo代码1. demo效果2. RawShaderMaterial介绍我们之前在three.js中使用着色器，大多时候都是通过ShaderMaterial着色器材质传入着色器程序，使用这个着色器材质比较方便，因为three.js已经内置了很多常用的变量如position、color、normal、uv等，其实three.js还提供了另外一个着色器材质RawShaderMaterial，与ShaderMate
2021-07-08 22:32:13
1093
原创 WebGL-Shader入门（5.着色器语言GLSL ES 内置变量和内置函数）
GLSL ES 内置变量和内置函数1. 内置变量1. 内置变量
2021-07-08 01:25:00
2072
8
原创 WebGL-Shader入门（4.着色器语言GLSL ES函数定义与流程控制）
函数定义与流程控制1. 序2 参数限定词1. 序GLSL ES 中提供了三类限定词，参数限定词、存储限定词和精度限定词，通过这些限定词可以控制参数的行为、限定变量的类型以及限定数据的精度来提高运行效率，减少内存开销，首先从参数限定词说起2 参数限定词...
2021-07-06 00:18:15
736
3
原创 WebGL-Shader入门（3.着色器语言的限定词-参数限定词/存储限定词/精度限定词）
矢量类型和矩阵类型变量的访问与运算1. 序1. 序上一篇文章介绍了着色器语言的数据类型和简单使用，不过没有介绍矢量类型和矩阵类型的访问和运算，它们有很多想通之处，内容相对较多，所以专门用一篇文章来讲述。就先从它们的访问说起...
2021-07-04 20:26:56
633
3
原创 WebGL-Shader入门（2.着色器语言GLSL ES矢量和矩阵的访问与运算）
着色器语言GLSL ES1. GLSL ES介绍1. GLSL ES介绍
2021-07-04 16:35:56
945
3
原创 WebGL-Shader入门（1.着色器语言GLSL ES数据类型介绍与使用）
使用CSS2DRenderer创建文字说明标签1. GLSL ES介绍2. 变量定义3. 变量类型3.1 基本类型3.1.1 基本类型的介绍3.1.2 基本类型的赋值和类型转换3.2 矢量和矩阵3.2.1 矢量和矩阵类型3.2.2 矢量构造和赋值3.2.3 矩阵构造和赋值3.3 结构体3.4 数组3.5 取样器3.1 void3.2 bool3.2 int3.2 float3.2 vec2, vec3, vec43.2 bvec2, bvec3, bvec43.2 ivec2, ivec3, ivec
2021-07-03 16:40:18
1323
1
three.js中svg拉伸体的转换函数transformSVGPathExposed
2020-11-28
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人