Rendering Options

This example demonstrates how to work with rendering options in SketchUp using the JavaScript SDK.

Prerequisites

You have a SketchupModel instance (e.g., from SketchUpApi.getActiveModel()).
The protocol version supports rendering options (SDK 2.24.0 / Protocol 1.21.0 or later).

Model Rendering Options

Getting Model Rendering Options

let model = await SketchUpApi.getActiveModel();

// Get the current rendering options
let renderingOptions = await model.getRenderingOptions();

// Access specific rendering options
console.log('Background Color:', renderingOptions.BackgroundColor);
console.log('Edge Type:', renderingOptions.EdgeType); // 0=Standard, 1=Sketchy
console.log('Edge Color Mode:', renderingOptions.EdgeColorMode); // 0=Object, 1=Foreground, 2=Direction
console.log('Render Mode:', renderingOptions.RenderMode); // 0=Wireframe, 1=Hidden, 2=Flat, 3=Smooth, etc.
console.log('Draw Silhouettes:', renderingOptions.DrawSilhouettes);
console.log('Silhouette Width:', renderingOptions.SilhouetteWidth);

Accessing All Rendering Options

let model = await SketchUpApi.getActiveModel();
let renderingOptions = await model.getRenderingOptions();

// Iterate through all rendering option properties
for (const [key, value] of Object.entries(renderingOptions)) {
  if (key.startsWith('_')) continue; // Skip internal properties
  console.log(`${key}:`, value);
}

Observing Model Rendering Options Changes

Monitor rendering options for changes in real-time:

let model = await SketchUpApi.getActiveModel();

let observerHandle = model.observeRenderingOptions(data => {
  if (data.type === 'initial') {
    console.log('Initial rendering options received');
    console.log('Background Color:', data.renderingOptions.BackgroundColor);
  } else if (data.type === 'change') {
    console.log('Rendering options changed:');
    for (const [key, value] of Object.entries(data.change)) {
      console.log(`  ${key} changed to:`, value);
    }
  }
});

// Stop observing when done
// observerHandle.stop();

Scene Rendering Options

Scenes can optionally store their own rendering options. If a scene does not have rendering options stored, it will use the model’s rendering options.

Getting Scene Rendering Options

let model = await SketchUpApi.getActiveModel();
let scenes = await model.getScenes();
let scene = scenes[0];

// Get rendering options for a scene (may be undefined if not stored)
let renderingOptions = await scene.getRenderingOptions();

if (renderingOptions) {
  console.log('Scene has rendering options:');
  console.log('  Background Color:', renderingOptions.BackgroundColor);
  console.log('  Render Mode:', renderingOptions.RenderMode);
} else {
  console.log('Scene does not store rendering options');
}

Updating Scene Rendering Options

Update specific rendering options for a scene:

let model = await SketchUpApi.getActiveModel();
let scenes = await model.getScenes();
let scene = scenes[0];

await model.performOperation(async operation => {
  // Update multiple rendering options at once
  operation.sceneUpdateRenderingOptions(scene, {
    BackgroundColor: new SketchUpApi.Color(135, 206, 235), // Sky blue
    DrawSilhouettes: true,
    SilhouetteWidth: 3,
    EdgeType: SketchUpApi.EdgeType.Sketchy,
  });

  // Verify the changes
  const updated = await scene.getRenderingOptions();
  console.log('Updated Background Color:', updated.BackgroundColor);
  console.log('Updated Silhouette Width:', updated.SilhouetteWidth);
}, 'Update scene rendering options');

Setting Rendering Options with Color Strings

Colors can be specified as Color objects or hex strings:

let model = await SketchUpApi.getActiveModel();
let scenes = await model.getScenes();
let scene = scenes[0];

await model.performOperation(async operation => {
  operation.sceneUpdateRenderingOptions(scene, {
    BackgroundColor: '#87CEEB', // Sky blue as hex string
    ForegroundColor: '#000000', // Black
    HighlightColor: '#FF0000', // Red
  });
}, 'Update scene colors');

Configuring Edge Display Settings

let model = await SketchUpApi.getActiveModel();
let scenes = await model.getScenes();
let scene = scenes[0];

await model.performOperation(async operation => {
  operation.sceneUpdateRenderingOptions(scene, {
    EdgeType: SketchUpApi.EdgeType.Standard,
    EdgeColorMode: SketchUpApi.EdgeColorMode.Direction,
    EdgeDisplayMode: SketchUpApi.EdgeDisplayMode.All,
    DrawSilhouettes: true,
    SilhouetteWidth: 2,
    DrawProfilesOnly: false,
    ExtendLines: true,
    LineExtension: 10,
  });
}, 'Configure edge display');

Setting Fog Options

let model = await SketchUpApi.getActiveModel();
let scenes = await model.getScenes();
let scene = scenes[0];

await model.performOperation(async operation => {
  operation.sceneUpdateRenderingOptions(scene, {
    DisplayFog: true,
    FogStartDist: 100,
    FogEndDist: 1000,
    FogUseBkColor: true, // Use background color for fog
    FogColor: new SketchUpApi.Color(200, 200, 220), // Light blue-gray
  });
}, 'Configure fog settings');

Configuring Section Plane Display

let model = await SketchUpApi.getActiveModel();
let scenes = await model.getScenes();
let scene = scenes[0];

await model.performOperation(async operation => {
  operation.sceneUpdateRenderingOptions(scene, {
    DisplaySectionPlanes: true,
    DisplaySectionCuts: true,
    SectionCutFilled: true,
    SectionCutDrawEdges: true,
    SectionCutWidth: 2,
    SectionDefaultFillColor: new SketchUpApi.Color(255, 200, 200, 128), // Semi-transparent red
    SectionActiveColor: new SketchUpApi.Color(0, 255, 0), // Green
    SectionInactiveColor: new SketchUpApi.Color(128, 128, 128), // Gray
  });
}, 'Configure section display');

Enabling Ambient Occlusion

Note: AmbientOcclusionColor and AmbientOcclusionMultiplier are only available in SketchUp 2026.0+

let model = await SketchUpApi.getActiveModel();
let scenes = await model.getScenes();
let scene = scenes[0];

await model.performOperation(async operation => {
  const updates = {
    AmbientOcclusion: true,
    AmbientOcclusionDistance: 50,
    AmbientOcclusionIntensity: 0.8,
  };

  // Add color and multiplier if supported
  if (SketchUpApi.platform.majorVersion >= 26) {
    updates.AmbientOcclusionColor = new SketchUpApi.Color(0, 0, 0);
    updates.AmbientOcclusionMultiplier = 1.0;
  }

  operation.sceneUpdateRenderingOptions(scene, updates);
}, 'Enable ambient occlusion');