How deeply does Web Components in Action cover geometry?

Works through declarative shapes and a rendered scene, but leaves the underlying geometry mathematics unexplained.

Geometry

As explained in Web Components in Action

3D is the representation and rendering of objects or scenes with three spatial dimensions.

Real-time 3D lets you view an object or scene from different angles. A mouse can spin an object; in a headset, tracked head movement changes the view instead. Slightly different views for each eye create a stereo effect. section 15.2

Listing 15.2. A-Frame hello WebVR scene

<html>
<head>
   <title>Hello, WebVR! • A-Frame</title>
   <script src="aframe.min.js"></script>                                   #1
</head>
<body>
<a-scene background="color: #ECECEC">                                      #2
        <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow>
        </a-box>                                                           #3
        <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow>
        </a-sphere>
        <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color=
        "#FFC65D" shadow></a-cylinder>
        <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4"
        color="#7BC8A4" shadow></a-plane>
</a-scene>
</body>
</html>

An A-Frame scene makes geometry feel familiar: HTML-like elements place a box, sphere, cylinder, and plane using attributes such as position, rotation, and size. section 15.2

For an interactive scene, a canvas can sit inside a Web Component while ordinary controls sit over it. Babylon.js supplies the camera, lights, render loop, and meshes; component attributes can drive changes to the selected object, its color, and its transparency. section 15.2

How Web Components in Action covers it

liveBook manning.com

Read Web Components in Action on liveBook Get the book at manning.com

Also explained in

liveBook manning.com

Build a Text-to-Image Generator (from Scratch)The three-dimensional organization and shape of objects and their spatial arrangement in a scene.

Compare how 2 books explain geometry →

Related concepts

image processingused by · Image processing is the computational manipulation and analysis of digital image data to transform images or extract information.
SAMcontrasts with · SAM, or Segment Anything Model, is a pretrained promptable computer-vision model that generates segmentation masks for objects in images.
digital imagecontrasts with · A digital image is visual content encoded as data, typically as a two-dimensional arrangement of pixels or equivalent visual elements.

This explainer was generated by Manning's knowledge graph from the text of Web Components in Action. The section links point to the parts of the book it draws on.