sync CSS 3D transformations to a WebGL scene

Related tags

Effect gl-css3d
Overview

gl-css3d

Synchronize CSS 3D transformations to a WebGL scene

screenshot

Usage:

var createCSS3D = require('gl-css3d');

// pass an HTML DOM element node, such as an <iframe>
var css3d = createCSS3D(htmlElement, opts);

// assuming you are using stackgl gl-now/game-shell:

// in the gl-init callback:
css3d.ginit(gl)

// in the gl-resize callback:
css3d.updatePerspective(cameraFOVradians, shell_width, shell_height);

// in the gl-render callback:
css3d.render(view, proj);

For an example embedding an iframe run npm start, or try the live demo. The iframe accepts pointer events and can be interacted with as an ordinary webpage. Click the button to toggle mouse inputs to control the camera instead (drag to move, scroll to zoom; uses game-shell-orbit-camera).

Options

  • planeWidth (2), planeHeight (2): size of the plane in world units

  • tint ([0,0,0,0]): color to draw the WebGL object in front of the CSS3D element, defaults to fully transparent

  • blend (false): whether to enable blending, defaults to false so tint is not influenced by the colors of the WebGL scene behind it

  • flipX (true), flipY (true): whether to invert the X and Y axes from WebGL to CSS3D

  • backface (true): whether to include two extra triangles in the WebGL mesh for the rear side of the plane

References

License

MIT

