Gems rendering service

Hi, all !

I would like to show you one of my latest projects - Gems rendering service.
Gems designes fetched from Facetdiagrams, shader is based on N8python’s code.

4 Likes

Good stuff, works well on my macbook in Chrome.

I’d suggest having a look at MeshRefractionMaterial from Drei (live example here ) - it looks better.

Another suggestion would be to not use a dark background and instead use one with lighter colors (like in the above example), diamonds are marketed as a luxury product so your visuals should reflect that.

2 Likes

Thanks for acclaiming and report, before starting this project I’ve seen Drei’s solution, but rejected it as I am prefer pure “vanilla” JS, don’t want to use Fiber, although familar with React.

Some fixes for shader I took from Drei, but agree that original Drei’s material maybe works better. Also thanks for suggestions about environment, I will take it into account.

2 Likes

Also enable antialias=true on your renderer constructor! (and if its already enabled, check that your renderer has a proper resize handler)
Perhaps add an HDRI like Studio Small 08 HDRI • Poly Haven to make the reflections even more organic.

cool project! :slight_smile:

1 Like

Thanks a lot for AA advice, now I am using EffectComposer with FXAAShader, which is disabled by default for thows, which has a slow CPU. It can be enabled in the “Control” menu and maybe turning it on by default will be a good idea.

Oooo ! Studio Small 08 HDRI • Poly Haven is a royal gift - I was looking for something like this, having a similar thing for VRay. Good environment is a half of a successful project - many thanks !

1 Like

Trying to improve rendering quality I am playing with postprocessing now and found that SMAA works fine, but colors are dramatically changing when switching to EffectComposer.

After adding gamma correction this way:

gammaCorrectionPass = new ShaderPass(GammaCorrectionShader);
composer.addPass(gammaCorrectionPass);

they became completely burned out. Searching forum for a solution confused me even more, because of different approaches in different revisions and I am a little bit frustrated about the actual gamma correction method.

Please, give me good suggestions about keeping colors in order :).

Do you have a screenshot of how the colors changed with/without postproc?

It’s hard to speculate about where the issue could lie without seeing the renderer/postproc setup code.

Also I think you can get regular hardware antialising now even w postproc pass… after you create effectscomposer, you can set .samples on its rendertargets and you may be able to trade some speed for better antialising/filtering. I don’t recall if you can just set .samples directly on them or if you have to recreate them with the correct “samples” parameter, like 8 or something…
Something to experiment with… though not a dealbreaker.

I think getting an environment map in there will be more bang for your buck, and make the aliasing less prominent since there will be more detail to the texturing.

Do you have a screenshot of how the colors changed with/without postproc?

Thanks for an answer, “Settings/Postprocess *” switches this stuff.
I will play with sampling, but gamma troubles me much more, suppose that AA is acceptable now.

I think getting an environment map in there will be more bang for your buck, and make the aliasing less prominent since there will be more detail to the texturing.

Already done and I suppose it looks “brilliant”: https://gemview.yesbird.online
thanks to your suggestions.

Looks cool with the skybox…

I’m not sure if its being used as an environment map for the shading tho?

How are you setting that up?

Here’s roughly how I setup envmaps usually:


import {RGBELoader} from 'three/addons/loaders/RGBELoader.js'


.....

let config = {
environmentUrl: " ... YourEnvronementmap.hdr"
}

    this.loadEnvironment = async () => {
        var pmremGenerator = new THREE.PMREMGenerator(renderer);
        pmremGenerator.compileEquirectangularShader();
        var textureLoader = new THREE.TextureLoader();
        let txname = config.environmentUrl;

        let ext = txname.slice(txname.lastIndexOf('.')).toLowerCase();
        let loader = textureLoader;
        if(ext == '.hdr')
            loader = new RGBELoader();
        let texture = await textureLoader.loadAsync(txname)
        texture.colorSpace = THREE.SRGBColorSpace;
        var equirect = pmremGenerator.fromEquirectangular(texture).texture;
        scene.environment = equirect;
        scene.background = equirect;
        scene.backgroundRotation = scene.environmentRotation = config.environmentRotation || new THREE.Euler(...config.environmentRotation);
        pmremGenerator.dispose();
    }
    this.loadEnvironment()

I think with this setup, by setting both scene.background and scene.environement, you get the skybox effect for free, (no need to make a box for it) and you get image based reflections

1 Like

Thanks for suggestion, I have seen this approach in examples, but shader needs box environment to be passed in (makeGem()), so I am do it the following way:

  // Environment
  let envPath = "./data/textures/env" + controls[0].env + "/";
  const env = new THREE.CubeTextureLoader().load([
      envPath + "px.png",
      envPath + "nx.png",
      envPath + "py.png",
      envPath + "ny.png",
      envPath + "pz.png",
      envPath + "nz.png",
  ]);
  env.colorSpace = THREE.SRGBColorSpace;
  scene.background = env;
  scene.environment = env;

  let model = (await AsyncLoader.loadOBJAsync(path)).children[0];
  let gemGeo = model.geometry;
  gemGeo.applyMatrix4(new THREE.Matrix4().makeScale(-0.1, 0.1, 0.1)); // Flip normals with scale to match environment
  gemGeo.computeVertexNormals();
  const res = new THREE.Vector2(clientWidth, clientHeight);
  gem = makeGem(scene, env, camera, res, gemGeo);

  gem.rotation.x = -Math.PI/2;
  scene.add(gem);

after using this fantastic converter HDRI to CubeMap.

Thanks for example - scene.backgroundRotation will help me to setup environment better.
Other suggestions about rendering improvement are highly appreciated !

are you using MeshPhysicalMaterial or StandardMaterial on the gems? or is it a custom shader…

This is a custom shader based on this code: GitHub - N8python/diamonds and slightly modified to be more like MeshRefractionMaterial - Drei.

oh ok. then it is handling the reflection and refraction. :slight_smile: nvm then!

1 Like

GemView now completed and contains all 2265 gem designs available for free at Facetdiagrams.

It supports geometry-only exports to OBJ and POV formats, POV-Ray scene includes spectral rendering features from Povray gems rendering extention.

I will be happy to get suggestions and any kind of criticism from you.

2 Likes

Wow looking good. It came together real nice!

1 Like

Thanks for kind words, but I guess that there is a space for improvement, at least scene loading without “back no-material gost” and maybe fixing some browser-dependent issues.

Yeah. Normal pains for any deployed threejs app. :slight_smile: One trick is to turn down the scene lights until all the loading callbacks have finished, and then ramp them back up.
r.e. browser dependence… yeah. that’s always a nightmare.

1 Like

I guess the best solution to get rid of “ghosts” is to stop rendering while loading resources as described here: Model is black while the texture is loading.