CSS 3D look

Bytes

The emergence of HTML5 and CSS achievements (such as transition, animation, deformation, text shadow, graphic shadow, gradient and SVG) greatly enhances the richness of HTML graphics and interactions. Now you can use it in CSS and HTML.
Filter effect of SVG *
Filter effects 1.0 *, in addition to SVG, other effects on webpage content, such as grayscale, Brown, and color phase rotation, are gradually becoming possible. There are also more advanced special effects, as shown in figure 1 below to show you the effect of a clear profile, it is also possible.

Figure 1.SVG content with a filter effect, transferred from the svg-wow.org site

Adobe
The CSS shader * has been submitted to the W3C FX team. The CSS shader defines a scalability mechanism for filtering effects. It provides rich and easy-to-implement animated visual effects for all HTML5 content.
CSS animation * and CSS excessive *.

The following video shows you how the CSS shader makes HTML content speak:

CSS coloring er page turning effect)

Show map effect with CSS coloring tool)

Display the twiter Data Source with CSS coloring tool)

This article describes what the CSS coloring tool is and how it works. A sample code will be included in the process, it also involves how to create custom effects using the CSS shader and write your own custom shader.

Notes:This is a job in progress, and we will make some changes as we continue to discuss more extensively with society. The syntax used in this article reflects the suggested syntax of the CSS shader, but it is likely to evolve with discussions with W3C FX specialists and extensive communities. Also note that, by convention, the prefix of all proposed new attributes in our WebKit prototype will be added-webkit-Prefix. For simplicity, I will omit this prefix for the rest of this article.

Filter effects 1.0

To make it easier to understand the CSS shader, it is necessary to understand the filter defined in advance. The following example shows a simple filter effect: move the mouse over it, you can see a simple grayscale gradient of content.

Demonstration of grayscale gradient effect (0: 06)

The method for using this filter is simple:filterAttribute defines a filter (or a series of filters) for the content ). You can see that it is very easy to integrate with CSS animation.filterAttributes can be animated as animation parameters.
In this example,grayscale()The filter is called to gradually fade out the animation. The reason is that when the user clicks the target element, the parameters of the filter functionamountFrom 1 (completely grayscale) to 0 (no grayscale ).
W3C filter effects 1.0 defines the following two definitions:

 

 
  
As a general syntax for defining filters, the basic filter is integrated into a graph.
 
  
CSSfilterAttribute is an index of a defined filter. You can pass one or more filters to it.

 
You can pass a series of filter methods to thisfilterAttributes, such as blur, drop-shadow, gamma, grayscale, Hue-rotate, invert ), opacity, saturate, Sepia, and sharpen.

 

 
  
Blur (5, 5)
 
  
Drop-shadow (10, 5, 5)
 
  
Hue-rotate (328deg)
 
  
Saturate (5)
 
  
Invert (1)
 
  
Grayscale (1)
 
  
Opacity (0.5)
 
  
Gamma (1.1, 3.6, 0)
 
  
Sepia (0.5)

 

Figure 2.Filter effect function effect
The beauty of the filter effect lies in its simplicity and syntax. It is quite easy to integrate with the CSS animation gradient.
However, it is difficult to implement some effects. For example, how can we convert only a part of the content into a gray scale? Or how can we achieve a different gradient of content, such as content scanning? Or do you want to achieve the filter effect in the pre-defined filter bag? This is why the CSS coloring tool was born.
The CSS shader proposes to add a custom method to the filtering effect set of the predefined filter and CSS animation transition.custom(). The CSS shader provides flexibility and expressiveness for creating any effect, and it can be used to achieve the simplest and most complex effects.
CSS pasters implement advanced Effects
Here I start with an example. The gray-scale effect example mentioned above is very good, but it still has room for improvement. The video below shows a more powerful effect: As the content changes from gray scale to color gradient, it will flash a few times, while a color effect swept from the bottom to the top.

