0

samplerCubeShadow を使用して OpenGL シャドウ マッピング コードを WebGL に適合させようとしていますが、有効なデータ形式とストレージが最初と 2 番目で明らかに同じではないため、必死に体系的に袋小路に陥ります。

他のサンプラーを使用してsampler*Shadow、他の方法でテクスチャにレンダリングすることでシャドウ マッピングを実現できることはわかっていますが、可能であれば、OpenGL で行ったのと同じ方法で実現したいと考えています。

私の問題は、フォーマット、内部フォーマット、および samplerCubeShadow サンプラーに期待される WebGL/GLSL の適切な組み合わせを見つけることです (存在する場合)。

1. 質問: デスティネーション デプス テクスチャ フォーマット。

OpenGL では、深度テクスチャとして次の形式を使用します。

GL_DEPTH_COMPONENT16, GL_DEPTH_COMPONENT, GL_FLOAT

しかし、WebGLで受け入れられている唯一の組み合わせDEPTH_ATTACHEMENTは

gl.DEPTH_COMPONENT16, gl.DEPTH_COMPONENT, gl.UNSIGNED_SHORT

試しgl.FLOATてみましgl.HALF_FLOATたが、 とはtexImage2D別のタイプを拒否しgl.UNSIGNED_SHORTます。

WebGL の深度テクスチャに適した形式ですか? はいの場合、WebGL は深さデータを float ではなく 16 ビット整数で格納します。これは奇妙に聞こえますが、16 ビットは 16 ビットであるため、実際の問題ではありません。WebGL の深度テクスチャの唯一の受け入れ可能な形式は本当にそれですか?

2. 問題: テクスチャがレンダリングできない

エラーなしでこのテクスチャを描画できますが、テクスチャを にバインドする瞬間になるとsamplerCubeShadow、WebGL は人生で見たことのないエラーをスローします。

texture bound to texture unit # is not renderable. It maybe non-power-of-2 and have incompatible texture filtering.

この時点から

「レンダリング可能な」フォーマットを見つけたが、これを として使用できないか、 「レンダリング可能」ではないDEPTH_ATTACHEMENTに適したフォーマットを見つけましたDEPTH_ATTACHEMENT...では、解決策は何ですか?

擬似コード:

 gl.bindTexture(gl.TEXTURE_CUBE_MAP, shadow_cube);
 gl.texParameteri(gl.TEXTURE_CUBE_MAP, 0x2800, gl.LINEAR);
 gl.texParameteri(gl.TEXTURE_CUBE_MAP, 0x2800, gl.LINEAR);
 gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
 gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
 gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_R, gl.CLAMP_TO_EDGE);
 gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_COMPARE_MODE, gl.COMPARE_R_TO_TEXTURE);
 gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_COMPARE_FUNC, gl.GREATER);
 for(var c = 0; c < 6; c++) {
    gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X+c, 0, gl.DEPTH_COMPONENT16, 512, 512, 0, gl.DEPTH_COMPONENT, gl.UNSIGNED_SHORT, null);
 }

gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, offscreen_fbo);
gl.framebufferTexture2D(gl.DRAW_FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, null, 0);
for(var c = 0; c < 6; c++) {
   gl.framebufferTexture2D(gl.DRAW_FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.TEXTURE_CUBE_MAP_POSITIVE_X+c, shadow_cube, 0);
   // draw things...
}

gl.activeTexture(gl.TEXTURE#);
gl.bindTexture(gl.TEXTURE_CUBE_MAP, shadow_cube);

編集: OpenGL コードでは、宛先深度テクスチャに追加のパラメーターがあります。

glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_DEPTH_TEXTURE_MODE, GL_LUMINANCE);

ただし、DEPTH_TEXTURE_MODEWebGLには存在しません...これがWebGLで機能するために欠けているのはこれでしょうか?

4

1 に答える 1