[csswg-drafts] [css-shapes-3] 3D shapes (#8652)

brandonmcconnell has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-shapes-3] 3D shapes ==
## Table of Contents

- [Introduction](#introduction)
- [Syntax and APIs](#syntax-and-apis)
  - [Predefined Shapes](#predefined-shapes)
  - [Composable Shapes](#composable-shapes)
- [Background and reasoning](#background-and-reasoning)
- [Recommended Shapes](#recommended-shapes)
- [Concluding Thoughts](#concluding-thoughts)

<h2 name="introduction">Introduction</h2>

This feature suggestion aims to explore the possibility of incorporating 3D shapes into CSS, which would expand the visual design capabilities of CSS and provide developers with more flexibility when creating 3D objects on the web. The suggestion includes new shape functions for commonly used 3D shapes such as spheres, ellipsoids, cubes, and cuboids and an API to create custom 3D polygons with specified 3D coordinates.

<h2 name="syntax-and-apis">Syntax and APIs</h2>

The suggested syntax and APIs for defining 3D shapes in CSS are as follows:

<h3 name="predefined-shapes">Predefined Shapes</h3>

* `shape: sphere(radius)`
* `shape: ellipsoid(rx ry rz)`
* `shape: cube(side)`
* `shape: cuboid(width height depth)`

#### Examples

```scss
.sphere    { shape: sphere(5rem);              }
.ellipsoid { shape: ellipsoid(5rem 3rem 2rem); }
.cube      { shape: cube(4rem);                }
.cuboid    { shape: cuboid(5rem 3rem 2rem);    }
```

<h3 name="composable-shapes">Composable Shapes</h3>

`shape: polygon3d(coordinates [/ curvature], ...)`

#### Examples

```scss
.simple-custom-polygon {
  shape: polygon3d(
    1rem 2rem 3rem,
    4rem 5rem 6rem,
    7rem 8rem 9rem
  );
}
.curved-custom-polygon {
  shape: polygon3d(
    1rem  2rem  3rem  / 0 0 0,
    4rem  5rem  6rem  / 0 0 0,
    7rem  8rem  9rem  / 2rem 2rem 2rem,
    10rem 10rem 10rem / 5rem 5rem 5rem
  );
}
```

A syntax like this might be the simplest looking, but I am still considering if there's a better way to define the coordinates and curvature of the shape. I'm also considering if it would be better to use a different name for the `polygon3d` function, as it's not a polygon in the traditional sense.

One alternative syntax could be `shape: custom(path)` where the syntax `path` is more akin to SVG command-like syntax. Here is what I've come up with so far, but I'm still not sure if this is the best way to go about it:

* **M:** Move to a 3D point (x, y, z)
* **L:** Line to a 3D point (x, y, z)
* **C:** Cubic Bezier curve with control points (x1, y1, z1), (x2, y2, z2), and end point (x, y, z)
* **Q:** Quadratic Bezier curve with control point (x1, y1, z1) and end point (x, y, z)
* **Z:** Close the path (optional, or have the path automatically close if the first and last points are not the same)

#### Example

```css
.some-shape {
  shape: path(
    M 1rem 2rem 3rem
    L 4rem 5rem 6rem
    Q 2rem 2rem 2rem, 7rem 8rem 9rem
    C 5rem 5rem 5rem, 3rem 3rem 3rem, 10rem 10rem 10rem
  );
}
```

Perhaps it would even make sense to have both syntaxes coexist, where the `polygon3d` syntax is more for simple shapes, and the `path` syntax is for more complex shapes. It would also be crucial to include a way to create polygons and paths that can be multi-sided (i.e., have multiple faces).

<h2 name="background-and-reasoning">Background and reasoning</h2>

Introducing 3D shapes in CSS would provide developers the tools to create more visually engaging and interactive web experiences. Currently, developers often rely on JavaScript libraries or WebGL to create 3D elements on the web, but having native support for 3D shapes in CSS could streamline the process and make it more accessible to a broader range of developers.

I think the consensus is "3D is hard," and that's why many of us haven't done much in the 3D space. And that's one of the core reasons this proposal could be groundbreaking. This could take the complexity out of 3D and make it accessible to a broader range of developers. I'm not suggesting that it would be easy to spec or implement, but it would make 3D shapes more attainable for a much wider range of developers than we've seen.

<h2 name="recommended-shapes">Recommended Shapes</h2>

I think it would be best to include the following predefined shapes in the initial implementation of this feature:

* Sphere
* Ellipsoid
* Cube
* Cuboid
* (and some way to create custom shapes)

These shapes represent a foundational set of 3D primitives that can be combined and manipulated to create more complex models. The custom 3D polygon API will also enable developers to define 3D shapes using a list of 3D coordinates, providing the flexibility to develop more advanced and customized shapes.

<h2 name="concluding-thoughts">Concluding Thoughts</h2>

Introducing 3D shapes in CSS would significantly advance the web's visual design capabilities, empowering developers to create more engaging and interactive experiences.

This feature would be a great addition to CSS. Most of this, with as much thought as I've given it, is a rough-rough-rough draft of what this feature could look like, but I certainly see 3D being core to one of the next evolutions of the language. CSS is already moving toward greater 3D shape support with the introduction of 3D transform properties and the recent surge in trigonometric functions, many of which would be helpful when creating 3D shapes.

Plenty more to think through, but even if something like this stays on the back burner for years to come, I wanted to get the ball rolling and see what ideas the community has regarding 3D shapes and what syntax(es) might be best to consider.

[`css-shapes-2`](https://drafts.csswg.org/css-shapes-2/) is already in the W3C Editor's Draft stage, so it seems the timing is right to start thinking about the next cycle of changes to come in `css-shapes-3`. And as coincidence would have it, if 3D shapes make it into `css-shapes-3`, we'll inevitably follow in the footsteps of all those cheesy movie trilogies in the mid-2000s that felt compelled to make their third installment in 3D.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8652 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 28 March 2023 06:58:06 UTC