How to import models with advanced refraction?

Taras · September 21, 2022, 1:24pm

Hi guys,

Recently there was a release of glTF Viewer 2.0 and it supports advanced refraction which is definitely cool.

But there’s an issue.
When I export my model in .fbx format, the advanced refraction doesn’t work neither in the editor nor in the viewer.
When I export my model in glTF 2.0 (.glb/.gltf) format, I can view its advanced refraction in the viewer, but I can’t place the model on the scene in the editor.

Can I somehow turn on advanced refraction on the model on the scene to use it in the game?

mvaligursky · September 21, 2022, 1:33pm

At the moment, the engine side refraction feature has been released, and it’s available in the engine / editor projects, where appropriate material properties are set up using scripts.

Soon, we should be releasing those material properties exposed in the material inspector in the Editor. At that point, you should be able to set those from the inspector, and see the effect in the editor / launched project.

But as I said, even if you do not see the effect in the Editor yet, you can enable those using script on the material, and they would work in the game.

Note that additionally, on top of material properties, you need to enable this as well, so that the scene buffer is captured to be used by the refraction shader:

camera.requestSceneColorMap(true);

Taras · September 21, 2022, 1:52pm

Hi Martin,

Sorry, but how exactly to enable those properties via script?

Here is the link to the test project: PlayCanvas | HTML5 Game Engine

mvaligursky · September 21, 2022, 2:16pm

You mostly likely are after the KHR_materials_volume - see details here

github.com

KhronosGroup/glTF/blob/main/extensions/2.0/Khronos/KHR_materials_volume/README.md

<!--
Copyright 2018-2021 The Khronos Group Inc.
SPDX-License-Identifier: LicenseRef-KhronosSpecCopyright
-->

# KHR_materials_volume

## Contributors

* Tobias Haeussler, Dassault Systemes [@proog128](https://github.com/proog128)
* Bastian Sdorra, Dassault Systemes [@bsdorra](https://github.com/bsdorra)
* Mike Bond, Adobe, [@miibond](https://github.com/MiiBond)
* Emmett Lalish, Google [@elalish](https://github.com/elalish)
* Don McCurdy, Google [@donrmccurdy](https://twitter.com/donrmccurdy)
* Norbert Nopper, UX3D [@UX3DGpuSoftware](https://twitter.com/UX3DGpuSoftware)
* Richard Sahlin, IKEA [@rsahlin](https://github.com/rsahlin)
* Eric Chadwick, Wayfair [echadwick-wayfair](https://github.com/echadwick-wayfair)
* Ben Houston, ThreeKit [@bhouston](https://github.com/bhouston)
* Gary Hsu, Microsoft [@bghgary](https://twitter.com/bghgary)
* Sebastien Vandenberghe, Microsoft [@sebavanjs](https://twitter.com/sebavanjs)

This file has been truncated. show original

and so the parameters on material would be these

github.com

playcanvas/engine/blob/efe5c2b0806f7b03df40e31db44e0b4b124263f7/src/resources/parser/glb-parser.js#L1222-L1239

      
        
            const extensionVolume = function (data, material, textures) {
                material.blendType = BLEND_NORMAL;
                material.useDynamicRefraction = true;
                if (data.hasOwnProperty('thicknessFactor')) {
                    material.thickness = data.thicknessFactor;
                }
                if (data.hasOwnProperty('thicknessTexture')) {
                    material.thicknessMap = textures[data.thicknessTexture.index];
                    extractTextureTransform(data.thicknessTexture, material, ['thickness']);
                }
                if (data.hasOwnProperty('attenuationDistance')) {
                    material.attenuationDistance = data.attenuationDistance;
                }
                if (data.hasOwnProperty('attenuationColor')) {
                    const color = data.attenuationColor;
                    material.attenuation.set(Math.pow(color[0], 1 / 2.2), Math.pow(color[1], 1 / 2.2), Math.pow(color[2], 1 / 2.2));
                }
            };

especially the

material.blendType = BLEND_NORMAL;
material.useDynamicRefraction = true;

@Gustav_Sterbrant would know the details if you dont get this working.

Gustav_Sterbrant · September 21, 2022, 2:44pm

@Taras Hello!

What @mvaligursky says is correct, enabling the useDynamicRefraction on the material will trigger the shader to compile with dynamic refractions, meaning the shader will use the scene as refraction data. It also does a bunch of other things, such as attenuation, so be sure to provide the material with the appropriate attenuation and thickness textures/parameters if you have them.

Please don’t hesitate to come back with any questions regarding how to use this material. It’s not been exposed in the editor yet so it can be a bit tricky to play around with.

Thanks,
Gustav

Igor · September 26, 2022, 1:23pm

I wonder is there any way to increase scene colormap resolution? To make the refracted image sharper/less pixelated? And what is its default resolution?