search

MozillaReality / FirefoxReality

INACTIVE - A fast and secure browser for standalone virtual-reality and augmented-reality headsets.
https://mzl.la/reality
Mozilla Public License 2.0
770 stars 217 forks source link

glTF model doesn't appear on Three.js examples #461

Closed takahirox closed 6 years ago

takahirox commented 6 years ago

Hardware

Oculus Go

FxR APK file I used is public/FirefoxReality-oculusvr-debug.apk on https://tools.taskcluster.net/groups/Wqqjon9nQoqYx7V8SvVLSQ/tasks/Wqqjon9nQoqYx7V8SvVLSQ/runs/0/artifacts

Steps to Reproduce

  1. Go to Three.js examples using glTF models on Oculus Go
  2. Confirm glTF model doesn't appear

Current Behavior

glTF model doesn't appear.

Expected Behavior

glTF model appears. Oculus Go default browser works fine.

Possible Solution

From the error log below, I guess shader texture LOD extension(EXT_shader_texture_lod) handling seems wrong? I suppose FxR doesn't support EXT_shader_texture_lod but gl.getExtension( 'EXT_shader_texture_lod' ) returns non-null?

https://github.com/mrdoob/three.js/blob/dev/src/renderers/webgl/WebGLProgram.js#L90

Context

glTF is one of the standard 3D format. If FxR can't render glTF model (with envMap), many WebVR app couldn't work.

Error Logs and Stack Traces

