質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

WebGL

WebGL(ウェブジーエル)は、ウェブブラウザで 3次元コンピュータグラフィックスを表示させるための標準仕様です。

Q&A

解決済

2回答

705閲覧

webgl readPixels alpha値が取得できない....?

YukiShimada

総合スコア17

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

WebGL

WebGL(ウェブジーエル)は、ウェブブラウザで 3次元コンピュータグラフィックスを表示させるための標準仕様です。

0グッド

0クリップ

投稿2018/03/21 06:16

###問題
webglのgl.readPixelsでクリックした座標のRGBA値を取得したいのですが,A値が常に255となってしまいます.調べた感じによるとopenglでの解決策はのっているのですが,webGLでは使えないと思います.
http://ka-zoo.net/2014/01/alpha-value-of-glreadpixels/
環境依存な気がするのですが,解決策はないでしょうか.....?

コンソール結果例

Uint8Array(4) [84, 107, 31, 255] Uint8Array(4) [85, 53, 88, 255] Uint8Array(4) [170, 175, 175, 255]

該当のソースコード

glsl

1   const u8 = new Uint8Array(4); 2 gl.readPixels(event.layerX, this.props.style.height - event.layerY, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, u8); 3 console.log(u8);

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

defghi1977

2018/03/21 06:46

コンテキストオブジェクトを取得している部分(getContextメソッド)のパラメータに{alpha: false}が有ったりしませんか?
YukiShimada

2018/03/21 08:10

ないですね.....逆にTrueにしたらいけるのか...?とか思ってやって見ましたがダメでした
defghi1977

2018/03/21 08:33

環境依存性は如何でしょうか?WEBブラウザの種類, OS及びそのバージョンなど, もしくは環境を変えて現象が発現するかどうか
YukiShimada

2018/03/21 09:19 編集

環境は以下のようになっております. MacBook Air (13-inch, Early 2015) CPU 2.2 GHz Intel Core i7 メモリ 8 GB 1600 MHz DDR3 ブラウザはchromeとfirefoxで試しました.後でwindowsで動くかやって見たいと思っています....
YukiShimada

2018/03/21 09:58

解決しました....完全に僕の理解不足でした.ありがとうございました.お騒がせしました...
guest

回答2

0

実行環境はどういった感じなのでしょうか。

またそのピックしているピクセルには、なにかしらの頂点やポリゴンが描かれた後ですか? それともクリアされた色そのままのピクセルなんでしょうか。

と、質問返しておいてなんなのですが、私の環境(Windows 10 + GTX 1080Ti + Chrome)では再現しなかったので、原因はわからないのですが……

考えられることとしては、WebGL のコンテキストを取得する際にアルファをオフにしたりしてると、そもそも Alpha に関連した処理が行われなくなり、どうやらピックしても 255 になるみたいです。これは私の環境で試してみたら、そうなりました。

JS

1// アルファ無効化でコンテキストを取得 2var gl = c.getContext('webgl', {alpha: false});

環境依存の現象の可能性もありますしなんとも言えないのですが、アルファ周りは結構設定が面倒というかわかりにくいので、手間かもしれませんが関係しそうなところをよく調べてみる必要があるかもしれませんね。

以下もよかったら参考に。
https://webglfundamentals.org/webgl/lessons/webgl-and-alpha.html

投稿2018/03/21 07:39

doxas

総合スコア112

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

YukiShimada

2018/03/21 09:46 編集

環境については以下のような感じとなります MacBook Air (13-inch, Early 2015) CPU 2.2 GHz Intel Core i7 メモリ 8 GB 1600 MHz DDR3 chromeとfirefoxで試して見てダメでした..... 近くのwindowsでも試して見ますが,以前にgl_vertexIdについても僕の環境ではまともに動作しない,と言ったことがあったため,環境依存の可能性が高いと思っています. ちなみにクリアされた色そのままではなく,描画した後です. ご回答ありがとうございました.解決したらこのページにてご報告させていただきます
YukiShimada

2018/03/21 09:57

なるほど...完全に理解していませんでした...... gl.clearColorでalpha値を1.0にしたまま,fragmentShaderでalpha値を変えたらそれがそのまま取得できるものだと思っていました. gl.clearColorを(0.0,0.0,0.0,0.0)にしたら正常に動作しました.おさわがせしました.........
doxas

2018/03/21 12:03

解決してよかったですね。 私はなんの役にも立たなくてすいません! 個人的な感覚の話になってしまうのですが、私はグラフィックスって画素と言う名の巨大な配列(数値の集合)だと思っていて、色を色としてではなく、RGBA などの数値のカタマリだと思って考えてみると、ブレンドとか今回の話のようなアルファ関連の話とかも、なんとなくイメージしやすいような気もします。
YukiShimada

2018/03/21 17:22

いえ,参考サイトを眺めながら色々試していたら解決しましたので大変為になりました!!! そうですね........ブレンドなどについても適当に流してしまっていた為,今後ちゃんと向き合っていきたいです...ありがとうございました....!!
guest

0

自己解決

gl.clearColorでalpha値を1.0にしたまま,fragmentShaderでalpha値を変えたらそれがそのまま取得できるものだと思っていました.
gl.clearColorを(0.0,0.0,0.0,0.0)にしたら正常に動作しました.お騒がせいたしました.

投稿2018/03/21 09:59

YukiShimada

総合スコア17

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問