Week 13

3D
WebGL vs SVG
scatter-gl

Scatterplot tour with penguins

Scatterplot Tour
Scatterplot tour using the Palmer Penguins
- Solution
- Only two cells needed to change.
- Detail instructions

Picking up from week 11

WebGL

Demos above allowed us to start seeing the performance limitations of DOM manipulation.

WebGL API -- MDN
- WebGL is a JavaScript API for rendering high-performance interactive 3D and 2D graphics.
- It uses HTML5 <canvas> elements -- without plugins -- in any compatible web browser.
- In particular, the user's device must have supporting hardware (Graphical Processing Unit = GPU).
- WebGL closely conforms to OpenGL ES 2.0
- WebGL programs consist of control code (JavaScript) and special effects code (shader code) executed on a GPU.
- WebGL elements can be mixed with other HTML elements.
WebGL Tutorial -- MDN
- The tutorial has some good background links, including this one on OpenGL...
- An Introduction to OpenGL
For example
- LiquidFun -- mbostock notebook
- LiquidFun -- google.github.io

Intro tutorials

MDN WebGL Demo #2 -- tmcw notebook
Hello, Fragment Shader -- mbostock notebook
Hello, WebGL -- mbostock block (circa 2013)
- This introductory tutorial demonstrates how to use the WebGL API.
- Notice the amount of work you need to do simply for setup.

Three.js

Three.js makes WebGL usable.

Deck.gl

Deck.gl is a relative newcomer.

Deck.gl
Deck.gl -- github
Degk.gl tutorials -- observable notebooks

Scatter-GL

Scatter-GL is an interactive 3D / 2D webgl-accelerated scatter plot point renderer.

It's the core functionality behind Google's Embedding projector
It's built with Three.js
scatter-gl -- github
- To run the demo
```
cd ~/Sites/scatter-gl
yarn
yarn demo
```
Browse to http://localhost:8080

Scatter-GL in Observable

Installation...

Note the CDN install for a web page
For Observable...
- Get the version number and dependency in package.json -- 0.0.11 for scatter-gl and 0.125 for three.js
  - See the issue raised on Observable talk
- The issue: Introduction to require -- observable
  - Links to good resources at the bottom of this notebook
  - See especially "Requiring stubborn add-ons"
- The solution: ScatterGL npm
  - Load the library
```
ScatterGL = {
  const { ScatterGL } = await require.alias({
    THREE: "[email protected]/build/three.min.js"
  })("[email protected]");
  return ScatterGL;
}
```
  - Render some dots
```
{
  const points = Array(100)
    .fill()
    .map(e => [Math.random() * 100, Math.random() * 100, Math.random() * 100]);
  const containerElement = DOM.element('div');
  containerElement.style.height = "500px";
  yield containerElement;
  const dataset = new ScatterGL.Dataset(points);
  const scatterGL = new ScatterGL(containerElement);
  scatterGL.render(dataset);
}
```
- QUESTION #1: What can you say about performance from this demo?
- QUESTION #2: What happens when you run the render cell many times in rapid succession?
  - Hint: How to dispose of objects
  - Compare with Hello, Three.js!

In-Class Exercise -- Scatter-GL penguins

Visualize the Palmer Penguins with Scatter-GL (use default colors).

Solution

In Class Exercise -- Colorful penguins

Color the penguins by species

Solution

In Class Exercise -- Hover color

Get the color to turn black on hover

Solution