09-01 09:04:08.431 29552-29575/org.mozilla.vrbrowser E/GeckoConsole: [JavaScript Error: "THREE.WebGLShader: Shader couldn't compile."] 09-01 09:04:08.441 29552-29575/org.mozilla.vrbrowser W/GeckoConsole: [JavaScript Warning: "THREE.WebGLShader: gl.getShaderInfoLog() fragment WARNING: 0:1: extension 'GL_EXT_shader_texture_lod' is not supported ERROR: 0:93: 'textureCubeLodEXT' : no matching overloaded function found ERROR: 0:93: '=' : cannot convert from 'const float' to '4-component vector of float' ERROR: 2 compilation errors. No code generated. 1: #extension GL_OES_standard_derivatives : enable 2: #extension GL_EXT_shader_texture_lod : enable 3: precision highp float; 4: precision highp int; 5: #define SHADER_NAME MeshStandardMaterial 6: #define STANDARD 7: #define GAMMA_FACTOR 2 8: #define USE_MAP 9: #define USE_ENVMAP 10: #define ENVMAP_TYPE_CUBE 11: #define ENVMAP_MODE_REFLECTION 12: #define ENVMAP_BLENDING_MULTIPLY 13: #define USE_AOMAP 14: #define USE_EMISSIVEMAP 15: #define USE_NORMALMAP 16: #define USE_ROUGHNESSMAP 17: #define USE_METALNESSMAP 18: #define TEXTURE_LOD_EXT 19: uniform mat4 viewMatrix; 20: uniform vec3 cameraPosition; 21: #define TONE_MAPPING 22: #ifndef saturate 23: #define satu 09-01 09:04:08.442 29552-29575/org.mozilla.vrbrowser W/GeckoConsole: [JavaScript Warning: "Error: WebGL warning: linkProgram: Must have an compiled fragment shader attached." {file: "https://threejs.org/build/three.js" line: 17279}] ``` ```
MortimerGoro commented 6 years ago

Maybe the desktop user agent is affecting? Could you try to select Mobile UA in settings->dev options?

takahirox commented 6 years ago

I tried all three UA modes, they're Desktop, Mobile, and VR, but nothing changes.

nancyhang commented 6 years ago

Assigned to Fernando just to investigate.

daoshengmu commented 6 years ago

As below, EXT_shader_texture_lod seems like not be supported in Gecko, and FF gets a wrong result when doing getExtension( 'EXT_shader_texture_lod' ).

https://bugzilla.mozilla.org/show_bug.cgi?id=1270435 https://bugzilla.mozilla.org/show_bug.cgi?id=1451287 https://dxr.mozilla.org/mozilla-central/source/dom/canvas/WebGLExtensionShaderTextureLod.cpp#14

takahirox commented 6 years ago

Not familiar with Gecko yet. Is that Android FF specific issue? Or all FF issue? (FF on my laptop renders glTF model tho.)

Can FxR override getExtension method? Unless we fix, FxR can't render glTF model with envMap on Three.js, they're ones of the most popular 3D format + platform combinations.

If we can't and it takes time to fix the root issue, maybe I should add a workaround in Three.js side...

fernandojsg commented 6 years ago

The first step should be to return null when requesting that extension as you mentioned so we could get the fallback shader behaviour, even if not optimal at least it won't crash. So we could have it working until the extension will be properly implemented on gecko.

daoshengmu commented 6 years ago

getExtension( 'EXT_shader_texture_lod' ) would be null if the hardware doesn't support it. Btw, We have different behavior between Windows and MacOS. ANGLE in Windows did some workaround for some extensions that we can't support directly. Does Desktop FF renders 'EXT_shader_texture_lod' correctly? If it is true, that would be Android platform issue.

fernandojsg commented 6 years ago

@daoshengmu on desktop is working as expected so it seems a android only problem

daoshengmu commented 6 years ago

Please take a look at Oculus Go's available GL extension as below. We don't have 'EXT_shader_texture_lod' on this device. [MOZ_GL_DUMP_EXTS=true] The reason for GeckoView considers this extension is supported is because EXT_shader_texture_lod is treated to be enabled in GLESVersion::ES3 and GLESVersion::ES2 [2][3] and hard-code makes it. This should be specific happened on this device, we need give it a workaround in Gecko.

webgl   : InitExtensions:     GL_OES_EGL_image
webgl   : InitExtensions:     GL_OES_EGL_image_external
webgl   : InitExtensions:     GL_OES_EGL_sync
webgl   : InitExtensions:     GL_OES_vertex_half_float
webgl   : InitExtensions:     GL_OES_framebuffer_object
webgl   : InitExtensions:     GL_OES_rgb8_rgba8
webgl   : InitExtensions:     GL_OES_compressed_ETC1_RGB8_texture
webgl   : InitExtensions:     GL_AMD_compressed_ATC_texture
webgl   : InitExtensions:     GL_KHR_texture_compression_astc_ldr
webgl   : InitExtensions:     GL_KHR_texture_compression_astc_hdr
webgl   : InitExtensions:     GL_OES_texture_compression_astc
webgl   : InitExtensions:     GL_OES_texture_npot
webgl   : InitExtensions:     GL_EXT_texture_filter_anisotropic
webgl   : InitExtensions:     GL_EXT_texture_format_BGRA8888
webgl   : InitExtensions:     GL_OES_texture_3D
webgl   : InitExtensions:     GL_EXT_color_buffer_float
webgl   : InitExtensions:     GL_EXT_color_buffer_half_float
webgl   : InitExtensions:     GL_QCOM_alpha_test
webgl   : InitExtensions:     GL_OES_depth24
webgl   : InitExtensions:     GL_OES_packed_depth_stencil
webgl   : InitExtensions:     GL_OES_depth_texture
webgl   : InitExtensions:     GL_OES_depth_texture_cube_map
webgl   : InitExtensions:     GL_EXT_sRGB
webgl   : InitExtensions:     GL_OES_texture_float
webgl   : InitExtensions:     GL_OES_texture_float_linear
webgl   : InitExtensions:     GL_OES_texture_half_float
webgl   : InitExtensions:     GL_OES_texture_half_float_linear
webgl   : InitExtensions:     GL_EXT_texture_type_2_10_10_10_REV
webgl   : InitExtensions:     GL_EXT_texture_sRGB_decode
webgl   : InitExtensions:     GL_OES_element_index_uint
webgl   : InitExtensions:     GL_EXT_copy_image
webgl   : InitExtensions:     GL_EXT_geometry_shader
webgl   : InitExtensions:     GL_EXT_tessellation_shader
webgl   : InitExtensions:     GL_OES_texture_stencil8
webgl   : InitExtensions:     GL_EXT_shader_io_blocks
webgl   : InitExtensions:     GL_OES_shader_image_atomic
webgl   : InitExtensions:     GL_OES_sample_variables
webgl   : InitExtensions:     GL_EXT_texture_border_clamp
webgl   : InitExtensions:     GL_EXT_multisampled_render_to_texture
webgl   : InitExtensions:     GL_EXT_multisampled_render_to_texture2
webgl   : InitExtensions:     GL_OES_shader_multisample_interpolation
webgl   : InitExtensions:     GL_EXT_texture_cube_map_array
webgl   : InitExtensions:     GL_EXT_draw_buffers_indexed
webgl   : InitExtensions:     GL_EXT_gpu_shader5
webgl   : InitExtensions:     GL_EXT_robustness
webgl   : InitExtensions:     GL_EXT_texture_buffer
webgl   : InitExtensions:     GL_EXT_shader_framebuffer_fetch
webgl   : InitExtensions:     GL_ARM_shader_framebuffer_fetch_depth_stencil
webgl   : InitExtensions:     GL_OES_texture_storage_multisample_2d_array
webgl   : InitExtensions:     GL_OES_sample_shading
webgl   : InitExtensions:     GL_OES_get_program_binary
webgl   : InitExtensions:     GL_EXT_debug_label
webgl   : InitExtensions:     GL_KHR_blend_equation_advanced
webgl   : InitExtensions:     GL_KHR_blend_equation_advanced_coherent
webgl   : InitExtensions:     GL_QCOM_tiled_rendering
webgl   : InitExtensions:     GL_ANDROID_extension_pack_es31a
webgl   : InitExtensions:     GL_EXT_primitive_bounding_box
webgl   : InitExtensions:     GL_OES_standard_derivatives
webgl   : InitExtensions:     GL_OES_vertex_array_object
webgl   : InitExtensions:     GL_EXT_disjoint_timer_query
webgl   : InitExtensions:     GL_KHR_debug
webgl   : InitExtensions:     GL_EXT_YUV_target
webgl   : InitExtensions:     GL_EXT_sRGB_write_control
webgl   : InitExtensions:     GL_EXT_texture_norm16
webgl   : InitExtensions:     GL_EXT_discard_framebuffer
webgl   : InitExtensions:     GL_OES_surfaceless_context
webgl   : InitExtensions:     GL_OVR_multiview
webgl   : InitExtensions:     GL_OVR_multiview2
webgl   : InitExtensions:     GL_EXT_texture_sRGB_R8
webgl   : InitExtensions:     GL_KHR_no_error
webgl   : InitExtensions:     GL_EXT_debug_marker
webgl   : InitExtensions:     GL_OES_EGL_image_external_essl3
webgl   : InitExtensions:     GL_OVR_multiview_multisampled_render_to_texture
webgl   : InitExtensions:     GL_EXT_buffer_storage
webgl   : InitExtensions:     GL_EXT_external_buffer
webgl   : InitExtensions:     GL_EXT_blit_framebuffer_params
webgl   : InitExtensions:     GL_EXT_clip_cull_distance
webgl   : InitExtensions:     GL_EXT_protected_textures
webgl   : InitExtensions:     GL_EXT_shader_non_constant_global_initializers
webgl   : InitExtensions:     GL_QCOM_texture_foveated
webgl   : InitExtensions:     GL_QCOM_shader_framebuffer_fetch_noncoherent
webgl   : InitExtensions:     GL_EXT_memory_object
webgl   : InitExtensions:     GL_EXT_memory_object_fd
webgl   : InitExtensions:     GL_EXT_EGL_image_array
webgl   : InitExtensions:     GL_NV_shader_noperspective_interpolation
webgl   : InitExtensions:     GL_KHR_robust_buffer_access_behavior

[1] https://dxr.mozilla.org/mozilla-central/source/gfx/gl/GLContext.cpp#1632 [2] https://dxr.mozilla.org/mozilla-central/rev/c2e3be6a1dd352b969a45f0b85e87674e24ad284/gfx/gl/GLContextFeatures.cpp#859 [3] https://dxr.mozilla.org/mozilla-central/rev/c2e3be6a1dd352b969a45f0b85e87674e24ad284/gfx/gl/GLContextFeatures.cpp#580

fernandojsg commented 6 years ago

@daoshengmu that functionality is enabled by default on webgl2 contexts (glsl3) but I don't understand why is not checking it if in webgl1 is optional.

daoshengmu commented 6 years ago

@fernandojsg does the WebGL2 texlod() work properly on Oculus Go? I am going to give a workaround for Qualcomm 821 in WebGL 1.

daoshengmu commented 6 years ago

File a bug at https://bugzilla.mozilla.org/show_bug.cgi?id=1491221.

daoshengmu commented 6 years ago

File a bug at https://bugzilla.mozilla.org/show_bug.cgi?id=1491221.

I have confirmed https://threejs.org/examples/webgl_loader_gltf.html works properly after applying the patch from Bug 1491221.

daoshengmu commented 6 years ago

@fernandojsg I think it works now in FxR. Please try the latest build from https://tools.taskcluster.net/groups/AlAyg0f5R-af3kDaljQhzw/tasks/AlAyg0f5R-af3kDaljQhzw/runs/1/artifacts and help confirm.

Thanks!

larsbergstrom commented 6 years ago

Confirmed this is working now with the example @daoshengmu provided. Thanks!