How can I enhance the sharpness of shadows on MeshLambertMaterial in Three.js?

Question

How can I enhance the sharpness of shadows on MeshLambertMaterial in Three.js?

I am currently working on a project involving the creation of 3D images of the moon at different phases, incorporating libration effects. Here is a snapshot of my first quarter moon image:

https://i.sstatic.net/MTb4f.png

While the image looks good, I am facing an issue with the gradual transition from light to shadow. Since the moon lacks an atmosphere, the transition should be more abrupt.

Here is the code I have developed so far:

  // Insert your code here

The above code utilizes an equirectangular moon map (provided by NASA) like this:

https://i.sstatic.net/vE4iK.png

...and maps it onto a sphere to allow for rotation and illumination in different ways.

Despite my research efforts, I have only come across information about objects casting shadows on other objects. I have not found any resources on adjusting shadows on a single object with a main light source.

I have incorporated some ambient lighting in my code to represent "earth shine," ensuring that the shadowed part of the moon is not completely dark. However, removing this ambient lighting does not significantly enhance the sharpness of the shadow boundary.

Could anyone provide insights on what adjustments I should make to achieve the sharper shadow boundaries I desire?

javascript typescript three.js webgl

Answer 1

Answer №1

Upon experimentation, I discovered that MeshPhongMaterial, which I initially overlooked due to its association with glossy surfaces and specular highlights, actually yields better results for me when reflectivity and shininess are set to zero.

Moreover, a crucial adjustment that significantly improved image contrast and gamma was setting

this.renderer.outputEncoding = sRGBEncoding

.

Another subtle modification I made was adjusting the Earth shine from its maximum at new moon to its minimum at full moon, as it naturally should be.

https://i.sstatic.net/4E8Vs.gif

  private renderMoonWebGL(context: CanvasRenderingContext2D, solarSystem: SolarSystem, time_JDE: number,
           cx: number, cy: number, size: number, pixelsPerArcSec: number, pixelRatio: number,
           parallacticAngle?: Angle, observer?: ISkyObserver, _showEclipses?: boolean): void {
    if (!this.renderer)
      this.initializeRenderer();

    if (size === 0)
      size = MAX_LUNAR_ANGULAR_DIAMETER * pixelsPerArcSec * 60;

    if (this.webGlRendererSize !== size) {
      this.renderer.setSize(size, size);
      this.webGlRendererSize = size;
    }

    const phase = solarSystem.getLunarPhase(time_JDE);
    const libration = solarSystem.getLunarLibration(time_JDE, observer);

    this.camera.position.z = libration.D * KM_PER_AU;
    this.camera.rotation.z = (parallacticAngle ? parallacticAngle.radians : 0);
    this.globeMesh.rotation.y = to_radian(-libration.l);
    this.globeMesh.rotation.x = to_radian(libration.b);
    this.sun.position.x = 93000000 * sin_deg(phase);
    this.sun.position.z = -93000000 * cos_deg(phase);
    this.earthShine.intensity = 0.025 + cos_deg(phase) * 0.0125;
    this.renderer.render(this.scene, this.camera);
    context.drawImage(this.renderer.domElement, cx - size / 2, cy - size / 2);
  }

  private initializeRenderer(): void {
    const globe = new SphereGeometry(MOON_RADIUS, 50, 50);

    globe.rotateY(-PI / 2);
    this.camera = new PerspectiveCamera(MAX_LUNAR_ANGULAR_DIAMETER / 60, 1, 0.1, 500000);
    this.scene = new Scene();
    this.globeMesh = new Mesh(globe, new MeshPhongMaterial({ map: new CanvasTexture(this.moonImageForWebGL),
      reflectivity: 0, shininess: 0 }));
    this.scene.add(this.globeMesh);
    this.renderer = new WebGLRenderer({ alpha: true, antialias: true });
    this.renderer.outputEncoding = sRGBEncoding;
    this.sun = new DirectionalLight('white', 1.5);
    this.sun.position.y = 0;
    this.scene.add(this.sun);
    this.earthShine = new AmbientLight('white');
    this.scene.add(this.earthShine);
  }

Answer 2

