BearChild's Blog

Created2021-10-04|图形学|图形学

基础知识-着色器基本概念 Shader Shader （着色器）：运行在 GPU 的小程序，自定义显卡渲染画面的算法，使画面达到我们想要的效果。本质就是一段代码（主流的有基于 OpenGL 的 GLSL、基于 DirectX 的 HLSL 等），这段代码的作用是阐述如何绘制每一个顶点的颜色以及最终每一个像素点的颜色。顶点着色器 (Vertex Shader)：进行顶点相关的一系列操作。通常用来把顶点从模型空间变换到平面空间。可以用于通过矩阵变换位置、计算照明公式来生成逐顶点颜色以及生成或变换纹理坐标等基于顶点的操作。几何着色器 (Geometry Shader)：以完整的图元作为输入数据，可以通过产生新顶点构造出新的（或是其它的）图元来生成其他形状，创建或销毁几何图元。经过几何着色器处理后，得到的是一系列位于齐次裁剪空间的顶点所组成的图元，这些顶点会在后面的裁剪、透视除法和光栅化阶段得到进一步处理。片元着色器 (Fragment Shader)：对片元进行纹理采样、颜色汇总等处理，计算一个像素的最终颜色。 GLSL 基本要求 Shader 的开头要声明版本 ...

[前端开发]网页浏览器

Created2021-09-29|网站开发前端开发|网站开发•前端开发

网页浏览器效果制作网页图片浏览器，实现向前向后翻页、图片缩略图总览、图片缩略图选择、图片翻页过渡效果等功能。点击后有图片淡入淡出效果。可以点击缩略图来切换展示图片，也可以点击左右按钮切换。代码 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108<!DOCTYPE html><html> <head> <title>图片浏览器</title> <style type="text/css"> body { text-align:center; } .thumbnail { displ ...

[图形学]基础图形绘制-圆

Created2021-09-25|图形学|图形学

基础图形绘制-圆中点画圆首先，我们考虑画圆心在 (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中的协程

Created2021-09-24|游戏开发Gameplay|Unity•Gameplay

Unity中的协程协程的基础协程是用户态的轻量级线程，线程内部调度的基本单位，拥有自己的寄存器上下文和栈。同一时间只能执行一个协程，而其他协程处于休眠状态，适合对任务进行分时处理。对于 Unity 来说协程是单线程的，在主线程中完成。切换时先将寄存器上下文和栈保存，等切换回来的时候再进行恢复。也就是说协程能保留上一次调用时的状态，每次过程重入时，就相当于进入上一次调用的状态。由于直接操作栈则基本没有内核切换的开销，可以不加锁的访问全局变量，所以上下文的切换非常快。协程的使用协程就像一个函数，能够暂停执行并将控制权返还给 Unity，然后在达到条件时被挂起，继续执行后面的部分。挂起协程 12public Coroutine StartCoroutine(IEnumerator routine)public Coroutine StartCoroutine(string methodName, object value = null) 终止协程 123public void StopCoroutine(IEnumerator routine);pub ...

[图形学]基础图形绘制-直线

Created2021-09-24|图形学|图形学

基础图形绘制-直线 DDA 数值微分 DDA (Digital Differential Analyzer) 算法给点两点 (x1,y1)、(x2,y2)(x_1,y_1)、(x_2,y_2)(x1,y1)、(x2,y2) ，考虑直线表达式： y=kx+b,k=y2−y1x2−x1y=kx+b,k=\frac{y2-y1}{x2-x1}y=kx+b,k=x2−x1y2−y1 显然我们可以直接模拟这个过程：从 (x1,y1)(x_1,y_1)(x1,y1) 走向 (x2,y2)(x_2, y_2)(x2,y2)，每次 x+1x+1x+1 的时候 y+ky+ky+k。易发现，在斜率 kkk 较小的时候，所画直线比较合理，但是在 kkk 比较大的时候，会出现下图左侧这样割裂的问题：于是，我们在 kkk 较大的时候，交换表达式中的 xxx 、yyy，这样就可以让 kkk 变小。 1234567891011121314151617181920static void Normalize(float &x, float &y){ x = (x - ...

[前端开发]网页时钟

Created2021-09-23|网站开发前端开发|网站开发•前端开发

网页计算器效果代码 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>时钟</title> </head><canvas id="canvas"></can ...

[前端开发]网页计算器

Created2021-09-23|网站开发前端开发|网站开发•前端开发

网页计算器效果代码 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>计算器</title> <style type="text/css"> #calc{ border: solid 1px black; width: 300px; height: 300px; text-align: ...

[图形学]基础知识-渲染管线

Created2021-09-22|图形学|图形学

基础知识-渲染管线基本概念 Graphics Pipeline Graphics Pipeline （图形渲染管线）：管理将3D坐标，转变为屏幕上的有色2D像素的过程。也就是将一些原始图形数据，经过各种变化处理最终在屏幕上显示。 Graphics Pipeline 可以被划分为两个主要部分：把3D坐标转换为2D坐标；把2D坐标转变为实际的有颜色的像素。 Shader Shader （着色器）：运行在 GPU 的小程序，自定义显卡渲染画面的算法，使画面达到我们想要的效果。本质就是一段代码（主流的有基于 OpenGL 的 GLSL、基于 DirectX 的 HLSL 等），这段代码的作用是阐述如何绘制每一个顶点的颜色以及最终每一个像素点的颜色。渲染流程我们可以将其分为三个阶段：应用阶段、几何阶段、光栅化阶段。应用阶段由 CPU 负责。 1. 准备场景数据准备好场景数据，包括：摄像机的位置、视锥体、场景中包含哪些模型、使用哪些光源等。 2. 粗粒度剔除处理场景数据，将在摄像机视锥体之外、被其他物品遮挡住的物品剔除。 3. 设置渲染状态渲染状态定义 ...

[UE]CanvasPanelSlot布局规则

Created2021-08-12|游戏开发UI|UI•UE

CanvasPanelSlot 布局规则 UMG 中的 CanvasPanelSlot 我们先来看一下在 UI 面板中，CanvasPanelSlot 有哪些信息：源码中的 CanvasPanelSlot 123456789101112131415161718192021222324252627282930313233343536373839404142434445class UMG_API UCanvasPanelSlot : public UPanelSlot{ GENERATED_UCLASS_BODY()public: /** The anchoring information for the slot */ UPROPERTY(EditAnywhere, BlueprintReadOnly, Category="Layout|Canvas Slot") FAnchorData LayoutData; /** When AutoSize is true we use the widget's desired size */ UPROP ...

[UE]读取本地字体文件

Created2021-08-12|游戏开发工具流|工具流•UE

读取本地字体文件效果通过代码读取指定目录下的字体文件 (.ttf / .otf) 转换为 UE4 内部可用的 Font 步骤根据 FontName 在目录下寻找字体文件生成 FontFace 生成字体对象保存资源根据 FontName 在目录下寻找字体文件 1234567891011FString FontPath;const FString FontPathTTF = FontDirectory.Path + TEXT("/") + FontNameStr + TEXT(".ttf");const FString FontPathOTF = FontDirectory.Path + TEXT("/") + FontNameStr + TEXT(".otf");// 判断是否存在 TTF / OTF 文件if (FPlatformFileManager::Get().GetPlatformFile().FileExists(*FontPathTTF)) FontPath = FontPat ...