SciChart.js Javascript 3D Charts with WebGL & WebAssembly
Tags: webdev, javascript, charts, webassembly
Published: 2024-04-05 11:45:48

<!-- wp:html -->
<div style="background-color: #f3f3f3; border: 1px solid #E3E3E3; padding: 20px 20px 0px 20px; margin-bottom: 20px;">
<h2><span style="color: #078e26;">//</span> Are you looking for 3D JavaScript Charts?</h2>
<div class="column one-second column_column">
<p>SciChart.js, our Ultra-High Performance <a href="https://www.scichart.com/javascript-chart-features/">JavaScript 3D Chart library</a> is now released!</p>
<p><em>“With WebAssembly and WebGL hardware acceleration and an optimized render pipeline, <strong>SciChart provides extremely fast JavaScript 3D charts capable of drawing millions of data-points in realtime …</strong>” <a href="https://www.scichart.com/javascript-chart-features/" target="_blank" rel="noopener noreferrer">[read more]</a></em></p>
<p><a class="button" style="margin-bottom: 0px;" tabindex="0" href="https://www.scichart.com/javascript-chart-features/" target="_blank" rel="noopener noreferrer">LEARN MORE: SCICHART.JS 2D &amp; 3D CHARTS</a></p>
</div>
<div class="column one-second column_column">
<div class="aos-init aos-animate" style="margin-top: 0px !important;" data-aos="fade-left" data-aos-duration="1000" data-aos-delay="500">
<figure class="wp-block-video"><video class="w-100 h-100" style="object-fit: cover;" title="JavaScript 3D Charts showcase with 3D Bubble, 3D Scatter, 3D Point Cloud and 3D Surface Plot" preload="metadata" autoplay="autoplay" loop="loop" muted="" controls="controls" width="1280" height="720"><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start">﻿</span> <source src="https://www.scichart.com/wp-content/uploads/2023/12/javascript-chart-library-10-3d-charts.webm" type="video/webm" /> <source src="https://www.scichart.com/wp-content/uploads/2023/12/javascript-chart-library-10-3d-charts.mp4" type="video/mp4" /> Your browser does not support the video tag.</video>
<figcaption><strong>See our live 3D JavaScript Chart demos in the SciChart.js examples suite: <a href="https://demo.scichart.com/" target="_blank" rel="noreferrer noopener">demo.scichart.com</a></strong></figcaption>
</figure>
</div>
</div>
<div class="clear"> </div>
</div>
<!-- /wp:html -->

