CSS Based Material System

CSS Based Material System for 3D graphics

The following three types of material systems can be found in 3D rendering systems:

Fixed-function shading
Shade trees
Programmable shaders (directly or indirectly)

3D graphics on GPUs have evolved from a fixed-function pipeline to a fully generic pipeline with multiple programmable stages. The common low-level APIs (OpenGL and DirectX) have taken this into account and all fixed functionality has vanished in recent versions. For instance WebGL, which is based on OpenGL ES 2.0, provides no semantics at all and does not deliver a result unless vertex and fragment shaders are given.

All three approaches have their pros and cons. The Dec3D community group aims to evaluate, which approaches are most suitable in order to

fit into the Web Technology stack (CSS, HTML, SVG and related proposals)
satisfy the requirements from the collected uses cases

Another aim is trying to harmonize the activities that have recently popped up (s. below) to come to a solution that might be suitable for already existing Web Technologies.

Related W3C approaches, proposals & working drafts

HTML

The current material system of HTML is "fixed-function shading". The appearance of HTML objects is controlled by a fixed set of CSS parameters that allows the description of colors, borders, backgrounds etc. The interfaces to CSS are string based and it is not possible to extend the CSS Stack with arbitrary new CSS parameters. It is possible to animate certain CSS parameters with [CSS3 Transitions].

Filter Effects 1.0

The Filter Effects 1.0 Working Draft allows the application of a filter chain to an image. The draft includes a set of predefined basic filters that may be composed to more complex filters. The complex filters are composed with DOM elements. Basic Filters, Composed Filters and the concatenation of filters can be assigned to an element via CSS. Although originally designed for use in SVG, filter effects could also be applied to HTML elements and other environments that take a 2D images as input.

How does it relate to Dec3D?

Allows the description of complex appearances in a graph style
Assignment of complex material descriptions via CSS

CSS Shader Effects

The Adobe CSS Shader Effects Proposal extends the filter functions by a 'custom' filter (might be renamed to shader later). This filter adds programmability to the Filter Effects graph. The input is the rendered SVG/HTML box as an image plus an implicit mesh geometry. The granularity of the mesh geometry can be configured. Also a selection of other possibly useful shader parameters are passed to the custom shaders (projectionMatrix, texture coordinates etc). The examples are based on the OpenGL ES Shading Languages and mappings between shader parameter types and OpenGL ES types are given.

How does it relate to Dec3D?

Adds programmable shading to the W3C stack
Adds generic parameter definitions with CSS