Skip to content

Fixes #39 Scene lighting needs improvement #85

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
May 23, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 0 additions & 86 deletions examples/franka_panda_description/meshes/visual/link0.dae
Original file line number Diff line number Diff line change
Expand Up @@ -50,92 +50,6 @@
</extra>
</camera>
</library_cameras>
<library_lights>
<light id="Light-light" name="Light.007">
<technique_common>
<point>
<color sid="color">1000 1000 1000</color>
<constant_attenuation>1</constant_attenuation>
<linear_attenuation>0</linear_attenuation>
<quadratic_attenuation>0.00111109</quadratic_attenuation>
</point>
</technique_common>
<extra>
<technique profile="blender">
<type sid="type" type="int">0</type>
<flag sid="flag" type="int">0</flag>
<mode sid="mode" type="int">1</mode>
<gamma sid="blender_gamma" type="float">1</gamma>
<red sid="red" type="float">1</red>
<green sid="green" type="float">1</green>
<blue sid="blue" type="float">1</blue>
<shadow_r sid="blender_shadow_r" type="float">0</shadow_r>
<shadow_g sid="blender_shadow_g" type="float">0</shadow_g>
<shadow_b sid="blender_shadow_b" type="float">0</shadow_b>
<energy sid="blender_energy" type="float">1000</energy>
<dist sid="blender_dist" type="float">29.99998</dist>
<spotsize sid="spotsize" type="float">75</spotsize>
<spotblend sid="spotblend" type="float">0.15</spotblend>
<att1 sid="att1" type="float">0</att1>
<att2 sid="att2" type="float">1</att2>
<falloff_type sid="falloff_type" type="int">2</falloff_type>
<clipsta sid="clipsta" type="float">0.04999995</clipsta>
<clipend sid="clipend" type="float">30.002</clipend>
<bias sid="bias" type="float">1</bias>
<soft sid="soft" type="float">3</soft>
<bufsize sid="bufsize" type="int">2880</bufsize>
<samp sid="samp" type="int">3</samp>
<buffers sid="buffers" type="int">1</buffers>
<area_shape sid="area_shape" type="int">1</area_shape>
<area_size sid="area_size" type="float">0.1</area_size>
<area_sizey sid="area_sizey" type="float">0.1</area_sizey>
<area_sizez sid="area_sizez" type="float">1</area_sizez>
</technique>
</extra>
</light>
<light id="Light_001-light" name="Light.006">
<technique_common>
<point>
<color sid="color">1000 1000 1000</color>
<constant_attenuation>1</constant_attenuation>
<linear_attenuation>0</linear_attenuation>
<quadratic_attenuation>0.00111109</quadratic_attenuation>
</point>
</technique_common>
<extra>
<technique profile="blender">
<type sid="type" type="int">0</type>
<flag sid="flag" type="int">0</flag>
<mode sid="mode" type="int">1</mode>
<gamma sid="blender_gamma" type="float">1</gamma>
<red sid="red" type="float">1</red>
<green sid="green" type="float">1</green>
<blue sid="blue" type="float">1</blue>
<shadow_r sid="blender_shadow_r" type="float">0</shadow_r>
<shadow_g sid="blender_shadow_g" type="float">0</shadow_g>
<shadow_b sid="blender_shadow_b" type="float">0</shadow_b>
<energy sid="blender_energy" type="float">1000</energy>
<dist sid="blender_dist" type="float">29.99998</dist>
<spotsize sid="spotsize" type="float">75</spotsize>
<spotblend sid="spotblend" type="float">0.15</spotblend>
<att1 sid="att1" type="float">0</att1>
<att2 sid="att2" type="float">1</att2>
<falloff_type sid="falloff_type" type="int">2</falloff_type>
<clipsta sid="clipsta" type="float">0.04999995</clipsta>
<clipend sid="clipend" type="float">30.002</clipend>
<bias sid="bias" type="float">1</bias>
<soft sid="soft" type="float">3</soft>
<bufsize sid="bufsize" type="int">2880</bufsize>
<samp sid="samp" type="int">3</samp>
<buffers sid="buffers" type="int">1</buffers>
<area_shape sid="area_shape" type="int">1</area_shape>
<area_size sid="area_size" type="float">0.1</area_size>
<area_sizey sid="area_sizey" type="float">0.1</area_sizey>
<area_sizez sid="area_sizez" type="float">1</area_sizez>
</technique>
</extra>
</light>
</library_lights>
<library_effects>
<effect id="Part__Feature017_001_007-effect">
<profile_COMMON>
Expand Down
137 changes: 133 additions & 4 deletions src/controls.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,8 @@ export class URDFControls extends GUI {
grid: {},
height: {}
},
joints: {}
joints: {},
lights: {}
};

