Skip to content

Commit ff3eabf

Browse files
authored
Merge pull request #775 from VRHIKKY/feature/HCSL-Usage
HCSLの説明を作り直しました
2 parents 907cf1d + 17aee9c commit ff3eabf

24 files changed

Lines changed: 227 additions & 137 deletions
Lines changed: 114 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,122 @@
11
# HCSL (Heliodor Custom Shader Language)
22

33
## Overview
4-
Heliodor now supports custom shaders. HCSL (Heliodor Custom Shader Language) is Heliodor's proprietary shader language.
4+
Heliodor now supports custom shaders.
5+
HCSL (Heliodor Custom Shader Language) is a shader language unique to Heliodor.
56

67
## Implementation
78

89
### Shader Compilation
910

10-
1. Right-click in the Project view and create a ShaderLab by selecting "Create → Shader → UnlitShader", then name it "sample"
11-
12-
![Create UnlitShader](img/customshader01.jpg)
13-
14-
2. Right-click the generated sample shader and create a material from the Material button. Name it "sample" as well
15-
16-
![Create Material](img/customshader02.jpg)
17-
18-
3. Add a Plane to the Unity scene as a child element of HCSL_Test and place it near WavePlane
19-
20-
![Add Plane](img/customshader03.jpg)
21-
22-
4. Attach the sample material to the Plane. Also, remove the mesh collider as it is not needed
23-
24-
5. Duplicate WavePlane.hcsl with Ctrl + D and rename it to "sample"
25-
26-
![Duplicate HCSL](img/customshader04.jpg)
27-
28-
6. Double-click sample.hcsl to open it in your preferred editor
29-
30-
!!! note "Note"
31-
Open with Shift JIS encoding
32-
33-
7. Change the shader name in the hcsl file to "sample" and save
34-
35-
![Edit HCSL](img/customshader05.jpg)
36-
37-
8. Add the HEOCustomShader component to the Plane via Add Component
38-
39-
![Add Component](img/customshader06.jpg)
40-
41-
9. Attach the sample material and sample.hcsl
42-
43-
![Attach Files](img/customshader07.jpg)
44-
45-
10. Click the three-dot button on HEOCustomShader and find and press the Compile button
46-
47-
![Compile](img/customshader08.jpg)
48-
49-
11. The HCSL will be converted to ShaderLab. If "Success!!" appears in the Unity console, it was successful
50-
51-
![Success](img/customshader09.jpg)
52-
53-
### Using HCSL In-Game
54-
55-
1. Select HCSL_Test and export HEO via VketCloudSDK → Export Field
56-
57-
![Export Field](img/customshader10.jpg)
58-
59-
2. Export the HEO to "release/data/Field/HCSL_Test"
60-
61-
![Export Path](img/customshader11.jpg)
62-
63-
3. Copy the created sample.hcsl to "release/data/Shaders"
64-
65-
![Copy HCSL](img/customshader12.jpg)
66-
67-
4. Open `release\data\Scene\streamingvideo.json` in a text editor
68-
69-
![Open JSON](img/customshader13.jpg)
70-
71-
5. Find the shaders field and add the path to the sample.hcsl you just added: `"Shaders/sample.hcsl"`
72-
73-
![Edit JSON](img/customshader14.jpg)
74-
75-
6. Finally, set up a local server as you did in the preparation phase, enter the game, and verify that the created shader is reflected
76-
77-
![In Game](img/customshader15.jpg)
11+
1 Add a Plane to the scene.
12+
13+
![Create Plane](img/customshader01.png)
14+
15+
2 Right-click in the Project View and create an HCSL file via **Create → HCSL File**, then name it `sample`.
16+
17+
![Create HCSL](img/customshader02.png)
18+
19+
3 Double-click the generated `sample` HCSL shader to open it in the editor, then paste the following sample shader in its entirety.
20+
21+
```
22+
#version 1
23+
24+
hcsl "sample"
25+
{
26+
pass Geometry_Opaque
27+
{
28+
29+
renderparam
30+
{
31+
bool hel_z_write = true;
32+
int hel_cull_mode = HEL_CULL_BACK;
33+
}
34+
35+
attribute
36+
{
37+
vec3 _Position : VS_POSITION;
38+
vec3 _Normal : VS_NORMAL;
39+
vec2 _TexCoord0 : VS_UV;
40+
}
41+
42+
output vertex
43+
{
44+
vec4 outPos : VS_OUT_POSITION;
45+
vec3 WorldNormal;
46+
vec3 WorldPos;
47+
vec2 uv;
48+
}
49+
50+
uniform vertex
51+
{
52+
float _Seed = 1.0;
53+
float _Size = 0.1;
54+
}
55+
56+
shader vertex
57+
{
58+
float g_Offset;
59+
float wave(vec2 st)
60+
{
61+
return sin(st.x * 50.0 + HEL_TIME) * 1.5;
62+
}
63+
void main()
64+
{
65+
g_Offset = 10.0;
66+
vec4 pos = vec4(_Position, 1.0);
67+
pos.y += wave(_TexCoord0 * _Size + vec2(_Seed + g_Offset));
68+
outPos = HEL_MATRIX_P * HEL_MATRIX_V * HEL_MATRIX_W * pos;
69+
WorldNormal = (HEL_MATRIX_W * vec4(_Normal, 0.0)).xyz;
70+
uv = _TexCoord0;
71+
}
72+
}
73+
74+
input fragment
75+
{
76+
vec3 WorldNormal;
77+
vec2 uv;
78+
}
79+
80+
output fragment
81+
{
82+
vec4 outColor : FS_COLOR;
83+
}
84+
85+
uniform fragment
86+
{
87+
vec4 _MainColor = vec4(1.0);
88+
sampler2D _MainTex;
89+
vec4 _MainTex_ST;
90+
}
91+
92+
shader fragment
93+
{
94+
void main()
95+
{
96+
vec4 col = vec4(1.0, 0.0, 0.0, 1.0);
97+
outColor = col;
98+
}
99+
}
100+
}
101+
}
102+
```
103+
104+
4 Attach a **VKC Shader** component to the Plane.
105+
106+
![Attach VKC Shader](img/customshader03.png)
107+
108+
5 Drag and drop the `sample.hcsl` file you just created into the **HCSL Core** field of the VKC Shader component.
109+
110+
![Add HCSL To VKC Shader](img/customshader04.png)
111+
112+
6 Click the vertical three-dot menu in the upper-right corner of the VKC Shader component to open the menu, then click **Compile** at the bottom.
113+
114+
![Add HCSL To VKC Shader](img/customshader05.png)
115+
116+
7 A rippling red Plane effect will now appear.
117+
118+
![Check in Unity](img/customshader06.png)
119+
120+
8 Finally, perform a **Build and Run** as usual to confirm that the shader is applied correctly in VketCloud.
121+
122+
![Check in VKC](img/customshader07.png)

