three.js入門つまづき
jsのノリで書いていたら躓いた細々をメモしていきます
剰余(%) が使えなくてすごい調べたけど時間かかった・・・涙
=> mod(x, y) で解決!!
参考:https://note.com/toyoda/n/nf9f5265aa0cf
モジューロともいうらしい。
それ知ってたらもっと早くたどり着けたかも。
つまり圧倒的語彙力のなさと検索センスのなさ!かなしい!
console.log が使えない。
地味にやりづらいので、場合分けして背景色を出したり、ちまちまソースを変えてさぐりさぐりやってます。。
良き方法求む。
float とかは小数点以下がないとダメ。
hoge = 0; とかしがち。
エラーで怒ってすらくれないので、なんでダメなんだ?!!ってなりがち。
毎回思い出すまでおろおろする。
vec系のときは整数入れても怒られないことに最近気がついた。
float hoge = 1;// ← おこられる
vec3 color = vec3(1)// ← おこられない
知らなかった!!🙄
ありがとうございます〜
js -> GLSL(.fragとか) に変数を渡す時はユニフォーム変数に入れる。
jsでできるだけアニメーションや変化を記述して値を渡してあげる方が良い。
(jsの方が描き慣れてるし、負荷軽減)
glsl-noiseをインポートして使う時に思ったのですが
#pragma glslify: snoise2 = require(glsl-noise/simplex/2d)
の #pragma glslify ってなんだろう。(書き方なんだろうけど・・・)
jsでもrequireとかはあるから、インポートしてるのはわかる。
#pragma は 宣言の時に使うっぽい。(C++よくわかってない)
で、#pragma glslify は、
シェーダーにまた別のシェーダーを読み込ませたい場合は、glslifyを使用します。
らしい。
なんとなくわかった!なんとなく!!
GLSLの中でfor文を書く時、変数をfor()内でかけない!
float j = 5.0;
for(float i = 0.0; i < j; i++){
// 何かの処理
}
for(float i = 0.0; i < 5.0; i++){
// 何かの処理
}
const float
にするとコンパイル通るよ。
float
だけだと長さが動的な繰り返しとして認識されて弾かれるけど、定数ならOK。
const float j = 5.0;
for(float i = 0.0; i < j; i++){
// 何かの処理
}
ありがとう〜〜
float
だけだと長さが動的な繰り返しとして認識されて
そもそもこれが理解できてないから調べます・・・!
const float
にすると定数になって、値が変更できないのはわかってるんだけど、
float
だと変数だからってのは理解しました・・・ふむ・・
だいぶ言葉足らずだった、、w
float
だけだと長さ(for分の繰り返す回数)が動的(になる可能性がある)な繰り返しとして認識されて(→そもそもGLSLはJSよりコンパイラが厳しいので、forの繰り返しとか配列の長さとかに不変でない値をいれると怒られる)
ので const float
で定数にして変更されないことを明示するとコンパイルが通る。
めちゃくちゃ丁寧に・・・!ありがとう!!
よく「良くも悪くもjsはどうとでもかけちゃう」的なことを言われてるけど、こういう時に直面して実感する・・・