HSPポータル
サイトマップ お問い合わせ


HSPTV!掲示板


未解決 解決 停止 削除要請

2021
0221
youdaiHGIMG4でMatcapシェーダーを実装したい3解決


youdai

リンク

2021/2/21(Sun) 14:44:07|NO.92305

HGIMG4でMatcapシェーダーを実装したいです。

wgld.orgで解説されているWebGLのスフィア環境マッピング(Matcap Shader)を参考にシェーダーを作成してみたのですが、matcap.vertの部分でエラーになってしまいます。

実行環境はWeb版ではなく、Windows版のOpenGLのhgimg4.asです。
HSP3のバージョンは、HSP3.6bate4です。(bate5については今日知りましたので、これから研究します)

以下がその作成したファイルです。

・obj.materialは、モデルに対するマテリアルファイルだと思ってください。
・untitled.pngがMatcap用のテクスチャーです。

matcap.vert

attribute vec3 position; attribute vec3 normal; uniform mat4 u_mvpMatrix; uniform mat4 u_normalMatrix; varying vec3 vNormal; void main(void){ vNormal = normalize((u_normalMatrix * vec4(normal, 0.0)).xyz); gl_Position = u_mvpMatrix * vec4(position, 1.0); }

matcap.frag

precision mediump float; uniform sampler2D u_texture; varying vec3 vNormal; void main(void){ vec2 texCoord = (vNormal.xy + 1.0) / 2.0; vec4 smpColor = texture2D(u_texture, vec2(texCoord.s, 1.0 - texCoord.t)); gl_FragColor = smpColor; }

obj.material

material matcap { u_wvpMatrix = WORLD_VIEW_PROJECTION_MATRIX u_normalMatrix = INVERSE_TRANSPOSE_WORLD_VIEW_MATRIX sampler u_Texture { mipmap = true wrapS = REPEAT wrapT = REPEAT } renderState { cullFace = false depthTest = true } technique { pass { vertexShader = res/shaders/matcap.vert fragmentShader = res/shaders/matcap.frag } } } material mat1 : matcap { sampler u_Texture { path = res/untitled.png wrapS = REPEAT wrapT = REPEAT } }

恐らく、matcap.vertのpositionとnomalが原因なんじゃないかと思っています。

HGIMG4ではskinig.vertに記述してあるような、getPotiton()やgetNomal()も記述して、それを代入する必要があるのかもしれませんが、よく分かりませんでした。

Matcapシェーダーを実装できるなら、上記のスクリプトのやり方でなくとも構いません。
失敗の原因が分かる方、または別のスクリプトで実装できるよという方がいらっしゃいましたら、ぜひご教授お願い致します。



この記事に返信する


法貴優雅

リンク

2021/2/21(Sun) 18:28:35|NO.92306

サンプルのアヒルでやってみました。
一応、環境マップっぽくできましたが、これでどうでしょうか?

matcap.vert

attribute vec3 a_normal; attribute vec4 a_position; attribute vec2 a_texCoord; uniform mat4 u_normalMatrix; uniform mat4 u_worldViewProjectionMatrix; varying vec3 v_normal; varying vec2 v_texCoord; void main() { v_normal = normalize((u_normalMatrix * vec4(a_normal, 0.0)).xyz); gl_Position = u_worldViewProjectionMatrix * a_position; v_texCoord = a_texCoord; }


matcap.frag

#ifdef OPENGL_ES #extension GL_OES_standard_derivatives : enable #ifdef GL_FRAGMENT_PRECISION_HIGH precision highp float; #else precision mediump float; #endif #else precision mediump float; #endif uniform sampler2D u_diffuseTexture; varying vec3 v_normal; varying vec2 v_texCoord; void main() { vec2 n = (v_normal.xy + 1.0) * 0.5; gl_FragColor = texture2D(u_diffuseTexture, vec2(n.s, 1.0 - n.t)); }

.material

material textured { u_worldViewProjectionMatrix = WORLD_VIEW_PROJECTION_MATRIX u_normalMatrix = INVERSE_TRANSPOSE_WORLD_VIEW_MATRIX sampler u_diffuseTexture { mipmap = true wrapS = CLAMP wrapT = CLAMP minFilter = LINEAR_MIPMAP_LINEAR magFilter = LINEAR } renderState { cullFace = true depthTest = true } technique { pass { vertexShader = res/shaders/matcap.vert fragmentShader = res/shaders/matcap.frag } } } material blinn1 : textured { sampler u_diffuseTexture { path = duck.png wrapS = REPEAT wrapT = REPEAT } }



法貴優雅

リンク

2021/2/21(Sun) 18:44:24|NO.92307

補足
duck.pngはMatcap用のテクスチャーに差し替えてください。



youdai

リンク

2021/2/22(Mon) 17:53:22|NO.92318

ありがとうございます! 実装できました!
これ本当に凄いですね・・・。これで表現力がグッと上がります。
本当にありがとうございます!



ONION software Copyright 1997-2021(c) All rights reserved.