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.

Sign up for GitHub

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

Fixes #39 Scene lighting needs improvement #85

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
a0dc0ce
Add helpers for directional and hemisphere lights
Yahiewi Apr 24, 2025
d9d2f77
Add lighting controls
Yahiewi Apr 25, 2025
1445894
Add helper toggle and make directional controls spherical
Yahiewi May 4, 2025
caab092
Improve lighting
Yahiewi May 5, 2025
e1076d9
Remove pointless directional light distance slider
Yahiewi May 12, 2025
414bb78
Fix resize cursor
Yahiewi May 15, 2025
721aaa7
Remove Target folder
Yahiewi May 15, 2025
45da22d
Reorganize folders
Yahiewi May 15, 2025
99b33cd
Refactor and lint CSS
Yahiewi May 15, 2025
e720faf
Fix panda lighting
Yahiewi May 15, 2025
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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