Live2D模型的简单制作
Live2D模型的简单制作
准备工作
下载 Photoshop ；
下载 Live2D Cubism ：https://www.live2d.com/zh-CHS/。
PS
首先我们在 PS 中制作好已经分层好的图层，为了方便后续在 Live2D Editor 中的使用，每个图层可以单独移动。
保存好 .psd 文件，后续使用。
Live2D Editor
导入文件
打开 Live2D Cubism Editor。
将制作好的 .psd 文件导入到 Editor 中。
应用模板动画
点击 文件 -> 应用模板 。
在显示的各种模板中选择一个合适的模板。
调整参数
调整模板参数，尽可能地保证五官、身体对应。
由于自动绑定不一定合适，我们在 应用模板预览 中手动绑定对应部位
点击一侧的部位，然后点击另一侧需要绑定的部位后，点击 对应所选元素 即可。
绑定后点击 OK 确认。
制作纹理
点击 可编辑纹理集 并导出纹理。
导出
点击 文件 -> 导出运作档 -> 导出为 moc3 文件 即可。
这个 moc3 文件即可投入使用。
骨骼动画原理
骨骼动画原理
基础知识
骨骼动画（Skeletal Animation） 是模型动画中的一种，通过改变骨骼的朝向和位置来为 模型 生成动画。
模型（Model）由一个个三角面组成，这种三角面也被称为 网格（Mesh），网格上有一个个 顶点（Vertex） 。
对应在骨骼动画中， 网格（Mesh） 也被称作 皮肤（Skin）；骨骼之间的连接处称作 关节（Joints），骨骼可以绕着 关节 旋转。
骨骼动画的制作，我们一般先进行 蒙皮 ，然后运动时根据提前制作好的 关键帧 与在两个关键帧之间的 插值 进行 姿态调整 生成动画。
蒙皮
基础知识
对于两脚兽，一般使用 T-Pose 进行蒙皮，因为大部分姿势不会偏离它太大。
蒙皮 就是将 网格（Mesh） 的 顶点（Vertex） 给 绑定 在骨骼上，骨骼动画的本质就是用 骨骼 来操控 Mesh 动起来，Mesh 动起来的本质是 顶点 位置的改变。
一个 顶点 可能被多个 骨骼 影响（大部分情况一个顶点只会被一个骨骼影响，但是比如接近关节的顶点，单纯由一个骨骼影响可能会出现缝隙）。
确定被影响的方案就要使用 线性混合蒙皮（Linear Bl ...
![[图形学]基础图形绘制-直线裁剪](https://bearchildbucket-1300061763.cos.ap-guangzhou.myqcloud.com/img/articles/202110192053698.png)
[图形学]基础图形绘制-直线裁剪
基础图形绘制-直线裁剪
Cohen-Sutherland
Cohen-Sutherland 裁剪算法 是最常用的直线的裁剪算法，用于直线在矩形框的裁剪。
首先，给空间编码：
根据点所在的位置我们可以获得其编码。
接下来考虑几种情况：
完全在矩形框内：将端点编码按位或，若为 0，则完全在矩形框内，直接全部保留；
完全在矩形框外：将端点编码按位与，若不为 0，则完全在矩形框外，直接全部舍弃；
其它情况：计算线段与矩形框的交点，获得新的线段，继续判断。
对于 情况3，我们获得新的线段后接着判断。
这样可以有效减少计算次数，同时，遇到下图这种情况时：
我们会保留得到 AC 或 BD （取决于计算交点的顺序），然后在下一轮计算中舍弃该线段，不会出现问题。
123456789101112131415161718192021222324252627282930313233343536373839const int IN_SIDE = 0x0000;const int LEFT_SIDE = 0x0001;const int RIGHT_SIDE = 0x0010;c ...
![[图形学]基础图形绘制-多边形](https://bearchildbucket-1300061763.cos.ap-guangzhou.myqcloud.com/img/articles/202110190126074.png)
[图形学]基础图形绘制-多边形
基础图形绘制-多边形
种子填充
给定一个多边形的顶点，圈出一个多边形，我们可以先用 Bresenham 直线算法 画上边界。
此时，若已知多边形内一个像素，我们可以轻易地从该像素出发，利用搜索（BFS、DFS等），将多边形完整填充，这就是 种子填充 算法。
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263static bool pixelMatrix[SCR_WIDTH][SCR_HEIGHT];static int dx[] = { 0, 1, 0, -1 };static int dy[] = { 1, 0, -1, 0 };static void Bresenham(int x1, int y1, int x2, int y2){ bool steep = abs(y2 - y1) > abs(x2 - x1); if (steep) Sw ...
![[前端开发]简单的WebService调用](https://bearchildbucket-1300061763.cos.ap-guangzhou.myqcloud.com/img/articles/202110141624770.png)
[前端开发]简单的WebService调用
简单的WebService调用
效果
创建一个WebService，实现接收一组数字，将其排序后，返回排序后的数字序列。
在html中输入若干数字，调用服务，展示排序后的结果。
实现
创建新项目
在 Visual Studio 中新建项目，命名为 WebServiceDemo
添加服务
添加 -> 新建项 -> Web 服务 (ASMX)，命名为 SortService.asmx
添加 Web 窗体
添加 -> 新建项 -> Web 窗体，命名为 Sort.aspx
编辑 SortService.asmx -> SortService.asmx.cs 与 Sort.aspx
代码
SortService.asmx -> SortService.asmx.cs
1234567891011121314151617181920212223242526272829303132333435using System;using System.Collections.Generic;using System.Linq;using Syste ...
![[图形学]基础图形绘制-椭圆](https://bearchildbucket-1300061763.cos.ap-guangzhou.myqcloud.com/img/articles/202110131643691.png)
[图形学]基础图形绘制-椭圆
基础图形绘制-椭圆
中点画椭圆
基础
首先，我们考虑中点在 (0,0)(0,0)(0,0) 的椭圆。
根据椭圆的对称性，我们只需要画出第一象限的 14\frac{1}{4}41 的圆弧，即可通过对称画出整个椭圆。
中点在 (0,0)(0,0)(0,0) ，焦点在坐标轴上的椭圆的标准方程为：x2a2+y2b2=1\frac{x^2}{a^2}+\frac{y^2}{b^2}=1a2x2+b2y2=1，隐函数为：F(x,y)=b2x2+a2y2−a2b2=0F(x,y)=b^2x^2+a^2y^2-a^2b^2=0F(x,y)=b2x2+a2y2−a2b2=0，代入各点，有：
当 F(x,y)=b2x2+a2y2−a2b2=0F(x,y)=b^2x^2+a^2y^2-a^2b^2=0F(x,y)=b2x2+a2y2−a2b2=0 时，点在椭圆上；
当 F(x,y)=b2x2+a2y2−a2b2>0F(x,y)=b^2x^2+a^2y^2-a^2b^2 \gt 0F(x,y)=b2x2+a2y2−a2b2>0 时，点在椭圆外；
当 F(x,y)=b2x2+a2y2−a2 ...
![[图形学]基础知识-着色器](https://bearchildbucket-1300061763.cos.ap-guangzhou.myqcloud.com/img/articles/202110041640333.png)
[图形学]基础知识-着色器
基础知识-着色器
基本概念
Shader
Shader （着色器）：运行在 GPU 的小程序，自定义显卡渲染画面的算法，使画面达到我们想要的效果。本质就是一段代码（主流的有 基于 OpenGL 的 GLSL、基于 DirectX 的 HLSL 等），这段代码的作用是阐述如何绘制每一个顶点的颜色以及最终每一个像素点的颜色。
顶点着色器 (Vertex Shader)：
进行顶点相关的一系列操作。通常用来把顶点从模型空间变换到平面空间。
可以用于通过 矩阵变换位置、计算照明公式来 生成逐顶点颜色 以及 生成或变换纹理坐标 等基于顶点的操作。
几何着色器 (Geometry Shader)：
以完整的图元作为输入数据，可以通过产生新顶点构造出新的（或是其它的）图元来生成其他形状，创建或销毁几何图元。
经过几何着色器处理后，得到的是一系列位于齐次裁剪空间的顶点所组成的图元，这些顶点会在后面的裁剪、透视除法和光栅化阶段得到进一步处理。
片元着色器 (Fragment Shader)：
对片元进行纹理采样、颜色汇总等处理，计算一个像素的最终颜色。
GLSL
基本要求
Shader 的开头要声明版本 ...
![[前端开发]网页浏览器](https://bearchildbucket-1300061763.cos.ap-guangzhou.myqcloud.com/img/articles/202109292041266.png)
[前端开发]网页浏览器
网页浏览器
效果
制作网页图片浏览器，实现向前向后翻页、图片缩略图总览、图片缩略图选择、图片翻页过渡效果等功能。
点击后有图片淡入淡出效果。可以点击缩略图来切换展示图片，也可以点击左右按钮切换。
代码
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108<!DOCTYPE html><html> <head> <title>图片浏览器</title> <style type="text/css"> body { text-align:center; } .thumbnail { displ ...
![[图形学]基础图形绘制-圆](https://bearchildbucket-1300061763.cos.ap-guangzhou.myqcloud.com/img/articles/202109251715127.png)
[图形学]基础图形绘制-圆
基础图形绘制-圆
中点画圆
首先，我们考虑画圆心在 (0,0)(0,0)(0,0) 的圆，其它情况仅需要平移即可。
根据圆的对称性，我们只需要画出第一象限的 18\frac{1}{8}81 的圆弧，即可通过对称画出整个圆。
圆心在 (0,0)(0,0)(0,0) ，半径为 RRR 的圆的隐函数为：F(x,y)=x2+y2−R2=0F(x,y)=x^2+y^2-R^2=0F(x,y)=x2+y2−R2=0，代入各点，有：
当 F(x,y)=x2+y2−R2=0F(x,y)=x^2+y^2-R^2=0F(x,y)=x2+y2−R2=0 时，点在圆上；
当 F(x,y)=x2+y2−R2>0F(x,y)=x^2+y^2-R^2 \gt 0F(x,y)=x2+y2−R2>0 时，点在圆外；
当 F(x,y)=x2+y2−R2<0F(x,y)=x^2+y^2-R^2 \lt 0F(x,y)=x2+y2−R2<0 时，点在圆内。
考虑画右上方的 18\frac{1}{8}81 圆弧，假设当前点在 (x,y)(x,y)(x,y) ，考虑下一个点选择 (x+1,y)( ...
![[Unity]Unity中的协程](https://bearchildbucket-1300061763.cos.ap-guangzhou.myqcloud.com/img/articles/202109241659891.png)
[Unity]Unity中的协程
Unity中的协程
协程的基础
协程 是用户态的轻量级线程，线程内部调度的基本单位，拥有自己的寄存器上下文和栈。
同一时间只能执行一个协程，而其他协程处于休眠状态，适合对任务进行分时处理。对于 Unity 来说协程是单线程的，在主线程中完成。
切换时先将寄存器上下文和栈保存，等切换回来的时候再进行恢复。也就是说协程能保留上一次调用时的状态，每次过程重入时，就相当于进入上一次调用的状态。由于直接操作栈则基本没有内核切换的开销，可以不加锁的访问全局变量，所以上下文的切换非常快。
协程的使用
协程就像一个函数，能够暂停执行并将控制权返还给 Unity，然后在达到条件时被挂起，继续执行后面的部分。
挂起协程
12public Coroutine StartCoroutine(IEnumerator routine)public Coroutine StartCoroutine(string methodName, object value = null)
终止协程
123public void StopCoroutine(IEnumerator routine);pub ...