<!-- wp:paragraph -->
<p>If you haven't read already, take a moment to look at our progress update published 6 weeks ago about <a href="/scichart-js-fast-javascript-chart-progress-update-april-2020/">SciChart.js - Javascript GPU Accelerated Charts with WebAssembly and WebGL</a>. We've made fantastic strides forward and are continuing to develop <a href="https://www.scichart.com/queens-award-innovation">our award-winning 2D/3D charts</a> for Javascript / Typescript applications. Aiming for Q3/Q4 for a first release of this groundbreaking WebAssembly WebGL JavaScript Charting library.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Below we have another quick progress update. The 3D engine is now almost fully compiled to WebAssembly enabling 3D Charts in the browser, suitable for visualising data in financial modelling, AI / machine learning debugging, scientific modelling and more. We've got some quick previews of these 3D Javascript chart types below.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 id="javascript-3d-bubble-scatter-charts">JavaScript 3D Bubble / Scatter Charts</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Javascript 3D Bubble Charts allow you to visualise data in three-dimensions, it could be anything from point-cloud data from a LIDAR sensor to simply viewing statistical data in 3D. In SciChart.js each point is individually styled: you may change the size or colour of the scatter point on per-point basis.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>We're supporting multiple point-markers out of the box including Sphere, Cylinder, Pyramid, Cube and flat markers for higher performance point-clouds such as Ellipse, Quad and custom textures.</p>
<!-- /wp:paragraph -->
<!-- wp:image {"id":32928,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><br />
<img class="wp-image-32930" src="https://www.scichart.com/wp-content/uploads/2020/06/javascript-3d-bubble-scatter-chart.gif" alt="" />
<figcaption>Javascript 3D Bubble/Scatter Chart with per-point colour and size</figcaption>
</figure>
<!-- /wp:image -->

<!-- wp:image {"id":32930,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img class="wp-image-32930" src="https://www.scichart.com/wp-content/uploads/2019/09/image.png" alt="" />
<figcaption>Javascript 3D Scatter Chart with high performance flat-quad point-marker. Useful for Point-clouds / <a href="https://www.scichart.com/example/javascript-chart/javascript-3d-lidar-visualization/">visualising LIDAR</a> data</figcaption>
</figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3 id="javascript-3d-surface-mesh-charts">JavaScript 3D Surface Mesh Charts</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The Surface Mesh chart is an iconic 3D Chart often seen in software packages such as <a href="https://www.mathworks.com/products/matlab.html">Mathworks Matlab</a>, and useful to visualise data in a topographic format. With 3D Surface Mesh charts you can find the optimum combinations between two sets of data such as visualising output of Least-Squares, financial models, or other statistical data.</p>
<!-- /wp:paragraph -->


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/unxj2i95pf1kzxsay2kq.jpg)

<!-- wp:image {"id":32932,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large">
<figcaption>JavaScript 3D Surface Plots with SciChart.js - Fast WebAssembly WebGL JavaScript Charts</figcaption>
</figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>In SciChart.js 3D JavaScript Charts, you can combine multiple chart types onto a single surface, such as in this example which combines a Surface mesh plot with point-cloud, to visualize UAV Lidar data.</p>
<!-- /wp:paragraph -->


<div class="d-block position-relative w-100 ratio-70"><iframe class="w-100 h-100 position-absolute top-0 start-0" src="https://demo.scichart.com/iframe/javascript-3d-lidar-visualization" data-lf-yt-playback-inspected-lynor8xogyyawqjz="true" data-lf-vimeo-playback-inspected-lynor8xogyyawqjz="true"></iframe></div>

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lb5qq0gajyyl92u1lno2.jpg)
<!-- wp:image {"id":32936,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large">
<figcaption>JavaScript 3D Point clouds with SciChart - Fast WebGL WebAssembly Javascript Chart Components</figcaption>
</figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>With full hardware-acceleration with WebGL and WebAssembly, SciChart.js will be able to handle large data-sets. In early testing it's possible to get reasonable frame-rates with height-maps 500x500 in size. Even 1000 x 1000 may be possible in the final release once we get a chance to optimise.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The SurfaceMesh will support a variety of paletting options including height-mapping (mapping a gradient brush onto values by height), solid colouring, individual cell-colouring, texturing, enabling/disabling wireframes and contours.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 id="scichart-js-release-date"><strong><strong>SciChart.js Release Date</strong></strong></h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>SciChart.js - our GPU Accelerated 2D/3D <a href="https://www.scichart.com/javascript-chart-features/">JavaScript Chart</a> has now been released! In fact, we have just released a <a href="https://www.scichart.com/scichart-js-v3-0-released/">version 3 (January 2023)</a> which is a Huge upgrade to v2.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>If you want to learn more about SciChart.js or start a trial, or test drive the features by looking at our <a href="https://demo.scichart.com">Js Charts Demo</a>, click the link below.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><!--kg-card-begin: html--><a class="button button-highlight" title="SciChart.js JavaScript Chart Library" href="https://www.scichart.com/javascript-chart-features/" target="_blank" rel="noopener noreferrer">SciChart.js JavaScript Chart Library</a><!--kg-card-end: html--></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 id="about-scichart-high-performance-realtime-charts"><strong><strong><em><em><em><em>About SciChart: High Performance Realtime Charts</em></em></em></em></strong></strong></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><em><em><em><em>SciChart provides high performance real</em></em></em>-<em><em><em>time chart components on the WPF (Windows), iOS, Android and </em></em></em>JavaScript <em><em><em>platforms. It is our goal to create the best cross-platform Native WPF, iOS, Android and JavaScript 2D &amp; 3D Charts in the world, focusing on performance, developer productivity, ease of use, depth of features and enterprise-grade tech support.</em></em></em></em></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><em><em><em><em>If you have a question about what SciChart's WebGL / WebAssembly Charts can offer you, or if you would like to get a quote, please <a href="https://www.scichart.com/contact-us/">contact us</a>. Our friendly, helpful support team will be glad to help!</em></em></em></em></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><!--kg-card-begin: html--><a class="button button-highlight" title="Contact SciChart" href="https://www.scichart.com/contact-us/" target="_blank" rel="noopener noreferrer">Contact Us</a><!--kg-card-end: html--></p>
<!-- /wp:paragraph -->