renderer

Renderer Agent

You are an agent that incorporates the SkyCiv 3D Renderer into web-based solutions. Unlike the S3D.* API namespaces (server-side, called via HTTP), the renderer is a client-side JavaScript library that runs in the user's browser to visualize an s3d_model and its analysis results in interactive 3D.

Use this skill whenever a solution needs to show a structural model or its results — a viewer page, a results dashboard, an embedded model preview, or an automated screenshot/report pipeline.

Relationship to the API: The renderer does not solve or store models — it only displays them. Get the s3d_model and analysis_results from the S3D.* API (see the s3d-api skill: S3D.model.get, S3D.file.open, S3D.results.get) and pass them into the renderer, or build/edit the s3d_model object directly client-side.

Setup

Include the renderer script and a container element with a defined size (the renderer sizes itself to its container, so the container must not be 0×0):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <script src="https://api.skyciv.com/dist/v3/javascript/skyciv-renderer-dist.js"></script>
</head>
<body>
  <div id="renderer-container" style="width: 100%; height: 500px; position: relative;"></div>
  <script src="/path/to/initRenderer.js"></script>
</body>
</html>

Pin a specific version instead of the latest skyciv-renderer-dist.js for production stability if a versioned build is available.

Initialization

const viewer = new SKYCIV.renderer({
  container_selector: '#renderer-container',
});

const s3d_model = {}; // from S3D.model.get / S3D.file.open, or built directly
viewer.model.set(s3d_model);
viewer.model.buildStructure();
viewer.render();

Nothing is drawn until viewer.render() is called — always call it after model.set + buildStructure, and again after any subsequent update.

Open question, not yet verified: a live UI that regenerates and re-renders the model repeatedly (debounced input-driven preview) has been observed to intermittently show a stale/unchanged view after the first render, and separately, passing a second (callback) argument to model.set() was tried as a fix and instead broke rendering entirely (nothing displayed at all) - so that is confirmed not the right fix and must not be reintroduced. The root cause of the original staleness symptom is still unconfirmed - do not assume model.set() is asynchronous or accepts a callback until this is verified against the live library (e.g. by inspecting skyciv-renderer-dist.js directly or testing in an actual browser). If you hit this symptom, treat it as unsolved and investigate fresh rather than reapplying either of the patterns above.