docs/WorldMakingGuide/CustomShader.ja.md

Lines changed: 113 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -8,71 +8,116 @@ HCSL(Heliodor Custom Shader Language)というHeliodor独自のシェーダー
88

99
### Shaderコンパイル
1010

11-
1. プロジェクトビューを右クリックし、「Create → Shader → UnlitShader」でShaderLabを作成し名前を「sample」とつけます
12-
13-
![Create UnlitShader](img/customshader01.jpg)
14-
15-
2. 生成されたsampleシェーダーを右クリックし、Materialボタンからマテリアルを作ります。同様に名前はsampleとします
16-
17-
![Create Material](img/customshader02.jpg)
18-
19-
3. 次にUnityシーン上に1つ適当なPlaneをHCSL_Testの子要素として追加し、WavePlaneの横あたりに配置します
20-
21-
![Add Plane](img/customshader03.jpg)
22-
23-
4. そして先ほどのsampleマテリアルをPlaneにアタッチします。また、メッシュコライダーは邪魔なので外しておきます
24-
25-
5. 次にWavePlane.hcslをCtrl + Dで複製し名前をsampleにリネームします
26-
27-
![Duplicate HCSL](img/customshader04.jpg)
28-
29-
6. sample.hcslをダブルクリックして任意のエディタを開きます
30-
31-
!!! note "注意"
32-
Shift JISで開きます
33-
34-
7. hcsl内のシェーダー名をsampleに変更し保存します
35-
36-
![Edit HCSL](img/customshader05.jpg)
37-
38-
8. 次に、Planeに対してAddComponentよりHEOCustomShaderコンポーネントをアタッチします
39-
40-
![Add Component](img/customshader06.jpg)
41-
42-
9. そしてsampleマテリアルとsample.hcslをアタッチします
43-
44-
![Attach Files](img/customshader07.jpg)
45-
46-
10. HEOCustomShaderの3点ボタンを押下しその中のCompileボタンを探して押下します
47-
48-
![Compile](img/customshader08.jpg)
49-
50-
11. するとHCSLがShaderLabに変換されます。UnityコンソールにSuccess!!と出ていれば成功です
51-
52-
![Success](img/customshader09.jpg)
53-
54-
### インゲームでHCSLを使用する
55-
56-
1. HCSL_Testを選択しVketCloudSDK → Export FieldでHEOをエクスポートします
57-
58-
![Export Field](img/customshader10.jpg)
59-
60-
2. HEOは「release/data/Field/HCSL_Test」にエクスポートします
61-
62-
![Export Path](img/customshader11.jpg)
63-
64-
3. 作成したsample.hcslを「release/data/Shaders」にコピーします
65-
66-
![Copy HCSL](img/customshader12.jpg)
67-
68-
4. `release\data\Scene\streamingvideo.json` を何かしらのテキストエディタで開きます
69-
70-
![Open JSON](img/customshader13.jpg)
71-
72-
5. するとshadersというフィールドがあるのでそこに先ほど追加したsample.hcslのパスを追加します `"Shaders/sample.hcsl"`
73-
74-
![Edit JSON](img/customshader14.jpg)
75-
76-
6. 最後に準備編でやった時と同じようにローカルホストを立ててインゲームに入室し、作成したシェーダーが反映されていれば完了です
77-
78-
![In Game](img/customshader15.jpg)
11+
1 シーンにPlaneを追加します。
12+
13+
![Create Plane](img/customshader01.png)
14+
15+
2 プロジェクトビューを右クリックし、「Create → HCSL File」でHCSLを作成し名前を「sample」とつけます
16+
17+
![Create HCSL](img/customshader02.png)
18+
19+
3 生成されたsample HCSLシェーダーをダブルクリックしエディタを開きます。そして以下のサンプルシェーダーをすべてコピーアンドペーストで貼り付けます
20+
21+
```
22+
#version 1
23+
24+
hcsl "sample"
25+
{
26+
pass Geometry_Opaque
27+
{
28+
29+
renderparam
30+
{
31+
bool hel_z_write = true;
32+
int hel_cull_mode = HEL_CULL_BACK;
33+
}
34+
35+
attribute
36+
{
37+
vec3 _Position : VS_POSITION;
38+
vec3 _Normal : VS_NORMAL;
39+
vec2 _TexCoord0 : VS_UV;
40+
}
41+
42+
output vertex
43+
{
44+
vec4 outPos : VS_OUT_POSITION;
45+
vec3 WorldNormal;
46+
vec3 WorldPos;
47+
vec2 uv;
48+
}
49+
50+
uniform vertex
51+
{
52+
float _Seed = 1.0;
53+
float _Size = 0.1;
54+
}
55+
56+
shader vertex
57+
{
58+
float g_Offset;
59+
float wave(vec2 st)
60+
{
61+
return sin(st.x * 50.0 + HEL_TIME) * 1.5;
62+
}
63+
void main()
64+
{
65+
g_Offset = 10.0;
66+
vec4 pos = vec4(_Position, 1.0);
67+
pos.y += wave(_TexCoord0 * _Size + vec2(_Seed + g_Offset));
68+
outPos = HEL_MATRIX_P * HEL_MATRIX_V * HEL_MATRIX_W * pos;
69+
WorldNormal = (HEL_MATRIX_W * vec4(_Normal, 0.0)).xyz;
70+
uv = _TexCoord0;
71+
}
72+
}
73+
74+
input fragment
75+
{
76+
vec3 WorldNormal;
77+
vec2 uv;
78+
}
79+
80+
output fragment
81+
{
82+
vec4 outColor : FS_COLOR;
83+
}
84+
85+
uniform fragment
86+
{
87+
vec4 _MainColor = vec4(1.0);
88+
sampler2D _MainTex;
89+
vec4 _MainTex_ST;
90+
}
91+
92+
shader fragment
93+
{
94+
void main()
95+
{
96+
vec4 col = vec4(1.0, 0.0, 0.0, 1.0);
97+
outColor = col;
98+
}
99+
}
100+
}
101+
}
102+
```
103+
104+
4 Planeに VKC Shaderコンポーネントをアタッチします
105+
106+
![Attach VKC Shader](img/customshader03.png)
107+
108+
5 VKC ShaderコンポーネントのHCSL Coreフィールドに先ほど作成したsample.hcslをドロップします
109+
110+
![Add HCSL To VKC Shader](img/customshader04.png)
111+
112+
6 VKC Shaderコンポーネントの右上の縦三点リーダーを押してメニュー開き、その一番下にあるCompileを押します。
113+
114+
![Add HCSL To VKC Shader](img/customshader05.png)
115+
116+
7 すると波打つ赤いPlaneのエフェクトが完成します。
117+
118+
![Check in Unity](img/customshader06.png)
119+
120+
121+
8 後はいつも通りビルドアンドランによってVketCloudにShaderが反映されていることを確認します。
122+
123+
![Check in VKC](img/customshader07.png)
-37.6 KB
Binary file not shown.
235 KB
Loading
-41.7 KB
Binary file not shown.
238 KB
Loading
-41.5 KB
Binary file not shown.
352 KB
Loading
-36.2 KB
Binary file not shown.
66.2 KB
Loading

0 commit comments

Comments
 (0)