Home › Forums › Graphics / Blender › Eevee WYSIWYG
- This topic has 19 replies, 4 voices, and was last updated 2 years, 7 months ago by xeon.
-
AuthorPosts
-
2022-03-20 at 1:54 am #50394x9studioParticipant
What is the secret to get Verge3D looks like Eevee? I followed the Swiss Army Knife tutorial with my own test project. The result is very different. It’s as if they are not using the same HDR map, but they are.
Attachments:
You must be logged in to view attached files.2022-03-20 at 2:28 pm #50416Mikhail LuzyaninStaffVerge3D uses HDR that connected to Background node, may be you compare it not in render mode but in preview?
Co-founder and lead graphics specialist at Soft8Soft.
2022-03-20 at 5:59 pm #50417x9studioParticipantI made that mistake the last time when I posted the question here. So I made sure that it is in render mode this time.
In my comparison rendering screenshot (the 1st attachment image), one on the left is Verge3D web browser and Eevee rendering on the right. They look so different.
The scene has no lighting object, it only uses HDR map. Verge3D web browser result should look very close to Eevee rendering, correct? Are there other settings in Blender or Verge3D that caused this? Thanks
2022-03-21 at 6:26 am #50435hulpesergiuParticipantHi x9studio.
I am very confused about your question.
The image on the left looks 90% the same as the one on the right to me.
The only difference between them is some contrast and color correction (the eevee one looks a bit greenish)
I am not sure what you are trying to do.
Also from your material screenshot, I am noticing you are baking the material, maybe you can tell us more details about that?
2022-03-21 at 8:19 am #50438Mikhail LuzyaninStaffCan you share the example file with textures?
Co-founder and lead graphics specialist at Soft8Soft.
2022-03-21 at 6:15 pm #50461x9studioParticipantHi x9studio.
I am very confused about your question.
The image on the left looks 90% the same as the one on the right to me.
The only difference between them is some contrast and color correction (the eevee one looks a bit greenish)
I am not sure what you are trying to do.
Also from your material screenshot, I am noticing you are baking the material, maybe you can tell us more details about that?
From the PBR sample project, the results look identical in Verge3D and Eevee. That’s the way it should be for PBR materials. For some reasons my test project is not producing the same result.
It’s simple procedural materials baked into PRB materials using SimpleBake addon.
2022-03-21 at 6:19 pm #50462x9studioParticipantCan you share the example file with textures?
I can share it privately. I’m not a paid customer yet as I’m still learning and testing Verge3D. But I have to say that it’s very impressive work you have done.
2022-03-21 at 7:07 pm #50463xeonCustomerJust to throw a wrinkle into this conversation.
You will want to be sure Blenders color space and your monitors color space are set to sRGB if you want the colors to be a similar as possible between EEVEE and Verge3d. Browsers use sRGB so if you are using a different color profile in Blender you will want to switch. Also be sure your monitor(s) are set to sRGB as well.
Note, the above will get you close…very close and typically good enough. But if you are picky and want perfection your only real choice is to iterate/re-adjustment of your materials until you get the result you want. When we have to hit specific Pantone color, we set up a color calibrator over the browser and adjust until we get the correct output. It might take a few dozen tries before we get it right. The bad thing…. most viewers just won’t care as close enough is good enough as the vast majority of people don’t calibrate their monitors or have light-controlled environments where they use their computer.
Xeon
Route 66 Digital
Interactive Solutions - https://www.r66d.com
Tutorials - https://www.xeons3dlab.com2022-03-22 at 8:04 am #50484Mikhail LuzyaninStaffI can share it privately. I’m not a paid customer yet as I’m still learning and testing Verge3D. But I have to say that it’s very impressive work you have done.
Sorry, but private support available only on enterprise license users. You can attach a simplified file with simple cubes and cylinders that reproduce the issue.
Co-founder and lead graphics specialist at Soft8Soft.
2022-03-22 at 3:53 pm #50516x9studioParticipantJust to throw a wrinkle into this conversation.
You will want to be sure Blenders color space and your monitors color space are set to sRGB if you want the colors to be a similar as possible between EEVEE and Verge3d. Browsers use sRGB so if you are using a different color profile in Blender you will want to switch. Also be sure your monitor(s) are set to sRGB as well.
Note, the above will get you close…very close and typically good enough. But if you are picky and want perfection your only real choice is to iterate/re-adjustment of your materials until you get the result you want. When we have to hit specific Pantone color, we set up a color calibrator over the browser and adjust until we get the correct output. It might take a few dozen tries before we get it right. The bad thing…. most viewers just won’t care as close enough is good enough as the vast majority of people don’t calibrate their monitors or have light-controlled environments where they use their computer.
Thank you for the inputs. I’m not going for Pantone accuracy. Something went wrong in my test project as PBR sample project in Verge3D shows it is possible to get the WYSIWYG in Eevee to the browser. I just need to figure out what went wrong in my test.
2022-03-22 at 4:00 pm #50517x9studioParticipantSorry, but private support available only on enterprise license users. You can attach a simplified file with simple cubes and cylinders that reproduce the issue.
No problems, I understand. Let me play with it some more 1st, the test project was built from an existing Blend file. I’ll try rebuild the project with a blank Blend file method from your tutorial.
2022-03-24 at 9:32 pm #50601xeonCustomerI personally don’t think EEVEE ever looks close to what you see on Verge3d. Its close but not close enough…. its an iterative process to get the colors right….hope that changes one day…but I have tried on different systems, OS, Verge (blender, max, maya) its always the same…. it’s close…but you still have to tweak and iterate to get it right.
Xeon
Route 66 Digital
Interactive Solutions - https://www.r66d.com
Tutorials - https://www.xeons3dlab.com2022-03-30 at 5:42 pm #50720x9studioParticipantAre you using baked PBR textures or Blender native nodes without baking them into PBR textures?
If I can get the result like this, it’s good enough for me.
Attachments:
You must be logged in to view attached files.2022-03-31 at 9:46 pm #50765x9studioParticipantI can’t share the Blend file that was posted at the start of this thread. But I’ve created a test project that reproduces similar result where rendered Eevee and Verge3D aren’t quite the same.
My goal is to establish a WYSIWYG workflow. The sample project named Pbr in Verge3D App Manager shows WYSIWYG is possible. But I can’t figure out why I’m not able to produce similar result.
This is my workflow so far:
1. Model, texture and HDR lightmap in a Blend file that I called original project file.
2. Baked PBR textures from the original project file.
3. Create a new Verge3D project.
4. Open Verge3D Blend project from project manager and copy PBR textures and HDR map into Verge3D project folder.
5. Append collection from original project file into Verge3D Blend file and setup materials and HDR map.
6. Click on Sneak Peek button to see it in Verge3D web browser.At step 5, the result in the original project file and Verge3D Blend file are very similar. But at closer loo, Verge3D Blend file has blown out highlight for some reasons.
At step 6, Verge3D view is quite different from Eevee in Verge3D Blend file.
In the Verge3D Blend file, I use channel packing texture but I had to use sRGB color space in image texture node to get it look similar to original project file.
I can’t figure out what settings am I missing, I’m using Blender 3.1.
Here is the link for Verge3D project folder
https://www.dropbox.com/sh/h66jt2mie6ek36c/AAA5GXzUWtIcrhrpnqvFM2lJa?dl=0Link for original project file https://www.dropbox.com/s/r0dfukwd2j60sd4/Verge3D%20material%20test%20Original%20Project.blend?dl=0
Thanks.
Attachments:
You must be logged in to view attached files.2022-04-01 at 12:58 am #50768xeonCustomerSo….here is my basic workflow. Not saying its right..just what produces the most accurate results.
So to start with I work on a Mac and then test using Browserstack and actual devices to see where my color is at.
Workflow:
Create the blend using Cycles and with color management set to Filmic. I use high res models for this step. Use as many lights as needed to achieve desired look and feel. I call this my “base model”.
Next, bake out all textures, procedurals, AO, Shadows, Normals, etc.
everything that is possible including light probes.Next take my “base model” and dump all lights, and replace all textures with atlas maps generated from the baking step. Turn off all subdivisions and poly reduce or swap to low res poly models as needed.
Switch the Render to EEVEE and switch Color Management to Standard.
– I will skip the other details relating to transparency, emissive and translucent materials since your scene does not have these issues.
– Export the file to Verge3d (gltf).
At this point you have a scene in EEVEE that has the detail of Cycles and will look very close to what you can see in V3D via Application Manager / Chrome.
Note: due to a browser playing back in sRGB, the hot spots will get crunched closer to white and darks will get compressed closer to black.
If you monitor is calibrated sRGB then the output from Verge3D when viewed in the AppManager/browser should resemble what you will get. With some exceptions. Each browser, especialy iOS devices are having issues since 15.4 and the colors can be off a bit.
However since your image is mostly black and white with some gray…you are getting what seems to be color space issue.
Stainless and carbon fiber are tough to do.
Xeon
Route 66 Digital
Interactive Solutions - https://www.r66d.com
Tutorials - https://www.xeons3dlab.com -
AuthorPosts
- You must be logged in to reply to this topic.