Comments
  • Add a bunny to the demo so its more 3D

    Add a bunny to the demo so its more 3D

    To make the demo more interesting (instead of merely a flat movable plane, which doesn't show it is part of WebGL), demonstrating overlapping 3D, as in this screenshot from voxel-webview for three.js:

    687474703a2f2f692e696d6775722e636f6d2f546c555a5847592e706e67-1

    initial commit reusing the same shader as for the cutout, so the bunny doesn't yet look like this:

    68747470733a2f2f7261772e6769746875622e636f6d2f6d696b6f6c616c7973656e6b6f2f62756e6e792f6d61737465722f696d616765732f62756e6e792e706e67

    opened by deathcap 0
  • Missing CSS transforms on Safari

    Missing CSS transforms on Safari

    On Safari (8.0.3, shown on the right vs Chrome 40.0.2214.111 on the left), none of the CSS transforms take effect:

    screen shot 2015-02-15 at 7 05 08 pm

    but they should be supported, given https://www.webkit.org/blog/386/3d-transforms/

    bug 
    opened by deathcap 0
  • shell.scale = 2

    shell.scale = 2

    Hi. First of all: amazing. This is such a cool way to display complex information in 3d space.

    Anyways, my situation: for lowend devices the scale-property of gl-now is an ideal option. However this needs some hinting for gl-css3d as well. Any idea how to correct gl-css3d when setting shell.scale to 2?

    Screenshot 2019-06-03 at 06 16 49

    opened by coderofsalvation 0
  • Use CSS shaders / filter effects?

    Use CSS shaders / filter effects?

    gl-css3d uses the matrix3d CSS property (via https://www.npmjs.com/package/matrix-to-css), part of http://www.w3.org/TR/css3-transforms/ , but there's a new more powerful specification being developed to allow CSS objects to be shaded directly using WebGL, could be worth investigating:

    http://dev.w3.org/fxtf/custom/

    http://dev.w3.org/fxtf/filters/

    enhancement 
    opened by deathcap 0
  • CSS element becomes invisible if rotated too far on Chrome, works on Safari

    CSS element becomes invisible if rotated too far on Chrome, works on Safari

    screen shot 2015-02-15 at 7 11 24 pm

    Chrome left, Safari right

    Dragging the mouse up-right to rotate. Safari has no problem continuing to show the CSS element as it is rotated further, but in Chrome it disappears, slightly after the position where this screenshot is taken (left)

    Testing with SHOW_GL_PLANE = true, reveals that in Chrome the GL element is visible, but in Safari it always remains below the CSS element:

    screen shot 2015-02-15 at 7 14 48 pm

    however, even with no GL element the CSS element still becomes invisible on Chrome

    bug 
    opened by deathcap 2
  • CSS3D rotation incorrect on Firefox

    CSS3D rotation incorrect on Firefox

    The GL and CSS scenes match on Chrome (40.0.2214.111) but on Firefox (35.0 beta) they do not:

    screen shot 2015-02-15 at 7 02 17 pm

    isolated test case:

    <div style="transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
overflow: hidden;
perspective: 1100px; -webkit-perspective: 1100px;
width: 1024px; height: 910px;"><div style="background-color: red;
position: absolute;
width: 100%;
height: 100%;
transform: 
 translateZ(1100px)
 matrix3d(0.002, 0, 0, 0,
           0, 0.001, 0.002, 0,
           0, 0, -0.5, 0,
           0, 0, -5, 1);
-webkit-transform: 
 translateZ(1100px)
 matrix3d(0.002, 0, 0, 0,
           0, 0.001, 0.002, 0,
           0, 0, -0.5, 0,
           0, 0, -5, 1);

           "></div></div>

    on Chrome, Firefox (tested both 35.0 beta and 38.0a1 2015-02-15 nightly), and Safari respectively:

    screen shot 2015-02-15 at 8 13 11 pm

    bug 
    opened by deathcap 1
Owner
null
GitHub http://deathcap.github.io/gl-css3d
Add a water ripple effect to your background using WebGL.

jQuery Ripples Plugin By the powers of WebGL, add a layer of water to your HTML elements which will ripple by cursor interaction! Important: this plug

Pim Schreurs 976 Dec 30, 2022
Animated haze distortion effect for images and text, with WebGL.

Animated Heat Distortion Effects with WebGL A tutorial on how to use fragment shaders in WebGL to create an animated heat haze distortion effect on im

Lucas Bebber 289 Nov 1, 2022
Some experimental rain and water drop effects in different scenarios using WebGL, by Lucas Bebber.

Rain & Water Effect Experiments Some experimental rain and water drop effects in different scenarios using WebGL, by Lucas Bebber. Article on Codrops

Codrops 1.4k Jan 4, 2023
A JavaScript library for advanced 2D slideshow with WebGL, that provides variety of beautiful effects

gl-slideshow An advanced 2D slideshow with WebGL, provides a variety of beautiful effects with GLSL power. Shaders are forked from https://gl-transiti

Akihiro Oyamada 68 Nov 28, 2022
🧞‍♂️ Your magic WebGL carpet

⚠️ ⚠️ BETA! ⚠️ ⚠️ (Most likely I won't maintain this...) ??‍♂️ Aladino – your magic WebGL carpet Aladino is a tiny (around ~5kb gzipped) and dependenc

Luigi De Rosa 822 Dec 30, 2022
A JavaScript library for advanced 2D slideshow with WebGL, that provides variety of beautiful effects

gl-slideshow An advanced 2D slideshow with WebGL, provides a variety of beautiful effects with GLSL power. Shaders are forked from https://gl-transiti

Akihiro Oyamada 69 Jan 1, 2023
Recreation of the background scale hover effect seen on the DDD Hotel website using CSS clip paths.

Background Scale Hover Effect Recreation of the background scale hover effect seen on the DDD Hotel menu using CSS clip paths. Article on Codrops Demo

Codrops 98 Dec 6, 2022
.qube -- The Quintessential Responsive 3D CSS Cube

.qube Quintessential Responsive 3D CSS Cube Created by @zacharyjohnson — zachstronaut.com Hello web friend! The styles defined in "src/qube.css" provi

Zachary Johnson 63 Dec 17, 2022
:package: Introduction to CSS 3D transforms

Intro to CSS 3D transforms By David DeSandro 3dtransforms.desandro.com Tutorial, examples, and discussion all about CSS 3D transforms. Originally writ

David DeSandro 998 Jan 2, 2023
CSS 3D Dropdown Concept

Makisu An experimental CSS 3D dropdown concept, wrapped up in a jQuery plugin. Check out the demo (you'll need a CSS 3D capable browser, such as Chrom

Justin Windle 1.5k Nov 28, 2022
3D (animated) cube using only CSS (Less), originally used by LeanCloud (aka. AVOS Cloud)

cube.less 3D (animated) cube using only CSS (LESS). Demo See this demo page. There's also a live production site (WIP) using these cubes. Install $ bo

Tunghsiao Liu 54 Nov 14, 2022
Pure CSS animated 3D Super Mario Icon

Pure CSS Super Mario This is the transferred source of a little sideproject I did in 2010. I initially did this without any CSS preprocessor and event

Andreas Jacob 14 Apr 15, 2021
CSS 3D renderer for Three.js.

CSS3D.js by Steven Wittens CSS 3D renderer for Three.js Note: this library is mostly obsolete now that Three.js has its own CSS 3D renderer which is i

null 365 Aug 27, 2022
An old-school arcade-style 3D shoot-em-up rendered entirely with CSS 3D transforms

CSS Space Shooter Play The Game This is an experiment I made to investigate the capabilities of CSS 3D transforms. Having played about with this techn

Michael Bromley 162 Oct 2, 2022
Pure CSS Image Hover Effect Library

imagehover.css A Scaleable & Light Image Hover CSS Library Imagehover.css is a lovingly crafted CSS library allowing you to easily implement scaleable

Ciaran Walsh 1.8k Dec 21, 2022
A slideshow that uses a CSS glitch effect for slide transitions.

Glitch Slideshow A slideshow that uses the CSS Glitch Effect to transition between slides. Article on Codrops Demo Credits Images by Unsplash.com imag

Codrops 111 Dec 16, 2022
Some ideas for modern multi-layer page transitions using CSS Animations.

Multi-Layer Page Reveal Effects Some ideas for modern multi-layer page transitions using CSS Animations. Article on Codrops Demo Sponsor Demo sponsore

Codrops 117 Nov 1, 2022
Pure CSS (no JavaScript) implementation of Android Material design "ripple" animation

Pure CSS ripple effect (no JavaScript) CSS-only implementation of Android Material design "ripple" animation on click event Main advantage of this sol

Mladen Plavsic 334 Dec 11, 2022
CSS loading animations with minimal effort!

Whirl CSS loading animations with minimal effort! whirl is a curation of CSS loading animations(whirls! ?? ). It started as a drop in CSS file to get

Jhey Tompkins 1.4k Jan 4, 2023