Search Unity

Question [Please help me!!] I'm looking for a solution to the terrible problem about WebGL2 Linear build.

Discussion in 'Web' started by SanghoonLim, Aug 18, 2022.

  1. SanghoonLim

    SanghoonLim

    Joined:
    May 17, 2022
    Posts:
    14
    Hello, I am a Korean who is working on building a virtual exhibition hall dedicated to the web.

    First, I will write a question in Korean and then translate it into English. I may translate some parts myself, but I inform you that most of them use a translation program called 'Papago'.

    I started studying UNI.T for the first time this year, and I want to make a web exhibition using UNI. My company instructed me to study UNI.T in order to change the program I use to UNI.T.

    Until now, when I created an exhibition hall using Sketchup and Shapespark and uploaded it to the web, other web developers have added functions such as UI to make the final result, and I'm working on changing the program to Unity instead of Shapespark

    However, I've been struggling with building and distributing using Web2 for over a month, and it's hard to find the right materials.

    So I ask the Unity community for help.

    Masters, please help me.ㅠㅠㅠ

    (I can't send the work file to anyone without permission, and the capacity is large, so I sent it to only a few people by e-mail. However, I would like to share a video of my build process and get an answer.)

    The channel below was intended to upload a video for questioning with my company account Google ID, and it was decided that it would be difficult to show it to anyone, not personal work, so it was partially released. Therefore, you can only enter this link.



    Although the video is in Korean, there is no sound, and there are no English subtitles, I think you can understand because the Unity version I use is English and shows the process of working.


    To begin with, I have to make high-quality Linear graphics dedicated to the web using WebGL2, and I face two major problems.


    First, if I build and run, the result will be black. It's not just dark, it's just that the screen doesn't have the necessary light. This is the most important issue. The results are completely different from the work screen and Game View.

    Editor



    Result



    The build process was all slowly captured in the image.

    I baked hard to bake all the light maps, but I even used Photoshop to correct the awkward parts, and the result of working hard, thinking, "If I do this, it won't come out dark in the WebGL2 results, right?" comes out completely black.

    This is the most important issue.

    In fact, the UI itself is originally made by web developers, not me, but I was researching a function to replace it in case the method they use doesn't work in Unity.

    (Now I'm the only one who's studying Unity, and I thought I could just make 3D, build it, show my work, and pass it on. I thought it would be easy to build and deploy.)

    By the way, I can't show the screen to others at all.

    If you look at it, the lighting and reflection quality is much better than WebGL1.0, but basically, I've worked hard on Sketchup and there are few materials that have made the reflection more noticeable in Unity...

    I don't think it's a matter of material considering that the frames are coming out well.

    I don't know what the problem is. I don't know the cause.

    Originally, Shapespark, which I used to use for rendering and web uploads, was easy to upload, but rendering was quite inefficient, so I was told to study Unity and even bought a book to produce results.

    But "Unity" has the best efficiency, but it's too hard to upload it on the web.

    I will share the works with the Shapespark homepage to compare them with my Unity work now.

    Shapespark: https://www.shapespark.com/

    Shapespark Work(Same Object Test Version):

    https://zipida.shapespark.com/olida_gallery_new5_sunchange1_20220325_10_11/

    Shapespark finished work (I designed by Sketchup, and rended and upload to web by Shapespark, and Imade bundle file of that, and gave that to Web Developers, then they added some funcktions like UI like popup, button, etc...):

    https://www.rittal-exhibition.co.kr/



    navigator.mediaDevices support available

    WebGLTest01.framework.js:3 [UnityMemory] Configuration Parameters - Can be set up in boot.config

    WebGLTest01.framework.js:3 "memorysetup-temp-allocator-size-nav-mesh-worker=65536"

    WebGLTest01.framework.js:3 "memorysetup-temp-allocator-size-audio-worker=65536"

    WebGLTest01.framework.js:3 "memorysetup-temp-allocator-size-background-worker=32768"

    WebGLTest01.framework.js:3 "memorysetup-bucket-allocator-granularity=16"

    WebGLTest01.framework.js:3 "memorysetup-bucket-allocator-bucket-count=8"

    WebGLTest01.framework.js:3 "memorysetup-bucket-allocator-block-size=4194304"

    WebGLTest01.framework.js:3 "memorysetup-bucket-allocator-block-count=1"

    WebGLTest01.framework.js:3 "memorysetup-main-allocator-block-size=16777216"

    WebGLTest01.framework.js:3 "memorysetup-thread-allocator-block-size=16777216"

    WebGLTest01.framework.js:3 "memorysetup-gfx-main-allocator-block-size=16777216"

    WebGLTest01.framework.js:3 "memorysetup-gfx-thread-allocator-block-size=16777216"

    WebGLTest01.framework.js:3 "memorysetup-cache-allocator-block-size=4194304"

    WebGLTest01.framework.js:3 "memorysetup-typetree-allocator-block-size=2097152"

    WebGLTest01.framework.js:3 "memorysetup-profiler-bucket-allocator-granularity=16"

    WebGLTest01.framework.js:3 "memorysetup-profiler-bucket-allocator-bucket-count=8"

    WebGLTest01.framework.js:3 "memorysetup-profiler-bucket-allocator-block-size=4194304"

    WebGLTest01.framework.js:3 "memorysetup-profiler-bucket-allocator-block-count=1"

    WebGLTest01.framework.js:3 "memorysetup-profiler-allocator-block-size=16777216"

    WebGLTest01.framework.js:3 "memorysetup-profiler-editor-allocator-block-size=1048576"

    WebGLTest01.framework.js:3 "memorysetup-temp-allocator-size-main=4194304"

    WebGLTest01.framework.js:3 "memorysetup-job-temp-allocator-block-size=2097152"

    WebGLTest01.framework.js:3 "memorysetup-job-temp-allocator-block-size-background=1048576"

    WebGLTest01.framework.js:3 "memorysetup-job-temp-allocator-reduction-small-platforms=262144"

    WebGLTest01.framework.js:3 Loading player data from data.unity3d

    WebGLTest01.framework.js:3 Initialize engine version: 2021.3.6f1 (7da38d85baf6)

    WebGLTest01.framework.js:3 [Subsystems] Discovering subsystems at path UnitySubsystems

    WebGLTest01.loader.js:1 Creating WebGL 2.0 context.

    WebGLTest01.framework.js:3 Renderer: WebKit WebGL

    WebGLTest01.framework.js:3 Vendor: WebKit

    WebGLTest01.framework.js:3 Version: OpenGL ES 3.0 (WebGL 2.0 (OpenGL ES 3.0 Chromium))

    WebGLTest01.framework.js:3 GLES: 3

    WebGLTest01.framework.js:3 EXT_color_buffer_float EXT_color_buffer_half_float EXT_disjoint_timer_query_webgl2 EXT_float_blend EXT_texture_compression_bptc EXT_texture_compression_rgtc EXT_texture_filter_anisotropic EXT_texture_norm16 KHR_parallel_shader_compile OES_draw_buffers_indexed OES_texture_float_linear WEBGL_compressed_texture_s3tc WEBGL_compressed_texture_s3tc_srgb WEBGL_debug_renderer_info WEBGL_debug_shaders WEBGL_draw_instanced_base_vertex_base_instance WEBGL_lose_context WEBGL_multi_draw WEBGL_multi_draw_instanced_base_vertex_base_instance WEBGL_video_texture WEBGL_webcodecs_video_frame OVR_multiview2 GL_EXT_color_buffer_float GL_EXT_color_buffer_half_float GL_EXT_disjoint_timer_query_webgl2 GL_EXT_float_blend GL_EXT_texture_compression_bptc GL_EXT_texture_compression_rgtc GL_EXT_texture_filter_anisotropic GL_EXT_texture_norm16 GL_KHR_parallel_shader_compile GL_OES_draw_buffers_indexed GL_OES_texture_float_linear GL_WEBGL_compressed_texture_s3tc GL_WEBGL_compressed_texture_s3tc_srgb GL_WEBGL_debug_renderer_info GL_WEBGL_

    WebGLTest01.framework.js:3 debug_shaders GL_WEBGL_draw_instanced_base_vertex_base_instance GL_WEBGL_lose_context GL_WEBGL_multi_draw GL_WEBGL_multi_draw_instanced_base_vertex_base_instance GL_WEBGL_video_texture GL_WEBGL_webcodecs_video_frame GL_OVR_multiview2

    WebGLTest01.framework.js:3 OPENGL LOG: Creating OpenGL ES 3.0 graphics device ; Context level ; Context handle 1

    179The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page.

    WebGLTest01.framework.js:3 Input Manager initialize...

    WebGLTest01.framework.js:3 ERROR: Shader

    WebGLTest01.framework.js:3 Hidden/PostProcessing/Debug/Histogram shader is not supported on this GPU (none of subshaders/fallbacks are suitable)

    WebGLTest01.framework.js:3 ERROR: Shader

    WebGLTest01.framework.js:3 Hidden/PostProcessing/MultiScaleVO shader is not supported on this GPU (none of subshaders/fallbacks are suitable)

    WebGLTest01.framework.js:3 ERROR: Shader

    WebGLTest01.framework.js:3 Hidden/PostProcessing/Debug/Waveform shader is not supported on this GPU (none of subshaders/fallbacks are suitable)

    WebGLTest01.framework.js:3 ERROR: Shader

    WebGLTest01.framework.js:3 Hidden/PostProcessing/Debug/Vectorscope shader is not supported on this GPU (none of subshaders/fallbacks are suitable)

    WebGLTest01.framework.js:3 ERROR: Shader

    WebGLTest01.framework.js:3 Hidden/PostProcessing/Debug/LightMeter shader is not supported on this GPU (none of subshaders/fallbacks are suitable)

    WebGLTest01.framework.js:3 ERROR: Shader

    WebGLTest01.framework.js:3 Hidden/PostProcessing/ScreenSpaceReflections shader is not supported on this GPU (none of subshaders/fallbacks are suitable)

    WebGLTest01.framework.js:3 UnloadTime: 0.400001 ms

    WebGLTest01.framework.js:3 Camera registered: PlayerFollowCam (Cinemachine.CinemachineVirtualCamera)

    WebGLTest01.framework.js:3 Camera registered: CM vcam Frame CloseUp Camera (Cinemachine.CinemachineVirtualCamera)

    WebGLTest01.framework.js:3 PlayerFollowCam

    WebGLTest01.framework.js:3 CM vcam Frame CloseUp Camera

    WebGLTest01.framework.js:3 CM vcam Frame CloseUp Camera

    WebGLTest01.loader.js:1 warning: 2 FS.syncfs operations in flight at once, probably just doing extra work

    printErr @ WebGLTest01.loader.js:1

    syncfs @ WebGLTest01.framework.js:3

    sync @ WebGLTest01.framework.js:3

    (anonymous) @ WebGLTest01.framework.js:3

    setInterval (async)

    setInterval @ WebGLTest01.loader.js:1

    _JS_FileSystem_Initialize @ WebGLTest01.framework.js:3

    $hi @ WebGLTest01.wasm:0xcb7350

    Module._main @ WebGLTest01.framework.js:3

    callMain @ WebGLTest01.framework.js:3

    doRun @ WebGLTest01.framework.js:3

    run @ WebGLTest01.framework.js:3

    runCaller @ WebGLTest01.framework.js:3

    removeRunDependency @ WebGLTest01.framework.js:3

    (anonymous) @ WebGLTest01.loader.js:1

    WebGLTest01.loader.js:1 [UnityCache] 'http://localhost:50986/Build/WebGLTest01.data' successfully downloaded and stored in the indexedDB cache

    256[.WebGL-00006218040D6900] GL_INVALID_OPERATION: Active draw buffers with missing fragment shader outputs.

    localhost/:1 WebGL: too many errors, no more errors will be reported to the console for this context.



    Please help me.

    I want to succeed just to the level of quality that I worked on, and to the extent that I can just walk around and watch.

    With Unity WebGL 2.0.