Urban digital twins provide an integrated framework for combining semantic 3D city models, simulation results, and interactive visualization in support of urban energy analyses. While existing approaches effectively represent results at the building scale, extending this capability to individual semantic surfaces remains challenging. Applications such as rooftop solar assessment require simulation results to be associated with each roof surface and visualized at the same level of detail, yet current CityJSON visualization tools do not support attribute-driven rendering of surfaces belonging to the same semantic category. This paper addresses this limitation through two complementary contributions. First, we propose a client-side workflow that integrates solar potential simulations, computed with pvlib and provided as lightweight JSON files, into individual roof surfaces of a CityJSON model. The workflow enriches semantic surfaces with verified energy attributes and enables interactive analysis from the district scale down to individual roof surfaces. Second, we extend the open-source CityJSON-ThreeJS loader with a reusable class-based visualization mechanism that renders semantic surfaces according to user-defined classification attributes. Although demonstrated using solar potential classes, the approach is generic and can support other surface-level applications, including thermal performance, material characterization, and structural assessment. The approach is demonstrated on 1,667 buildings in the Sart-Tilman district (Liège, Belgium) within an in-house urban digital twin platform. The results demonstrate that detailed surface-level analysis can be achieved entirely in the browser without server-side processing or format conversion, highlighting the potential of lightweight, standards-compliant urban digital twins.