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

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

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

SpriteKitは、iOSやOS Xで使用できるApple社製の2Dゲーム開発フレームワークです。

OpenGL

OpenGLは、プラットフォームから独立した、デスクトップやワークステーション、モバイルサービスで使用可能な映像処理用のAPIです。

Xcode

Xcodeはソフトウェア開発のための、Appleの統合開発環境です。Mac OSXに付随するかたちで配布されています。

GLSL

GLSL (OpenGL Shading Language) はC言語をベースとしたシェーディング言語です。

Q&A

解決済

1回答

476閲覧

GLSLシェーダの色を変えたいのですが、どうすれば良いのかわかりません。

instinct

総合スコア28

SpriteKit

SpriteKitは、iOSやOS Xで使用できるApple社製の2Dゲーム開発フレームワークです。

OpenGL

OpenGLは、プラットフォームから独立した、デスクトップやワークステーション、モバイルサービスで使用可能な映像処理用のAPIです。

Xcode

Xcodeはソフトウェア開発のための、Appleの統合開発環境です。Mac OSXに付随するかたちで配布されています。

GLSL

GLSL (OpenGL Shading Language) はC言語をベースとしたシェーディング言語です。

0グッド

0クリップ

投稿2022/05/03 12:24

spritekitを使ってゲームを作っています。シェーダの色を変えたいのですが解りません。波の色を白と黒で表示したいと考えています。よろしくおねがいいたします。

void main( void ){ vec2 coord = v_tex_coord; float deltaY = sin(v_tex_coord.x * 3.14 * 20 + u_time * 4) * 0.1; coord.y = coord.y + deltaY; vec4 color = vec4(coord,0.0,1.0); gl_FragColor = color; }

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

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

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

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

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

guest

回答1

0

ベストアンサー

波の色を白と黒で表示したい

表現したいイメージが良く分かりませんが、モノクロで表示したいということでしょうか?
単純にモノクロでということであれば、各色を足して3で割り、r,g,b にその色を設定すればモノクロ表示になるかと思います。

以下は WebGL + GLSL での実行例になります。(spritekit は使ったことは無いので、もしかしたらシェーダのバージョンの相違で動かないかもしれません。)
画像の左側が現状の色、右側がモノクロ変換した結果になります。

■ 実行例
https://jsfiddle.net/cx20/61v932ab/

イメージ説明

GLSL

1void main(void){ 2 vec2 coord = v_tex_coord; 3 4 float deltaY = sin(v_tex_coord.x * 3.14 * 20.0 + u_time * 4.0) * 0.1; 5 coord.y = coord.y + deltaY; 6 7 vec4 color = vec4(coord,0.0,1.0); 8 float mono = 0.0; 9 mono = (color.r + color.g + color.b) / 3.0; 10 11 //gl_FragColor = color; 12 gl_FragColor = vec4(vec3(mono), 1.0); 13}

投稿2022/05/03 16:45

編集2022/05/03 16:46
cx20

総合スコア4632

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

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

instinct

2022/05/04 11:54

ありがとうございました。無事実装する事が出来ました!
cx20

2022/05/04 12:09

蛇足ですが、 単純にr,g,bの三色の平均を取った場合、若干暗く見えるかと思います。 これを改善する為には「NTSC 系加重平均法」を用いると改善することができます。 「NTSC 系加重平均法」については、こちらを参照下さい。 ■ wgld.org | WebGL_ グレイスケール変換 https://wgld.org/d/webgl/w053.html ■ 単純平均法とNTSC 系加重平均法の比較サンプル https://cx20.github.io/glsl-test/examples/017/index.html
instinct

2022/05/06 07:29

遅くなりました。ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問