Thursday, July 17, 2014

WebGL CSS3D Hybrid part2


Despite WebGL having been around since 2011, you probably do not run into many websites with 3D. And when you do, its likely a fullscreen game or demo, not a typical website. Traditional web technologies do not mix well with WebGL. Libraries like Voodoo.js try to bridge this gap by allowing you to insert 3D objects inside a normal webpage. Voodoo.js graphics are not anti-aliased when rendering with WebGL, the contrast with the rest of the smooth text and graphics on a webpage then becomes very harsh and downright ugly.

Threepy is an experimental library built on THREE.js that allows some HTML and CSS to be mixed together with WebGL rendering and post-processing FX. The library wraps many standard HTML element types with special hacks like: callbacks, catching events, and rendering to proxy clones. Not every combination of HTML and CSS is compatible with this method. The video below tests the basic UI elements: checkboxes, text input, select drop down lists, number input, color selector, tab menus, slider controls, images and videos. Works with GoogleChrome and NodeWebkit.

7 comments:

  1. Interesting ! But once again I see one more file dropped somewhere in the PythonJS repository. IMHO, one big repository for all your works is not clean for an outsider that would like to have a look or even just try to use the compiler of PythonJS.

    Do you plan to seperate the pythonjs compiler from all the rest (IDE, additional libs, webgl stuff, Lua support, ...) ?

    ReplyDelete
    Replies
    1. The pythonjs compiler exists on its own as an NPM package. There are two small example projects on github that compile with the NPM package, have a look at:
      https://github.com/PythonJS/pythonjs-demo-server-nodejs
      https://github.com/PythonJS/pypubjs

      If you git clone the repo, then you also get the regression tests folder, which contains many tests large and small.

      Delete
    2. Ok but I want to serve compiled javascript directly from a python web application.
      I checked the pypi PythonJS package but it seems buggy.

      $ pythonjs
      File "/private/tmp/1/.env/lib/python2.7/site-packages/pythonjs/pythonscript.py", line 4, in
      from pythonjs.python_to_pythonjs import main as python_to_pythonjs
      ImportError: No module named python_to_pythonjs

      and

      > import pythonjs
      > dir(pythonjs)
      > ['__builtins__', '__doc__', '__file__', '__name__', '__package__', '__path__']

      Maybe the pypi package is not up to date but in the python world, people just want to `pip install` :-)

      Delete
    3. We are looking for somebody to maintain and keep the PyPI package up to date, it has not been updated since: 2013-11-11
      https://github.com/PythonJS/PythonJS/issues/69

      Delete
  2. Do you know if or tried using pointer-events:none on the webgl canvas to avoid needing to have 2 css3d layers?
    https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

    ReplyDelete
  3. @mkeblx
    I gave pointer-events a try and it works setting it to none. now only a single bottom css3d layer is required.
    https://github.com/rusthon/Rusthon/commit/5a01fc9cef4ac9340b464bc4da6050b3d6b167b4

    ReplyDelete
    Replies
    1. i just posted a live demo here:
      http://rusthon.herokuapp.com/

      Delete