In this example, a vertex shader is used to achieve the flashing effect, and a pixel shader is used to achieve color sweep. Both are referenced through the custom filter, which also carries parameters to facilitate the configuration of the color filter. The following code is used:
We will discuss the coloring rule in detail later. At present, it is important to let you know what effects each shader has brought to you, and to expose parameters for CSS control.
In this example, the custom filter is usedwobble.vsVertex coloring machine for deformation,color-swipe.fsThe fragment colorant implements the switching from Gray to constant color scanning.
What is the colorant?
Paintors are common in 3D graphics and they (generally) small programs that process 3D geometric surfaces (vertex pasters) and color pixels (fragment pasters.
For example, the vertex coloring er can achieve the flat effect on the surface, as shown in the preceding example. The fragment shadow (usually called the pixel shadow) can be used to control the color of a pixel in any way. The CSS coloring tool can drive powerful functions of hardware-accelerated coloring tool software.
How does the CSS shader work?
With the CSS shader, you can turn your HTML and SVG elements into a vertex mesh (in step 2), which can achieve various deformation, even if it is possible in 3D scenarios. Step 3: The mesh can be rendered (or merged) and colored by pixels to the fragment shader.

Figure 3.The processing model of the CSS shader.
As a developer, you can control the granularity of the grid, and you can define parameters to control the coloring er. In this example, filter parameters are set for elements with a color device ID:
custom(url('wobble.vs')        /* wobble effect */           url('color-swipe.fs'), /* swipe effect  */           40 40,                 /* mesh lines/cols */           amplitude 60,          /* wobble strength */           amount 0.0);           /* effect amount */
wobble.vsAndcolor-swipe.fsIt is set internally in the shader. When the parameter is 0, there will be no tumble or pixel coloring devices in the overall gray scale of the content. Wobble. Vs and the color-swipe.fs shader are set internally, when the parameter is 0, the content will not have any tumble and pixel shader overall grayscale.
When the user clicks the target content, its filter attribute is set:
custom(url('wobble.vs')        url('color-swipe.fs'),        40 40,        amplitude 60,       amount 1) 
Again, we will remind you that the meanings of those parameters will vary with the shader. In this example, the author of the original coloring er sets that if the parameter is 0.5, the tumble will reach the maximum effect. If the parameter is 1, the action will become static. The color sweep coloring tool is like this: between 0.0 and 1.0, the effect transitions from the bottom to the top with a shine curve. Observe the video above to better understand the visual effect.
As in the example of the grayscale filter mentioned above, it is also very simple to implement the effect with CSS integration, as long as the gradient attribute is used.
Develop a coloring er
In actual development, most people will configure parameters to make full use of the perfect custom effects provided by the coloring tool, as shown in the preceding example.
It is not that difficult to develop the coloring tool and do some practices from it. In fact, one of the secrets is that you will enjoy endless fun in this process.
The development language of the coloring tool is openlg es language *, and development
The webgl * shader uses the same language. Here is an example of the vertex shader used in the above rolling effect.
If you do not know about the shader, the following terms can help you understand this example:

  

 
   
Vertex :( vertex)Geometric coordinates for processing by the coloring Tool
 
   
Texture: (grating image ).The CSS shader converts the rendering of elements into materials for vertex and fragment pasters to process.
 
   
Attributes: (attribute)Transmits the parameters of each vertex to the vertex shader.
 
   
Uniform: (Global parameter)The M () method is used to transmit global parameters of all vertices and faces to the coloring er.
 
   
Projection Matrix: (projection matrix)Is a coordinate system coordinate matrix that converts the coordinates of normalized vertices (along each coordinate axis [-0.5, + 0.5] S) back to the coordinates of the actual angle of view.

  
precision mediump float; /* required */// ================= Per-vertex attributes =================== //attribute vec3 a_position; /* The vertex's coordinates */attribute vec2 a_texCoord; /* The vertext's texture coordinate */// Uniform parameters are available to shaders and have the // same value for all vertex or pixel.uniform mat4 u_projectionMatrix; /* The projection matrix */// ================ Shader parameters ======================== //uniform float amplitude;uniform float amount;// ============== End shader parameters ====================== //const float rotate = 20.0; /* could be made a uniform   */                            /* to allow control form CSS */const float PI = 3.14...;varying vec2 v_texCoord;mat4 rotateX(float f) {...}mat4 rotateY(float f) {...}mat4 rotateZ(float f) {...}void main(){            v_texCoord = a_texCoord.xy;    vec4 pos = vec4(a_position, 1.0);        float r = 1.0 - abs((amount - 0.5) / 0.5);    float a = r * rotate * PI / 180.0;    mat4 rotX = rotateX(a);    mat4 rotY = rotateY(a / 4.0);    mat4 rotZ = rotateZ(a / 8.0);        float dx = 0.01 * cos(3.0 * PI * (pos.x + amount)) * r;    float dy = 0.01 * cos(3.0 * PI * (pos.y + amount)) * r;    float dz = 0.1 * cos(3.0 * PI * (pos.x + pos.y + amount)) * r;    pos.x += dx;    pos.y += dy;    pos.z += dz;        gl_Position = u_projectionMatrix * rotZ * rotY * rotX * pos;}
Here is the color used in that example to sweep the color into the shadow code:
precision mediump float; /* required */// The 'original' content rendering in a texture.uniform sampler2D s_texture;// ================ Shader parameters ======================== //uniform float amplitude; /* unused in this fragment shader */uniform float amount;// ============== End shader parameters ====================== //varying vec2 v_texCoord;// The desired 'color swipe' color.const vec4 swipeColor = vec4(1.0, 1.0, 1.0, 1.0); vec4 grayscale(vec4 color) {    ...;     return gray;}void main() {    vec4 color = texture2D(s_texture, v_texCoord);    vec4 gray = grayscale(color);    vec2 pos = v_texCoord;    float p = 1.0 - pos.y; /* progress from bottom to top */        vec4 sc = swipeColor * color.a;    float threshold = amount * 1.2;    if (p < threshold) {        float a = min(abs(threshold - p) / 0.2, 1.0);            gl_FragColor = mix(sc, color, a);    } else {        float a = min(abs(threshold - p) / 0.005, 1.0);        gl_FragColor = mix(sc, gray, a);    }}
There are a lot of good resources on the Internet that will be helpful for your coloring tool development. All the class libraries also contain great coloring tool suites (see the link at the bottom of the article)
The coloring language, such as OpenGL ES, makes visual effect development simple. The CSS coloring tool closely connects these great presentation elements with CSS syntaxes, making it very easy to produce these effects.
Comparison with webgl
Webgl * provides an HTML5 Canvas Element implementation solution, which provides a 3D context for the canvas. In this context, you can access the pixel coloring tool (and other Vertex coloring devices and other 3D features provided by webgl). The scope of webgl is only in canvas *
.
In stark contrast, the CSS shader can apply any shader to any webpage content.
What should I do next?
Adobe, as a member of FX's main force, is contributing the CSS shader to W3C. Our goal is to contribute code to WebKit once it is affirmed by W3C, in this way, website developers will soon be able to benefit from this new and powerful filter effect set.
At the same time, you may want to refer to the following resources for more information about CSS animation and special effects:

  

 
   
FX Task Force *
 
   
CSS animations *
 
   
CSS transitions *
 
   
Filter effects 1.0 *
 
   
CSS 2D transforms *
 
   
CSS 3D transforms *
 
   
OpenGL ES 2.0 *
 
   
OpenGL ES shading language * (PDF)
 
   
Webgl *
 
   
Webgl wiki *
 
   
Glfx. js *

  
+
This article complies with the 3.0 unported license (Creative Commons Attribution-non‑cial-Share Alike 3.0 unported license) license conditions. Other license conditions that are applicable to the code examples included in this article but beyond the scope of this License can be found in Adobe.
About the author
Vincent is committed to the internet standard project and is now working in the CSS Working Group, FX special team, and SVG Working Group. He is currently working on CSS shaders, CSS regions, CSS exclusions, and Scalable Vector Graphics (SVG. Before joining Adobe, Vincent worked for Oracle, mainly engaged in graphic, interactive, and user interface animation production in the field of business intelligence. He made a large number of complex datasets intuitive and understandable, allows you to easily set browsing data, detect trends, or detect exceptions. Before joining Oracle, Vincent
Microsystems works, where he focuses on graphics, animation, and interaction technologies. Among them, Java 2D API and SVG format are his most important concerns.
Vincent, with the support of Apache (with the support of the Software Foundation), jointly initiated and led the batik project, an open-source Java toolkit for controlling, viewing, or Code Conversion of SVG content. Vincent has made great contributions to the development of the SVG specification and its version on mobile devices-SVG micro-simplified version (SVG Tiny. He is responsible for the complex document format (CDF) at the World Wide Web Consortium (W3C. Vincent or
Java 2D API graphics(Java 2D API graphics) He is always enthusiastic about graphic design.