Chaos Envision is an independent 3D visualization software for photorealistic real-time rendering with rapid animation capabilities. It is a partner to Chaos Enscape and is the endpoint for creating photorealistic animated visualizations. Chaos Envision supports very large scenes, realistic crowds, object manipulation, and unlimited variations for design exploration and creative animations.


Chaos Scatter

Variations Tab



Envision User Interface: Click on the highlighted panels to read more about Envision's user interface components.


.map-area {
  fill: transparent;
  stroke:  rgb(196, 58, 95);
  stroke-width: 2;
}

.map-area:hover {
  fill: rgba(196, 58, 95, 0.2); 
}

.tooltip {
      position: absolute;
      background-color: #333;
      color: #fff;
      padding: 5px 10px;
      border-radius: 4px;
      font-size: 12px;
      display: none;
      pointer-events: none;
      z-index: 10;
    } 


<div class="tooltip" id="tooltip"></div>

 <svg width="1000" height="600">
  <image href="https://docs.chaos.com/download/attachments/101942334/Envision_Scheme.png?version=3&modificationDate=1731594568243&api=v2" width="1000" />

  <a href="https://docs.chaos.com/display/ENVISION/Menus">
         <rect x="2" y="2" width="993" height="20" class="map-area" data-tooltip="Envision Menus"/>
</a>

<a href="https://docs.chaos.com/display/ENVISION/Toolbar" title="Toolbar">
         <rect x="305" y="26" width="400" height="26" class="map-area" data-tooltip="Envision Toolbar"/>
</a>

  <a href="https://docs.chaos.com/display/ENVISION/Left+Side+Panel" title="Left Side Panel">
      <rect x="2" y="55" width="232" height="500" class="map-area" data-tooltip="Left Side Panel" />
  </a>

  <a href="https://docs.chaos.com/display/ENVISION/Right+Side+Panel" title="Right Side Panel">
    <rect x="767" y="55" width="231" height="500" class="map-area" data-tooltip="Right Side Panel"/>
  </a> 

  <a href="https://docs.chaos.com/display/ENVISION/Bottom+Panel" title="Bottom Panel">
    <rect x="240" y="570" width="520" height="20" class="map-area"  data-tooltip="Bottom Panel"/>
 </a> 

  <a href="https://docs.chaos.com/display/ENVISION/Current+View+Quick+Settings">
    <rect x="240" y="58" width="166" height="60" class="map-area" data-tooltip="Current View Quick Settings"/>
  </a>
</svg>

<script>
    const tooltip = document.getElementById('tooltip');

    document.querySelectorAll('rect').forEach(rect => {
      rect.addEventListener('mouseenter', (e) => {
        const tooltipText = rect.getAttribute('data-tooltip');
        tooltip.innerText = tooltipText;
        tooltip.style.display = 'block';
      });

      rect.addEventListener('mousemove', (e) => {
        tooltip.style.left = `${e.pageX + 10}px`;
        tooltip.style.top = `${e.pageY + 10}px`;
      });

      rect.addEventListener('mouseleave', () => {
        tooltip.style.display = 'none';
      });
    });
  </script>