とりあえず貼ってみる
まずテクスチャ画像を作らないといけない。こういうのはPostscriptの出番（アレ？）。 MIPMAPの都合があるのでピクセル数は2のベキがいい。
上下を1ピクセル残し、左右は中央に「fg」を描画、サイズは64ピクセル
GL側はこんな感じ
- 普通は頂点シェーダーでテクスチャ座標を生成してフラグメントシェーダーに渡すが、ポイントだとGLが勝手にやってくれる（ポイントスプライト）
- この場合、テクスチャ座標（UV）は
gl_PointCoordに入ってくる - 設定する画像はimgで読むのが楽だが、読むまで待たなければならない
- canvasに書き込んで
getImageDataで取ってきてもいい - Promiseを作って、解決したらイメージをテクスチャに割り当てる
- 使う時に
activeTextureして、bindTextureして、uniformにテクスチャ番号を整数値で設定 - フラグメントシェーダーで設定されたuniformを
texture2Dに渡すとテクセルが取れる - デフォルトでMIPMAPが有効になっているので、無効にするかMIPMAPを生成するかしないと画像が出ないことがあるので注意（
TEXTURE_MIN_FILTERを設定しているところが相当）
テクスチャ座標系
gl_PointCoordをそのまま色データにして描画する- 先ほどの例ではなんとなく画像がきちんと出ていたが、この結果をみると、ポイントの左上が原点だということが分かる
- GLの仕様ではこれを左下原点にすることもできるが、WebGLではできないっぽい（デフォルトは左上原点）
- ポイントの左上にテクスチャ画像の左上が出ていたのだから、テクスチャサンプラの座標系はデフォルトで画像左上が原点
- 通常、GLの座標系は左下原点なので、頂点座標をそのままテクスチャ座標にすると上下が反転する
pixelStoreiのUNPACK_FLIP_Y_WEBGLでテクスチャの上下をひっくり返すことができる
MIPMAP
もう少しごちゃごちゃしたテクスチャを作る
いろんなモードで貼り付ける
- 詳細は他のサイトに任せ、モードの確認だけ
- MIPMAPは自分で全部レベルの画像を設定することもできるが、
generateMipmapで生成することもできる - ある程度のレベルまで自分で画像を設定する場合、先にレベル0を設定して
generateMipmapしておいてから、残りのレベルを設定すればよさそうだ - 上が補間あり（
LINIEAR_*）、下が補間なし（NEAREST_*）、補間なしはギザギザするが、補間ありはモヤっとする - 一番左はMIPMAPなしで、小さいときになんかゴニョゴニョと点が移動するように見える（エイリアシング）
- 中央はMIPMAP間の補間なし（
*_MIPMAP_NEAREST）で、小さい時のゴニョゴニョ感はないが、画質が突然変わるのが分かる - 右はMIPMAP間の補間あり（
*_MIPMAP_LINEAR）で、滑らかに画質が変わっていく - 大きさを変えない場合で、キリっとした描画にしたいなら
NEAREST_MIPMAP_NEARESTがよく、きれいに描画したいならLINEAR_MIPMAP_NEAREST、動的にサイズを変えるのならLINEAR_MIPMAP_LINEARかな
複数のテクスチャを使う
素直に複数のテクスチャを使う
- Promiseで全部のテクスチャの読み込みが終わるのを待つ必要がある
ひとつの画像に押し込む
- ひとつの画像の上半分と下半分でミックス
- 合わせ技も可能（フォントでよくやる: 書体＝テクスチャ、文字＝UV）
初稿: 06 Jul 2024
Copyright (C) 2024 akamoz.jp