/**
Expand All @@ -47,6 +48,9 @@ export class URDFControls extends GUI {
});

// Create folders
this._jointsFolder = this.addFolder('Joints');
this._jointsFolder.domElement.setAttribute('class', 'dg joints-folder');

this._workspaceFolder = this.addFolder('Workspace');
this._workspaceFolder.domElement.setAttribute(
'class',
Expand All @@ -55,9 +59,6 @@ export class URDFControls extends GUI {

this._sceneFolder = this.addFolder('Scene');
this._sceneFolder.domElement.setAttribute('class', 'dg scene-folder');

this._jointsFolder = this.addFolder('Joints');
this._jointsFolder.domElement.setAttribute('class', 'dg joints-folder');
}

/**
Expand Down Expand Up @@ -262,5 +263,133 @@ export class URDFControls extends GUI {
document.addEventListener('mouseup', onMouseUp);
}
});

// Show resize cursor when hovering near left edge
this.domElement.addEventListener('mousemove', (e: MouseEvent) => {
const rect = this.domElement.getBoundingClientRect();
const offsetX = e.clientX - rect.left;
this.domElement.style.cursor =
offsetX < grabZoneWidth || isResizing ? 'ew-resize' : 'auto';
});
this.domElement.addEventListener('mouseleave', () => {
if (!isResizing) {
this.domElement.style.cursor = 'auto';
}
});
}

/**
* Creates controls for the different lights in the scene
*
* @returns - The controls to trigger callbacks when light settings change
*/
createLightControls() {
if (this._isEmpty(this.controls.lights)) {
// Create subfolders for each light
const directionalFolder =
this._sceneFolder.addFolder('Directional Light');
const ambientFolder = this._sceneFolder.addFolder('Ambient Light');
const hemisphereFolder = this._sceneFolder.addFolder('Hemisphere Light');

// Initialize settings for each light type
const directionalSettings = {
Altitude: Math.PI / 4, // 45 degrees elevation
Azimuth: Math.PI / 4, // 45 degrees around vertical axis
Color: [255, 255, 255],
Intensity: 1.0,
ShowHelper: false
};

const ambientSettings = {
Color: [255, 255, 255],
Intensity: 0.5
};

const hemisphereSettings = {
SkyColor: [255, 255, 255],
GroundColor: [38, 50, 56],
Intensity: 1.0,
ShowHelper: false
};

// Spherical coordinate angle limits and steps
const minAngle = -Math.PI;
const maxAngle = Math.PI;
const angleStep = 0.01;

// Intensity limits and steps
const minIntensity = 0;
const maxIntensity = 10;
const intensityStep = 0.1;

// Controls for directional light
this.controls.lights.directional = {
position: {
altitude: directionalFolder.add(
directionalSettings,
'Altitude',
minAngle,
maxAngle,
angleStep
),
azimuth: directionalFolder.add(
directionalSettings,
'Azimuth',
minAngle,
maxAngle,
angleStep
)
},
color: directionalFolder.addColor(directionalSettings, 'Color'),
intensity: directionalFolder.add(
directionalSettings,
'Intensity',
minIntensity,
maxIntensity,
intensityStep
),
showHelper: directionalFolder
.add(directionalSettings, 'ShowHelper')
.name('Show Helper')
};

// Ambient light controls
this.controls.lights.ambient = {
color: ambientFolder.addColor(ambientSettings, 'Color'),
intensity: ambientFolder.add(
ambientSettings,
'Intensity',
minIntensity,
maxIntensity,
intensityStep
)
};

// Hemisphere light controls
this.controls.lights.hemisphere = {
skyColor: hemisphereFolder
.addColor(hemisphereSettings, 'SkyColor')
.name('Sky Color'),
groundColor: hemisphereFolder
.addColor(hemisphereSettings, 'GroundColor')
.name('Ground Color'),
intensity: hemisphereFolder.add(
hemisphereSettings,
'Intensity',
minIntensity,
maxIntensity,
intensityStep
),
showHelper: hemisphereFolder
.add(hemisphereSettings, 'ShowHelper')
.name('Show Helper')
};

// Open Scene (lights) and directional subfolder
this._sceneFolder.open();
directionalFolder.open();
}

return this.controls.lights;
}
}
67 changes: 67 additions & 0 deletions src/layout.ts
Original file line number Diff line number Diff line change
Expand Up @@ -165,6 +165,7 @@ export class URDFLayout extends PanelLayout {
this._setPathControls();
this._setSceneControls();
this._setJointControls();
this._setLightControls();
}

/**
Expand Down Expand Up @@ -214,6 +215,72 @@ export class URDFLayout extends PanelLayout {
});
}

/**
* Set callback for changing directional light position in the controls panel.
*/
private _setLightControls(): void {
const lightControl = this._controlsPanel.createLightControls();

// Directional light callbacks
const directional = lightControl.directional;

// Position controls using spherical coordinates
directional.position.altitude.onChange((newAltitude: number) => {
const azimuth = directional.position.azimuth.getValue();
this._renderer.setDirectionalLightPositionSpherical(newAltitude, azimuth);
});

directional.position.azimuth.onChange((newAzimuth: number) => {
const altitude = directional.position.altitude.getValue();
this._renderer.setDirectionalLightPositionSpherical(altitude, newAzimuth);
});

// Color and intensity controls
directional.color.onChange((newColor: number[]) => {
this._renderer.setDirectionalLightColor(newColor);
});

directional.intensity.onChange((newIntensity: number) => {
this._renderer.setDirectionalLightIntensity(newIntensity);
});

// Helper visibility toggle for directional light
directional.showHelper.onChange((visible: boolean) => {
this._renderer.setDirectionalLightHelperVisibility(visible);
});

// Ambient light callbacks
const ambient = lightControl.ambient;

ambient.color.onChange((newColor: number[]) => {
this._renderer.setAmbientLightColor(newColor);
});

ambient.intensity.onChange((newIntensity: number) => {
this._renderer.setAmbientLightIntensity(newIntensity);
});

// Hemisphere light callbacks
const hemisphere = lightControl.hemisphere;

hemisphere.skyColor.onChange((newColor: number[]) => {
this._renderer.setHemisphereLightSkyColor(newColor);
});

hemisphere.groundColor.onChange((newColor: number[]) => {
this._renderer.setHemisphereLightGroundColor(newColor);
});

hemisphere.intensity.onChange((newIntensity: number) => {
this._renderer.setHemisphereLightIntensity(newIntensity);
});

// Helper visibility toggle for hemisphere light
hemisphere.showHelper.onChange((visible: boolean) => {
this._renderer.setHemisphereLightHelperVisibility(visible);
});
}

/**
* Set value for robot joint
*
Expand Down
Loading
Loading