Repository navigation
Expand file tree
/
Copy pathimageEditor.html
More file actions
223 lines (195 loc) · 12.2 KB
/
Copy pathimageEditor.html
File metadata and controls
223 lines (195 loc) · 12.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Language" content="ja">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="Description" content="DirectX11 ピクセルシェーダー コンピュートシェーダー 高速画像処理">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script type="text/javascript" src="ss25.js" charset="UTF-8"></script>
<link href="./style25.css" rel="stylesheet" type="text/css">
<title>DirectX11のピクセルシェーダーおよびコンピュートシェーダーを用いたimageEditor</title>
</head>
<body onLoad="moveLeft();" onresize="moveLeft();">
<div class="dropdown" style="position:fixed; top:70px;
margin-left:auto; right:80px;z-index: 3;">
<button class="dropbtn">
<a href="index.html" style=" text-decoration: none;
"><font color="#dddddd">ホームへ</font></a>
</button>
<div class="dropdown-content" style="line-height:10px">
<a href="imageViewer.html">imageViewer</a>
<a href="imageViewerD2D1.html">imageViewerD2D1</a>
<a href="gammaCorrCS.html">gammaCorrCS</a>
<a href="imageEditor.html">imageEditor</a>
<a href="dispImage.html">disspImage</a>
<a href="initDX11.html">initDX11</a>
<a href="tessellation.html">tessellation</a>
</div>
</div>
<div class="container">
<p style="position:relative; margin-top:20px;
height:auto;
margin-left:0px; margin-right:auto;
text-align:center; line-height: 20pt;
font-family: メイリオ;font-size:120%;
color:#eeeeee; font-weight:lighter; letter-spacing: 0.1em; z-index: 2;">
VC++MFC サンプルコード <font size="4">（Visual Studio 2022）</font><br />
<br />
</p>
<div id="left1">
<p style="position: relative; margin-top: 0px;
height:auto;
margin-left: 0px; margin-right: auto;
text-align: left; line-height: 40pt; font-family: メイリオ;
font-size: 120%; color: #eeeeee; font-weight: lighter;
letter-spacing: 0.1em; z-index: 2;">
<font size="5" color="#00f000">imageEditor </font>
<font size="3" color="#f0f0f0">Windows11</font><br />
</p>
<div style="position: relative; margin-top: -30px;
width: auto; height: 2px; margin-left: 0px; margin-right: 120px;">
<img src="img\\bbb1.PNG" border="0" align="top" hspace="0"
vspace="0" style="position: relative; top:0px; left:0px;
border-color:#ffffff;z-index: 1;width:100%;height:2px;">
</div>
<p style="position: relative; width:auto;margin-top: 0px;
height: auto;
margin-left: 0px; margin-right: auto;
text-align: left; line-height: 20pt; font-family: メイリオ;
font-size: 110%; color: #ffffff; font-weight: lighter;
letter-spacing: 0.1em; padding: 20px; z-index: 2; ">
DirectX11のピクセルシェーダーとコンピュート・シェーダー（CS）を利用して、
高速でガンマ補正、明度、<br />
コントラスト、彩度、ブラー、シャープネス調整を行います。<br />
また、処理結果をCImageバッファーへコピーし、フォーマット変換セーブも可能です。
<br />
<br />
<font size="3" color="ffe0d0">
ピクセルシェーダー（PS）は、テクスチャ（画像）のスクリーンに表示される部分
を高速に処理できます。<br />
このことを利用しPSでガンマ補正、明るさ、コントラスト、彩度、
ブラー、シャープネスなどの処理を行い、<br />モニタリングを高速化します。<br />
しかし、PSはピクセル単位で処理をするため、ブラーなどのように周囲のピクセル
を考慮しなければならない<br />場合は、
繰り返し処理の中でガンマ補正処理とブラーを同時に行う必要があります。
そのため、負担が大きくなり<br />処理スピードが
遅くなるため、ここでは先にブラー処理をし、その後でガンマ補正を行います。<br />
処理中は、コンピュートシェーダー（CS）はUAVバッファ（読み書き可能バッファ）
を用いて、高速化のため<br />フルサイズ画像をリサイズして、
ヒストグラム・データを作成します。<br />
<br />
また、CSはUAVテクスチャ（読み書き可能テクスチャ）を用いて、フルサイズ画像に
対して全ての処理を実施し、<br />Stagingテクスチャを用いてCImage
バッファにコピーし、実際のセーブはCImageで行います。<br />
モニタリング中の画像とセーブ画像の差は見た目では分かりませんが、
セーブ画像が正式なものとなります。
<br />
<br />
</font>
<br />
<font size="3" color="ffffff">
■主な機能<br />
・トーンカーブによる、ガンマ補正<br />
・明度、コントラスト、彩度、ブラー、シャープネス調整<br />
・対応フォーマットは、jpg,bmp,png,tif,標準的なRAW<br />
・ロード可能画像サイズ、16000×16000pixel<br />
・スクリーンのセンター中心の、マウスホイールによるズーム、視点移動（フォブ変換使用）<br />
・マウスドラッグによる、スクロール、クリッピング（フォブ変換使用）<br />
・DirectX座標系から、スクリーン座標系へのフォブ逆透視変換<br />
・スクリーン座標系から、DirectX座標系へのフォブ透視変換<br />
・フォーマット変換セーブ<br />
</font>
<br />
<font size="3" color="ffffff">
■特徴<br />
<font color="e0e0ff">
すべてクラス化しているので、個別の応用も可能です。<br />
・MFCメイン<br />
・ボタンクラス<br />
・エディター（パラメーター作成）クラス<br />
・DirectC11のDeviceのイニシャライズクラス<br />
・DrectX11の描画クラス<br />
・コンピュートシェーダーのイニシャライズおよび実行クラス<br />
・WICTextureLoaderクラス<br />
・共有ヘッダー（Deviceポインタの貸出倉庫）<br />
</font>
</font>
</p>
<div id="left2" style="position: relative; margin-left: 0px; margin-top: 0px;
width: auto; height: auto; margin-right: auto; z-index: 2; ">
<div id="left3" style="position: relative; margin-left: 0px; margin-top: 0px;
width: 500px; height: auto; margin-right: auto; z-index: 2; ">
<img src="img\\imageEditorA.jpg">
</div>
<div id="left4" style="position: relative; margin-left: 520px; margin-top: -286px;
width: 500px; height: auto; margin-right: auto; z-index: 2; ">
<img src="img\\imageEditorB.jpg">
</div>
</div>
<div id="left5" style="position: relative; margin-left: 40px; margin-top: 0px;
width: auto; height: auto; margin-right: auto; z-index: 2; ">
<div id="button1" style="position: relative; margin-left: 0px;
margin-top: 20px; margin-right: auto;width: auto; height: auto;
text-align: left; line-height: 40pt; font-size: 100%;
font-weight: lighter; color: #ffffff;
letter-spacing: 0.1em; font-family:メイリオ; z-index: 2;">
<a href="https://github.com/tkpoly/works/releases/download/v1.7/imageEditor.zip" title="ダウンロード" color="000000" size="1">
■<font color="f0f0f0">フリーダウンロード</font>
<font color="#00f000">imageEditor.zip</font><br />
</a>
</div>
<p style="height: 240px; position: relative; margin-left: 0px; margin-top: 0px;
margin-right: auto;width: auto; height: auto;
text-align: left; line-height: 16pt; font-size: 80%;
font-weight: lighter; color: #ffffff;
letter-spacing: 0.1em; font-family:メイリオ; z-index: 2;">
＜内容＞<br />
・imageEditor.exe 実行ファイル<br />
コンパイル済シェーダー<br />
・VS.cso バーテックスシェーダー<br />
・PS.cso ピクセルシェーダー<br />
・gammaCS.cso ガンマＣＳ（コンピュートシェーダー）<br />
・downscaleCS.cso ダウンスケールＣＳ<br />
・boxbluCS.cso ボックスブラーＣＳ<br />
・upscaleCS.cso アップスケールＣＳ<br />
・sharpnessCS.cso シャープネスＣＳ<br />
・histCS.cso ヒストグラムＣＳ<br />
・README.md<br />
<br />
<br />
■<font size="3" color="f0a000">
※ソースファイルおよびソリューションファイルは、
Boothにて入手可能です（有料です）。
</font>
<div id="button1" style="position: relative; margin-left: 20px;
margin-top: 0px; margin-right: auto;width: 160px; height: auto;
text-align: left; line-height: 40pt; font-size: 100%;
font-weight: lighter; color: #ffffff;
letter-spacing: 0.1em; font-family:メイリオ; z-index: 2;">
<a href="https://vcmfc.booth.pm/items/9014039" title="Boothのページへ" color="000000" size="1">
<font color="#00e000" size="4">Boothのページへ</font><br />
</a>
</div>
</p>
</div>
</div>
<div id="left6">
<div class="section:last-child">
<div style="position: relative; margin-top: 140px;
width: 100%; height: 100px;
margin-left: 0px; margin-right: 0px;
background-color:#606090;
text-align: left; line-height: 16pt; font-size: 80%;
font-weight: lighter; color: #ffffff;
letter-spacing: 0.1em;
padding-left: 10px;
font-family:メイリオ; z-index: 2;">
tkpoly studio
</div>
</div>
</div>
</div>
</body>
</html>