Upon experimentation, I discovered that MeshPhongMaterial, which I initially overlooked due to its association with glossy surfaces and specular highlights, actually yields better results for me when reflectivity and shininess are set to zero.

Moreover, a crucial adjustment that significantly improved image contrast and gamma was setting

this.renderer.outputEncoding = sRGBEncoding

.

Another subtle modification I made was adjusting the Earth shine from its maximum at new moon to its minimum at full moon, as it naturally should be.

https://i.sstatic.net/4E8Vs.gif

  private renderMoonWebGL(context: CanvasRenderingContext2D, solarSystem: SolarSystem, time_JDE: number,
           cx: number, cy: number, size: number, pixelsPerArcSec: number, pixelRatio: number,
           parallacticAngle?: Angle, observer?: ISkyObserver, _showEclipses?: boolean): void {
    if (!this.renderer)
      this.initializeRenderer();

    if (size === 0)
      size = MAX_LUNAR_ANGULAR_DIAMETER * pixelsPerArcSec * 60;

    if (this.webGlRendererSize !== size) {
      this.renderer.setSize(size, size);
      this.webGlRendererSize = size;
    }

    const phase = solarSystem.getLunarPhase(time_JDE);
    const libration = solarSystem.getLunarLibration(time_JDE, observer);

    this.camera.position.z = libration.D * KM_PER_AU;
    this.camera.rotation.z = (parallacticAngle ? parallacticAngle.radians : 0);
    this.globeMesh.rotation.y = to_radian(-libration.l);
    this.globeMesh.rotation.x = to_radian(libration.b);
    this.sun.position.x = 93000000 * sin_deg(phase);
    this.sun.position.z = -93000000 * cos_deg(phase);
    this.earthShine.intensity = 0.025 + cos_deg(phase) * 0.0125;
    this.renderer.render(this.scene, this.camera);
    context.drawImage(this.renderer.domElement, cx - size / 2, cy - size / 2);
  }

  private initializeRenderer(): void {
    const globe = new SphereGeometry(MOON_RADIUS, 50, 50);

    globe.rotateY(-PI / 2);
    this.camera = new PerspectiveCamera(MAX_LUNAR_ANGULAR_DIAMETER / 60, 1, 0.1, 500000);
    this.scene = new Scene();
    this.globeMesh = new Mesh(globe, new MeshPhongMaterial({ map: new CanvasTexture(this.moonImageForWebGL),
      reflectivity: 0, shininess: 0 }));
    this.scene.add(this.globeMesh);
    this.renderer = new WebGLRenderer({ alpha: true, antialias: true });
    this.renderer.outputEncoding = sRGBEncoding;
    this.sun = new DirectionalLight('white', 1.5);
    this.sun.position.y = 0;
    this.scene.add(this.sun);
    this.earthShine = new AmbientLight('white');
    this.scene.add(this.earthShine);
  }

How can I enhance the sharpness of shadows on MeshLambertMaterial in Three.js?

Answer №1

Similar questions

Establishing the Default Volume within a script

Printing an array from JavaScript to an EJS template: Tips and Tricks

Ways to automatically style the child divs within a parent div

Creating a factory function in TypeScript to generate union types

Assign a new value to a controller scope variable without relying on angular.element in AngularJS

Tips for inserting a delay between two separate javascript commands within the same onchange event

Is it possible to determine whether a path leads to a directory or a file?

Navigation buttons that move the user either up or down the page

Unable to change the value of selected items in checkbox event within a React context

Customize date filtering in KendoUI grid

Why are users not visible in the Node.js application?

Toggle between resizing a set of boxes and fading in/out their images

Vue.js CSS class interpolation

What are common pitfalls to avoid when modifying state with createSlice in Redux-Toolkit?

Tips for implementing server-side rendering in Jade using an Array of JSON objects instead of just a single JSON object

HTML5 Drag and Drop: How to Stop Drag and Drop Actions from Occurring Between a Browser and Browser Windows

Does anyone have a solution for resetting the ID numbers in a flatlist after removing an item from it?

Interacting with a third-party application via OAuth using Node server to send REST requests

Achieving Efficiency with Handlebars: Streamlining Remote Template Organization and

Various web browsers may exhibit varying behaviors when processing extremely lengthy hyperlinks