Kugelblitz
Unreal Engine5+Ultra Dynamic Sky：空と雲を作る
Unreal Engine5とアセットUltra Dynamic Skyで空と雲を作ってみる。Ultra Dynamic Skyをプロジェクトに入れるだけで、ある程度きれいな空と雲をつくれるんだけど、いくつか不満があるところもあるので、いくつかパラメータを調整する。
まず、空の色がなんか薄いような気がするので、これをなんとかする。
SkyAtmosphreの、Rayleigh Scattering Scaleの値を、デフォルトの0.04から0.01にすると、空の色が濃くなる。値を小さくすればするほど濃くなっていく。
濃くした結果はこんな感じ。
次に、Cloud Wisps Color Intensityの値を、1.0から4.0に増やす。背景の雲の色が濃くなる。
Volumetric Cloudsの設定は、3D Erosion Intensity,High Frequency Noise Amount,High Frequency Levelsの値を変更。
この辺はあんまり設定項目の意味がわかってないから後で調べる。
好みの問題だが、Two Leyersにもチェック。
ここまでやってみて、Volumetric Cloudsって、イメージした雲を作るのに向いていない気がした。
同じような積雲（わた雲）が空に浮かんでいるのを表現するのにはいいかもしれないけど、実際の空を見ていると、雲ってもっと複雑で、それをVolumetric Cloudsのパラメータをいろいろいじったところで表現できるような気がしない。
なので、イメージにあったCloud Wisps Textureを作成してみる。
Cloud Wispsテクスチャは、Gimpで
・8192 * 2048px の新規画像作成
・背景レイヤーと別のレイヤーに雲ブラシで雲を適当に描く
・レイヤーを統合
・フィルター＞変形＞極座標
・キャンバスサイズを2048 * 2048pxに変更
・コントラストを強めにかけて、明暗をはっきりさせる
の手順で作成した。
最後のコントラストの調整は好み。のっぺりした雲を作りたい場合はかけなくてもいい。
あと、雲ブラシで雲を描くときは、下側のほうだけにする。上側は天頂となり、極座標変換をしたときは中央にぎゅっと詰まって歪んだ雲になってしまう。
今回はやらなかったけど、天頂付近にも雲を出したい場合は、極座標変換を掛けた後で中央付近に描けばいいと思う。
また、円周の一部にしか雲を描かなかったのは、実際全周に雲があるようなケースって、そんなにないような気がするから。もちろん、全周に雲があるような場合を表現したい場合は、全周に雲を描く。
で、作成したCloud Wispsのテクスチャを指定して、Cloud Wisps Intensityの値を4に変更する（Cloud Wisps の色が濃くなる）。
Cloud Wispsテクスチャを動的に差し替えるテスト。
ボタンを押すと、Cloud Wispsテクスチャが差し変わるウィジットを作成する。
ブループリントの処理は以下。
・Constructイベントで、Ultra Dynamic Skyのインスタンスを取得して、自身のメンバ変数にセットしておく。
・On Clickedイベントで、Ultra Dynamic SkyのCloud_Wisps_Textureの値を差し替える。
差し替えるテクスチャは配列で指定できるようにしてあるので、現状はIndex=0のテクスチャを使っているけど、将来的には選択をランダムにしたり、指定したIndexのテクスチャに差し替えるようにすることもできる。
太陽の変更点。デフォルトだと太陽のまぶしさがうまく表現できていないような気がするので、
・Sun Light Intensityを10.0
・Sun Softnessを0.01
・Sun Disk Intensityを20.0
に変更した。
課題として、Cloud Wispsの雲は太陽を遮蔽しないので、雲の向こうに太陽が来るとちょっとおかしなことになる。
太陽＞雲、の順番で描画するようにすればいいのかもしれないけど、どう実装すればいいのか見当がつかない。
また、雲の向こうに太陽がある場合、雲の色は白じゃなくて陰の色になるけど、それもちょっとどうやればいいのかわからない。
また、Cloud Wispsのテクスチャを動的に差し替える方法はわかったけど、ただ差し替えるだけだと瞬間的に切り替わってしまうので、2枚のテクスチャをブレンドしながら、じわじわ切り替えるようにする必要がある。こちらはなんとなく実装方法に見当がついているが、自然に切り替わるように見えるかはやってみないとわからない。
最後に、現実の雲の写真。こうやってみると、まだまだ現実とは差があるように感じる。
2023/09/24 09:03
Bootstrap5でcursor:pointerが効かない問題
btnクラスがdisabledのときにcursor:not-allowedを指定してもうまく機能しない。
なんでだろ、と思ったら、Bootstrap5のbtn:disabledに、pointer-events:noneが指定してある。
2022/07/08 08:10
Spring Bootで@Transaction利用時の注意点
Spring Bootで@Transaction利用時に注意しておくべきことのメモです。
たまに忘れて、アレ？ってなってしまうので。
@Transactionがちょっとややこしいのは、間違えた利用方法であっても、正常に動作している場合は間違えていることに気がつきにくいことです。
間違えていても、insertやupdateは正常に機能しているように見えるので、異常動作が発生しているのにロールバックされないことで、初めて誤りに気がつくことが多いです。
注意点は以下です。
◆メソッドに@Transactionを付与する場合、publicメソッドである必要がある
これはあまりやらない間違いですが、protectedやprivateメソッドに@Transactionを付与しても機能しません。
◆publicメソッドであっても、同一クラスの別メソッドからの呼び出しではない必要がある
@TransactionがついてないメソッドAから、ついているメソッドBを呼び出してるようなケースで、メソッドA,Bが同一クラスである場合には@Transactionが機能しません。
◆ロールバックするのは、非チェック例外が当該メソッドからスローされた時
チェック例外がスローされた場合はロールバックされません。
なので、チェック例外がスローされた時にもロールバックさせるには、キャッチ後にチェック例外を再スローするか、@Transactional(rollbackFor=Exception.class)のようにしてチェック例外でもロールバックするようにします。
チェック例外の再スローとrollbackFor、どちらもメリット／デメリットがあるかと思いますが、どちらにするのかプロジェクトで統一したほうがいいかと思います。
また、メソッドからスローされた時なので、メソッド内部でキャッチしている場合、再スローしないとロールバックしません。
◆@PostConstructやSpring Bootのスケジューラからの呼び出しでは機能しない
これ最近知りましたが、@PostConstructやSpring Bootのスケジューラからの呼び出されるメソッドに@Transactionがついていても機能しません。
@PostConstructやSpring Bootのスケジューラからの実行でトランザクション制御を行うには、@PostConstructやSpring Bootのスケジューラから呼び出されるクラス／メソッドと、トランザクション制御下で処理を行うクラス／メソッドを分ける必要があります。
2022/05/27 10:55
PGroongaを試してみる
PostgreSQLに全文検索機能を追加する、PGroongaを試してみた。
#PostgreSQL #PGroonga #Ubuntu
インストールは、公式にある通りにやればOK。特にハマるところはない。
単体のクエリが通ることを確認した後、Javaアプリからクエリを投げてみると、何故かうまく行かない。
PGroongaのログは、/var/lib/postgresql/13/main/pgroonga.logに出力されるのだが、
2022-01-25 21:57:20.184083|C|12138: -- CRASHED!!! --
2022-01-25 21:57:20.188223|C|12138: /lib/x86_64-linux-gnu/libgroonga.so.0(+0x1fd825) [0x7f4acd85f825]
2022-01-25 21:57:20.188283|C|12138: /lib/x86_64-linux-gnu/libpthread.so.0(+0x153c0) [0x7f4adb0203c0]
2022-01-25 21:57:20.188301|C|12138: /usr/lib/postgresql/13/lib/pgroonga.so(PGrnCheckRLSEnabledSeqScan+0x34) [0x7f4ace447bf4]
2022-01-25 21:57:20.188317|C|12138: /usr/lib/postgresql/13/lib/pgroonga.so(pgroonga_query_text+0x53) [0x7f4ace45a073]あれこれ試した結果、トランザクションの中で全文検索を行うと、エラーが出ることがわかった。@Transactionalアノテーションを外したらうまく動くようになった。これがPGroongaの仕様なのかわからないけど、とりあえずこれでよしとする。
また、
vm.overcommit_memory kernel parameter should be 1: <0>: See INFO level log to resolve thisvm.overcommit_memory=12022/01/25 22:55
Spring Bootでaタグのping属性を試してみる
Spring Bootでaタグのping属性を試してみようと思ったら、csrfトークンが送れないのでうまく行かないことがわかった。
ping属性が使えなくても、リンククリックをきっかけにしてajaxで送る等、代替手段はあるので、この件はこれ以上掘り下げないものとする。
2022/01/24 23:29
背景全体にイメージを表示するためのCSS
body {
background-image: url(../img/back.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
2022/01/10 21:46
Processing:タイル
float TILE_SIZE = 32;
void setup() {
size(512,512);
colorMode(HSB, 360, 100, 100);
background(200, 80, 80);
noLoop();
TILE_SIZE = width / (width / 32);
}
void draw() {
for (float y = 0; y < height + TILE_SIZE; y += TILE_SIZE) {
for (float x = 0; x < width + TILE_SIZE; x+= TILE_SIZE) {
noStroke();
fill(lerp(190,200,noise(x / 100, y / 100)), 100, 100);
rect(x, y, TILE_SIZE, TILE_SIZE);
stroke(0, 0, 90);
strokeWeight(2);
noFill();
if (random(1) > 0.5f) {
arc(x, y, TILE_SIZE, TILE_SIZE, radians(0), radians(90));
arc(x + TILE_SIZE, y + TILE_SIZE, TILE_SIZE, TILE_SIZE, radians(180), radians(270));
} else {
arc(x + TILE_SIZE, y, TILE_SIZE, TILE_SIZE, radians(90), radians(180));
arc(x, y + TILE_SIZE, TILE_SIZE, TILE_SIZE, radians(270), radians(360));
}
arc(x, y, TILE_SIZE / 2, TILE_SIZE / 2, radians(0), radians(90));
arc(x + TILE_SIZE, y + TILE_SIZE, TILE_SIZE / 2, TILE_SIZE / 2, radians(180), radians(270));
arc(x + TILE_SIZE, y, TILE_SIZE / 2, TILE_SIZE / 2, radians(90), radians(180));
arc(x, y + TILE_SIZE, TILE_SIZE / 2, TILE_SIZE / 2, radians(270), radians(360));
}
}
for (float y = 0; y < height + TILE_SIZE; y += TILE_SIZE) {
stroke(0, 0, 80);
strokeWeight(1);
line(0, y, width ,y);
}
for (float x = 0; x < width + TILE_SIZE; x+= TILE_SIZE) {
stroke(0, 0, 80);
strokeWeight(1);
line(x, 0, x, height);
}
}
void mousePressed() {
saveFrame("tiling-######.png");
}2022/01/10 18:48
Spring Bootでイメージをレスポンスする
Spring Bootで、imgタグ等からリクエストされたイメージ表示要求に対して、イメージをレスポンスするためのコードスニペットは以下。
@Value("${application.iamge-max-age}")
private String imageMaxAge;
@GetMapping(value = "/view/{fileId}")
public void view(HttpServletResponse response, @PathVariable String fileId) throws IOException {
// ファイルIDに対応するイメージファイルパスを取得する処理はアプリケーション依存
String path = foobar.findById(fileId);
if (file != null) {
// ブラウザにキャッシュさせる。86400秒=1日
response.setHeader("Cache-Control", "max-age=" + imageMaxAge);
// MimeType算出/設定
FileTypeMap filetypeMap = FileTypeMap.getDefaultFileTypeMap();
String mimeType = filetypeMap.getContentType(path);
response.setContentType(mimeType);
try (InputStream is = new FileInputStream(path);
BufferedInputStream bis = new BufferedInputStream(is);
OutputStream os = response.getOutputStream();
BufferedOutputStream bos = new BufferedOutputStream(os)) {
// バッファリングすることでどの程度パフォーマンスがあがるのか？
final long transferSize = bis.transferTo(bos);
log.info("Response complete.fileId={},mimeType={},size={}byte", fileId, mimeType, transferSize) ;
} catch (FileNotFoundException ex) {
// DBレコード上にイメージファイルが存在することになっているのに、存在しない、
// ということはなんらかのデータ不整合が発生しているため、500:Internal Server Errorとする。
log.error("File not found. filePath={}", file.getPath());
response.sendError(HttpServletResponse.SC_INTERNAL_SERVER_ERROR);
} catch (IOException ex) {
log.error("Faild read file. Cause by file not exists on this server. filePath={}" + path, ex);
response.sendError(HttpServletResponse.SC_INTERNAL_SERVER_ERROR);
}
} else {
// 指定されたファイルIDがDBレコード上に存在しない理由は、
// 1.クライアントから不正なリクエストを要求されている
// 2.イメージファイルの表示を要求するきっかけとなるそもそものサーバレスポンスが間違っている
// のどちらか。2の場合はなんらかのバグだが、ここではどちらの理由であるかが判定できないため、
// クライアント側には404エラーで応答する。
log.warn("File not found. Cause by invalid file id. fileId={}", fileId);
response.sendError(HttpServletResponse.SC_NOT_FOUND);
}
}
InputStream をBufferedInputStream でラップして、OutputStream をBufferedOutputStream でラップしているけど、バッファリングすることでどのくらいパフォーマンスが変わるのかは不明。
InputStream側は、読み取り先がファイルなので、バッファリングする効果がありそうだけど、OutputStream側は書き込み先がネットワークストリームなので、正直効果がどの程度あるのかがわからない。
2022/01/10 17:04
Processing:揺らめく四角
上のほうに行くほど揺らぎが大きくなる四角。炎のイメージ。少しずつProcessing思い出してきた。
void setup() {
size(512, 512);
colorMode(HSB, 360, 100, 100);
noLoop();
}
void draw() {
PGraphics g = createGraphics(512, 512, JAVA2D);
g.beginDraw();
g.noStroke();
g.background(255, 255, 255, 0);
g.colorMode(HSB, 360, 100, 100, 100);
g.rectMode(CENTER);
float hue = 60;
for (int y = 16; y < 512; y += 32) {
for (int x = 16; x < 512; x += 32) {
float ratio = map(y, 0, 512, 45, 5);
float r = map(noise(x, y), 0, 1, -ratio, ratio);
float offset = map(noise(x, y), 0, 1, -ratio, ratio) / 4;
g.translate(x + offset, y + offset);
g.rotate(radians(r));
g.fill(hue, 100, 100, map(y, 0, 512, 0, 100));
g.rect(0, 0, 24, 24);
g.rotate(radians(-r));
g.translate(-x - offset, -y - offset);
}
hue -= 4;
hue = hue > 360 ? 0 : hue;
hue = hue < 0 ? 360 : hue;
}
save("tile.png");
g.endDraw();
image(g, 0, 0);
g.save("tile.png");
}2022/01/09 18:30
久しぶりにProcessing／四角形で描く円
void setup() {
size(512, 512);
colorMode(HSB, 360, 100, 100);
noLoop();
}
void draw() {
PGraphics g = createGraphics(512, 512, JAVA2D);
g.beginDraw();
g.noStroke();
g.background(255, 255, 255, 0);
g.rectMode(CENTER);
g.fill(270, 100, 100, 10);
int centerW = g.width / 2;
int centerH = g.height / 2;
float size = sqrt(2) * 512 / 2;
for (int i = 0; i < 360; i += 10) {
g.translate(centerW, centerH);
g.rotate(radians(i));
g.translate(-centerW, -centerH);
g.rect(centerW, centerH, size, size);
g.translate(centerW, centerH);
g.rotate(radians(-i));
g.translate(-centerW, -centerH);
}
g.endDraw();
image(g, 0, 0);
g.save("circle.png");
}2022/01/09 14:58
Loading...