轉載于小道的博客園

XDGE_RayMarchine 1- 利用Frag Shader繪制圖形?www.cnblogs.com

# Render/RayMarchine/Base 1- 利用Frag繪制圖形

@author: 白袍小道-胡言亂語

@Read: 轉載說明

[TOC]

## 前言

**1、RayMarching**

*光線行進**，從攝像機向屏幕上的每一個像素發射一條光線，光線按照一定步長前進，檢測當前光線距離物體表面的距離，并且根據這個距離調整光線的步長，直到抵達物體表面。

**2、Frag繪制圖形**

在片段著色階段去執行，這里注意一下

```c++

//1、片段后還有光柵，光柵的采樣會有可能導致1-N 星盤

//2、片段還有機會可以改變SV_Depth

```

## 正文

這里強調一下RayMarching，更加關注的如何利用這個原理。是否從屏幕上每個Pixel出發，還是看需求。

RayMarching可以參考：

fractals, computer graphics, mathematics, shaders, demoscene and more

ShinaMashiro：Unity中用RayMarching玩個球

### 目的

獲取是否相交，相交的信息，我們就可以對該片元處理

### Frag繪制圖形

除了紋理和頂點描述，我們還可以有一種手段去做一些簡單的圖形。

這種手段基礎：利用頂點到著色著色進行了線性的插值，然后在片元著色中，我們可以利用這些信息（如UV或者Proj, 坐標轉到屏幕坐標），按照圖形(求交)搞事情（非標準語言）。

#### 繪制圖形

這里因為是測試案例，直接作為特殊后期屏幕Quad繪制。

（偷懶一下，直接作為PostProcess階段前插入一個RayMachineRCMD來執行。其中RCMD為XDGameEngine封裝的一個,Quad為屏幕Mesh）

```

XDGameEngine_GraphicsUtility.BlitSRT(pPostContext.PostRenderCMD, pPostContext.SrcColorBuffer,BuiltinRenderTextureType.CameraTarget,_EffectMat,0);

```

其中BlitSRT就是一個向目標（這里由于不需要做DownSample什么的，就直接用了Context內置)繪制，

```

public void BlitSRT(CommandBuffer buffer, XDGTexture source, XDGRenderTargetIdentifier destination,

Material mat, int pass)

{

//buffer.SetGlobalTexture(XDGameEngine_GraphicsShaderID._MainTex, source);

mat.SetTexture(XDGameEngine_GraphicsShaderID._MainTex, source);

buffer.SetRenderTarget(destination);

buffer.DrawMesh(mesh, Matrix4x4.identity, mat, 0, pass);

}

```

備注:(直接用SV_Target,也可以自己包一個Struct包含SVDepth 后續來做腦洞)

### 求交

#### 基礎求交

直線包含公式：兩點之間

```glsl

float4 XD_Ray_Line2D(float2 pos, float2 point1, float2 point2, float width, float3 color, float antialias)

{

float k = (point1.y - point2.y)/(point1.x - point2.x);

float b = point1.y - k * point1.x;

float d = abs(k * pos.x - pos.y + b) / sqrt(k * k + 1);

float t = smoothstep(width/2.0, width/2.0 + antialias, d);

return float4(color, 1.0 - t);

}

```

圓形包含公式：距離圓心和半徑

```glsl

float4 XD_Ray_circle(float2 pos, float2 center, float radius, float3 color, float antialias)

{

float d = length(pos - center) - radius;

float t = smoothstep(0, antialias, d);

return float4(color, 1.0 - t);

}

```

三角形包含公式：三個DOT

```glsl

float4 XD_Ray_Triangle(float2 p, float2 Pos1, float2 Pos2, float2 Pos3,float3 color)

{

float2 AB = Pos2-Pos1;

float2 BC = Pos3-Pos2;

float2 CA = Pos1-Pos3;

float2 AP = p - Pos1;

float2 BP = p - Pos2;

float2 CP = p - Pos3;

float3 cPAB = cross(float3(AP,.0),float3(AB,.0));

float3 cCAB = cross(float3(-CA,.0),float3(AB,.0));

bool bPA = dot(cPAB, cCAB) >= .0;

float3 cPAC = cross(float3(CP,.0), float3(CA,.0));

float3 cBAC = cross(float3(-BC,.0), float3(CA,.0));

bool bPC = dot(cPAC, cBAC) >= .0;

float3 cPBC = cross(float3(BP,.0), float3(BC,.0));

float3 cABC = cross(float3(-AB,.0), float3(BC,.0));

bool bPB = dot(cPBC, cABC) >= .0;

float t = bPC && bPB && bPA? 1:0;

return float4(color, t);

}

```

#### 點和多邊形求交

不只是這里有用，這里就不做展開。在Render/Acc(加速)，和Render/Math部分會說明。

1、面積和判斷

2、奇偶

射線法不僅僅適用于規則的矩形，也適用于多邊形。

沿著點做多條射線，那么每條射線就會與多邊形產生n個交點（0個交點也算）。若某一條射線產生奇數個交點，那么就認定點在多邊形范圍內。

3、轉角累加法

#### 多邊形和多邊形

1、分離軸定理

凸多邊形的碰撞判斷方式

2、凹多邊形處理

把凹多邊形進行分割，拆成凸多邊形

3、基于四叉樹

（Delevin：【OpenGL】基于四叉樹的2D碰撞檢測

#### 步進和二分

留作后續繼續

總結

以上是生活随笔為你收集整理的绘制多边形_XDGE_RayMarchine 1- 利用Frag Shader绘制图形的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。