Open16

three.js入門つまづき

BabaBaba

jsのノリで書いていたら躓いた細々をメモしていきます

BabaBaba

剰余(%) が使えなくてすごい調べたけど時間かかった・・・涙
=> mod(x, y) で解決!!
参考:https://note.com/toyoda/n/nf9f5265aa0cf

モジューロともいうらしい。
それ知ってたらもっと早くたどり着けたかも。
つまり圧倒的語彙力のなさと検索センスのなさ!かなしい!

BabaBaba

console.log が使えない。
地味にやりづらいので、場合分けして背景色を出したり、ちまちまソースを変えてさぐりさぐりやってます。。
良き方法求む。

BabaBaba

float とかは小数点以下がないとダメ。
hoge = 0; とかしがち。
エラーで怒ってすらくれないので、なんでダメなんだ?!!ってなりがち。
毎回思い出すまでおろおろする。

watabo_shiwatabo_shi

vec系のときは整数入れても怒られないことに最近気がついた。

float hoge = 1;// ← おこられる
vec3 color = vec3(1)// ← おこられない
BabaBaba

知らなかった!!🙄
ありがとうございます〜

BabaBaba

js -> GLSL(.fragとか) に変数を渡す時はユニフォーム変数に入れる。
jsでできるだけアニメーションや変化を記述して値を渡してあげる方が良い。
(jsの方が描き慣れてるし、負荷軽減)

ユニフォーム変数:https://thebookofshaders.com/03/?lan=jp

BabaBaba

glsl-noiseをインポートして使う時に思ったのですが

#pragma glslify: snoise2 = require(glsl-noise/simplex/2d)

の #pragma glslify ってなんだろう。(書き方なんだろうけど・・・)
jsでもrequireとかはあるから、インポートしてるのはわかる。

#pragma は 宣言の時に使うっぽい。(C++よくわかってない)
で、#pragma glslify は、

シェーダーにまた別のシェーダーを読み込ませたい場合は、glslifyを使用します。

らしい。
なんとなくわかった!なんとなく!!

参考URL:【WebGL / GLSL】webpack,glslify,VS Codeでシェーダーを効率よく開発する!

BabaBaba

GLSLの中でfor文を書く時、変数をfor()内でかけない!

error
float j = 5.0;
for(float i = 0.0; i < j; i++){
    // 何かの処理
}
OK
for(float i = 0.0; i < 5.0; i++){
    // 何かの処理
}

https://qiita.com/doxas/items/00567758621bb506e584#glsl-の-for-ステートメント

watabo_shiwatabo_shi

const float にするとコンパイル通るよ。
float だけだと長さが動的な繰り返しとして認識されて弾かれるけど、定数ならOK。

const float j = 5.0;
for(float i = 0.0; i < j; i++){
    // 何かの処理
}
BabaBaba

ありがとう〜〜

floatだけだと長さが動的な繰り返しとして認識されて

そもそもこれが理解できてないから調べます・・・!

BabaBaba

const floatにすると定数になって、値が変更できないのはわかってるんだけど、
floatだと変数だからってのは理解しました・・・ふむ・・

watabo_shiwatabo_shi

だいぶ言葉足らずだった、、w

floatだけだと長さ(for分の繰り返す回数)が動的(になる可能性がある)な繰り返しとして認識されて(→そもそもGLSLはJSよりコンパイラが厳しいので、forの繰り返しとか配列の長さとかに不変でない値をいれると怒られる)

ので const float で定数にして変更されないことを明示するとコンパイルが通る。

BabaBaba

めちゃくちゃ丁寧に・・・!ありがとう!!
よく「良くも悪くもjsはどうとでもかけちゃう」的なことを言われてるけど、こういう時に直面して実感する・・・

BabaBaba

パーティクルたくさん出そうと思って
glslの中でfor文めちゃくちゃ回したらFPSガタ落ちした・・・。

BabaBaba

for文じゃなくて、if文が原因だったみたい。
glsl(.frag)の中では色付けだけした方がよい。

jsでmeshを複製して増やしていく・動かしていく(geometoryは1つ)。
動かすのは、positionで動かす。