We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.

Blender model and emission/glow material messed up in browser

Home Forums Graphics / Blender Blender model and emission/glow material messed up in browser

  • This topic has 10 replies, 3 voices, and was last updated 1 year ago by xeon.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #64029
    c4cc
    Participant

    In Blender Viewport

    In browser

    Why aren’t my Blender models showing up/reflected in the browser, as how they were showing in my Blender? How do I get my Blender models to show up in the browser, the exact way they were designed in Blender?

    Also, unlike Blender, with a resolution of its monitor screen’s, why is the resolution grainy in this browser (Firefox browser)? Any way to make browser resolution match with that of the Blender’s?

    #64030
    xeon
    Customer

    Ok…lots of questions rolled into one.

    In general…not everything you can do in Blender will work in V3D. In the case of “Bloom” you will have to turn that off in Blender, and then use the Bloom post-process effect puzzle in V3D.

    Without having your blend file I would suggest reviewing your shader nodes for compatibility with V3D. This link will help: https://www.soft8soft.com/docs/manual/en/blender/Shader-Nodes-Reference.html

    There are other settings in Blender, including color management that can affect the way EEVEE represents what you will see in V3D. However, EEVEE is only a close representation it is not exact, and the more complicated your shaders are the less likely EEVEE will give you a good representation of what it will look like in V3D. Emissive shaders are just one of those that you have to fine-tune bouncing back in forth between V3D and blender to get right.

    Regarding graininess in FireFox. I would take a look at your V3D export settings and see if you are using compression on textures or perhaps you need to add anisotropic filtering see this video https://youtu.be/symQy5gEHdY?t=685

    good luck

    Xeon
    Route 66 Digital
    Interactive Solutions - https://www.r66d.com
    Tutorials - https://www.xeons3dlab.com

    #64036
    c4cc
    Participant

    Informative useful tips, I’m looking into them. Thanks for these

    Regarding graininess in FireFox. I would take a look at your V3D export settings and see if you are using compression on textures or perhaps you need to add anisotropic filtering see this video https://youtu.be/symQy5gEHdY?t=685

    good luck

    I did attempt that anisotropic filtering as per that video, but unfortunately, I don’t see that option. How do I find or enable it? Thanks.

    Also, these are not textures, but materials. Will anisotropic filtering be applied to materials as well?

    • This reply was modified 1 year ago by c4cc.
    • This reply was modified 1 year ago by c4cc.
    #64039
    xeon
    Customer

    Perhaps, if you are willing you can share your blend file. Equally important can you show a screen shot of the issues you are having in firefox and do a side by side comparison to Chrome?

    With respect to the Ansiotropic Filtering, it only applies if you are using an image map. You would select the texture node and make the adjustments. Since you are using a basic material any irregularities in rendering are more than likely blender settings in general.

    Take a look at your Rendering Properties and evaluate the Color Management for your scene.
    Your display device will more than likely be sRGB but your view Transform may need to be tweaked to fit your needs. Most will find that setting the View Transform to sRGB as well will help a lot.

    You may find the that under Render Properties > Verge3d settings > the antialias may need adjustment for your scene. In most cases auto will work nicely but in some situations fine tuning is required.

    If you are using lights….try removing them from your scene and only lighting with and HDR environment map and see if you get a better result. If you do then put the lights back in if they are needed and adjust the Shadow filtering.

    Just some ideas since I cant see what you are really having an issue with.

    Xeon
    Route 66 Digital
    Interactive Solutions - https://www.r66d.com
    Tutorials - https://www.xeons3dlab.com

    #64043
    c4cc
    Participant

    Here is my blender file:
    (https://blend-exchange.com/b/gzWXP30A/)

    Edit:
    Also, here is the sneak peak in google chrome: https://ibb.co/4pGTqkk

    • This reply was modified 1 year ago by c4cc.
    • This reply was modified 1 year ago by c4cc.
    Attachments:
    You must be logged in to view attached files.
    #64121
    xeon
    Customer

    Hi c4cc,

    I have reviewed the blend file and there are a number of issues you may be encountering that are leading to some frustration.

    The first is the misunderstanding that Blenders EEVEE Viewport Shading will look identical in Verge3d. It will be close..but not exact. Where this is most evident is in emission shaders and emission settings. You will want to be sure to disable “Bloom” in blender. This is not supported in Verge3d. The next thing you are going to want to do is to replace the Principled BSDF with an Emission shader. You can use the color in your BSDF emission in the Emission shader with a value of 3. In Blender, your lightning will look yellow/orange but once you get it into V3D it will be okay once you setup bloom. Note: Bloom in V3D has to be set up in the puzzle editor. SneakPeak will not display bloom. If you look at your object in SneakPeak it will not appear to be emissive.

    Blender V3D settings – be sure that if you are using modifiers in your blender project that you check “bake modifiers”. Otherwise, those objects will be displayed in an unmodified shape.

    Modeling – Use of displace modifiers is fine as long as you control the normals in your geo. In your case the model is displaced significantly such that many faces are inverted and will not be visible in your scene.

    As you explore V3d..i would suggest you do not use Firefox…but use Chrome instead. Unless your specific application requires it. Firefox has such a low market share that web developers for the most part ignore it. See the following for reference: https://gs.statcounter.com/browser-market-share.

    Hope this helps.

    Attachments:
    You must be logged in to view attached files.

    Xeon
    Route 66 Digital
    Interactive Solutions - https://www.r66d.com
    Tutorials - https://www.xeons3dlab.com

    #64123
    kdv
    Participant

    Firefox has such a low market share that web developers for the most part ignore it

    And it doesn’t support “KHR_parallel_shader_compile” extension. It compiles shaders much slower, without the multi-thread support.

    Puzzles and JS. Fast and expensive.

    If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of meaning at all.

    #64134
    c4cc
    Participant

    Thanks for your tips, they all worked. While I agree with your recommendation about focusing on Google Chrome for Verge3d apps, I tested your tips on Firefox to see if the results was equal, and it sure is:

    https://i.ibb.co/6YkTBJ8/png-transparent-erza-scarlet-natsu-dragneel-wendy-marvell-gray-fullbuster-fairy-tail-fairy-tail-comp.jpg

    Edit: btw, what do you mean, “fixing the geo” in your screenshot?

    • This reply was modified 1 year ago by c4cc.
    • This reply was modified 1 year ago by c4cc.
    #64143
    xeon
    Customer

    In the screen shot you will notice red faces. These faces are marked red when their normals are pointing in a direction opposite the camera. Those faces do not render unless they are double side materials.

    Imagine you have a scene with a default plane. This flat surface has two sides. But only one will render by default. You can test this out by creating a simple V3D project with a plane object and rotating the plane. At some point, while rotating the camera around the plane the camera will find the back side and the plane will appear as if it disappeared. You can visually verify which sides of a surface the normals face in Blender by turning on your Viewport Overlays for “Face Orientation”. I believe the default coloring is red for the back and blue for the front”.

    In the screen shot I provided I have setup my preferences to always show faces with normals pointing away as red and normals that are facing to me to be default gray. So when I look at a model I can always tell if there are issues.

    In your case the model you created was made from plane objects and then displaced. The model. If I recall there was also some use of solidify but the display modifiers strenght was so large it cause the model to penetrate itself causing the inside of the model to be shown on the outside. In the screen shot I took your model and just moved some of the parts around to see just how many models were affected.

    Fixing the geo (short for geometry) is subjective based on your needs. However, if you don’t need the reversed faces, then why not delete the polys and improve performance? If performance is of no concern and it looks the way you want then there is no need to fix the geo. On the other hand, if this is going to be part of a larger scene then you will want go through the objects and make sure you either delete or flip faces so that they are visible in the V3d render. You can uses double sided materials but this will have a lot of inefficiency since your object would then be trying to render faces that are hidden. So the most efficient method would be to fix the geo.

    Method 1: hand flipping faces normals and deleting unwanted faces.
    Method 2: rebuilding or recreate the geo so it doesn’t create flipped normals.
    Method 3: double-sided render the material/faces
    Method 4: do nothing because the result is fine and there are no performance issues.

    Xeon
    Route 66 Digital
    Interactive Solutions - https://www.r66d.com
    Tutorials - https://www.xeons3dlab.com

    #64149
    c4cc
    Participant

    Thanks for your answer. Really informative and helpful. And btw, in your screenshot, how is it there is a whitish emission inside the square? Mine only has it yellow:
    png-transparent-erza-scarlet-natsu-dragneel-wendy-marvell-gray-fullbuster-fairy-tail-fairy-tail-comp

    How do you get the white emission within the yellow emission in your square? Thanks
    s0

    • This reply was modified 1 year ago by c4cc.
    • This reply was modified 1 year ago by c4cc.
    #64152
    xeon
    Customer

    Post-processing effects are heavily dependent on the users computer/gpu, monitor calibraion, color space, etc. With all that said, I am sure I have different settings that you do but you can create the same look on your system.

    1. be sure the square and the lightening object share the same material
    2.validate your monitor is using an SRGB color space. You will find these in your monitor calibration and settings.
    3. make sure blender color management is set sRGB.
    then the numbers I provided for the material and puzzle should yield similar results.

    However, if you rather skip that, you can increase your emission value in the shader and tweak the bloom settings in the puzzles and I am sure you will reach similar results.

    Xeon
    Route 66 Digital
    Interactive Solutions - https://www.r66d.com
    Tutorials - https://www.xeons3dlab.com

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.