pissang / clay-viewer

3D model viewer with high quality rendering and glTF2.0/GLB export
https://pissang.github.io/clay-viewer/editor/
BSD 3-Clause "New" or "Revised" License
767 stars 97 forks source link

求助 #97

Closed dragonpoint closed 5 years ago

dragonpoint commented 5 years ago

你好,我发了一封求助信到你的baidu信箱,一直没有回复,不得不在这里发起求助,见谅

我从sketchfab下载了一个glTF的模型,自己用threejs加载,模型非常的黑,整个色调与sketchfab网站的完全不同

我发现你的clay-viewer中有关于Environment HDR texture的选择,并且默认使用pisa这种模式的时候,效果与sketchfab上的效果非常的接近,调整Diffuse/Specular Intensity 的时候也比较影响效果

还有就是如果把clay-viewer中的post effect disable掉,效果也会差很多,跟我的自己加载的差不多

threejs的example中也有简单的例子使用hdrtexture,但是我看不太懂,也不知道如何应用到我的模型环境中

我在另一个地方提出了相同的问题,那里详细的截图信息 https://discourse.threejs.org/t/help-about-model-effect-download-from-sketchfab-hdr-shader-light/5399

howyhuang commented 5 years ago

你好有解决gltf这个在threejs下面的问题吗? @dragonpoint

dragonpoint commented 5 years ago

问题没有解决,pissang没有回复我的任何信息,我也没有找到根本的原因 我只能猜测这个是某种显示参数问题,或者是某个shader/postprocess的问题

pissang commented 5 years ago

@dragonpoint 抱歉之前没有留意你的问题,看你帖子的贴图,应该是没用到 hdr 的环境光贴图,我看了下 three.js 的例子,https://threejs.org/examples/#webgl_materials_envmaps_hdr 这个可以作为参考,其中

                var hdrUrls = [ 'px.hdr', 'nx.hdr', 'py.hdr', 'ny.hdr', 'pz.hdr', 'nz.hdr' ];
                hdrCubeMap = new HDRCubeTextureLoader()
                    .setPath( './textures/cube/pisaHDR/' )
                    .setType( THREE.UnsignedByteType )
                    .load( hdrUrls, function () {
                        var pmremGenerator = new PMREMGenerator( hdrCubeMap );
                        pmremGenerator.update( renderer );
                        var pmremCubeUVPacker = new PMREMCubeUVPacker( pmremGenerator.cubeLods );
                        pmremCubeUVPacker.update( renderer );
                        hdrCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
                        hdrCubeMap.magFilter = THREE.LinearFilter;
                        hdrCubeMap.needsUpdate = true;
                        pmremGenerator.dispose();
                        pmremCubeUVPacker.dispose();
                    } );

这段是关键代码,大概做的事情是加载 hdr 格式的 cubemap,用 PMREMGenerator prefilter 之后作为 envMap 设置到每个材质上,clay viewer 也是类似的思路。

dragonpoint commented 5 years ago

非常感谢你的回复