Clip3d

3D rendering with css:clip-path

clip3d is still in very very experimental stage__

SnapShot.gif

Introduction

This project is Absolutely inspired by famous species-in-pieces, I find that we can use property clip-path for rendering triangle. So, It can also rendering 3d model too, beacuse 3d model can generated by triangles.

Demo below doesn't use any css property for 3d transform, It is all clip-path. the pipeline is very similiar with the common 3d model rendering.

model coord -> global coord -> camera coord -> projection(frustum) -> backface excluding/z-sorting/lighting.

Beacuse of the restrictions of clip-path , This experiment is very weak for realworld 3d rendering. __If you have idea with clip3d, please create issue in this repo

Demo on Codepen

source

var Render = clip3d.Render,
  Light = clip3d.Light,
  Camera = clip3d.Camera,
  vec3 = clip3d.vec3,
  mat4 = clip3d.mat4,
  _ = clip3d.util,
  color = clip3d.color;

var render = new Render({
  parent: document.getElementById("app"),
  camera: new Camera({
    eye: [4,4, -10]
  }),
  // simple point-lighting
  light: new Light({
    position: [ 0, 0, -1 ],
    color: [255, 255, 255,1]
  }),
  // http://learningwebgl.com/blog/?p=370 
  // entity form learning webgl
  entities: [
    {
      vertices: [ 
        0,  1,  0,
        -1, -1, 1,
        1, -1,  1,

        0,  1,  0,
        1, -1,  1,
        1, -1, -1,

        0,  1,  0,
        1, -1, -1,
        -1, -1, -1,

        0,  1,  0,
        -1, -1, -1,
        -1, -1,  1,

        // warning the squence
        1, -1,  1,
        -1, -1, 1,
        -1, -1, -1,

        1, -1, -1,
        1, -1,  1,
        -1, -1, -1,

      ],
      colors: [
      ]
    },
    {
      vertices: [ 
  // Front face
      -1.0, -1.0,  1.0,
       1.0, -1.0,  1.0,
       1.0,  1.0,  1.0,
      -1.0,  1.0,  1.0,

      // Back face
      -1.0, -1.0, -1.0,
      -1.0,  1.0, -1.0,
       1.0,  1.0, -1.0,
       1.0, -1.0, -1.0,

      // Top face
      -1.0,  1.0, -1.0,
      -1.0,  1.0,  1.0,
       1.0,  1.0,  1.0,
       1.0,  1.0, -1.0,

      // Bottom face
      -1.0, -1.0, -1.0,
       1.0, -1.0, -1.0,
       1.0, -1.0,  1.0,
      -1.0, -1.0,  1.0,

      // Right face
       1.0, -1.0, -1.0,
       1.0,  1.0, -1.0,
       1.0,  1.0,  1.0,
       1.0, -1.0,  1.0,

      // Left face
      -1.0, -1.0, -1.0,
      -1.0, -1.0,  1.0,
      -1.0,  1.0,  1.0,
      -1.0,  1.0, -1.0
      ],
      indices : [
        0, 1, 2,      0, 2, 3,    // Front face
        4, 5, 6,      4, 6, 7,    // Back face
        8, 9, 10,     8, 10, 11,  // Top face
        12, 13, 14,   12, 14, 15, // Bottom face
        16, 17, 18,   16, 18, 19, // Right face
        20, 21, 22,   20, 22, 23  // Left face
      ],
      itemSize: 3,
      // for simplify. one face only have one color
      colors: [
        [255, 0, 0, 1],
        [255, 0, 0, 1],
        [255, 255, 0, 1],
        [255, 255, 0, 1],
        [0, 255, 0, 1],
        [0, 255, 0, 1],
        [255, 120 , 255, 1],
        [255, 120 , 255, 1],
        [120, 255, 0, 1],
        [120, 255, 0, 1],
        [0, 255, 120, 1],
        [0, 255, 120, 1]
      ],
      matrix: mat4.createRotate([0,0,1], 30)
    }
  ]
})

var i = 0;



function run(){
  i = i + .8;
  // vec3.rotateY(render.camera.eye, 1);
  // render.camera.update();
  render.entities[0].matrix =  mat4.rotate(
      mat4.translate(
       mat4.createScale(.2),
       4,0,0), 
  [1,1,0], i*3)


  // render.light.position = vec3.rotateY(position,  i, []);
  // console.log(render.light.position, i, position)

  render.entities[1].matrix =  mat4.translate(mat4.createRotate([1,0,1], i*2), 2,2,0)
  render.render();
  // setTimeout(run, 1000)
  _.requestFrame(run)
}

run();

Usage

AMD
Commonjs
GLobal

Feature

basic vector3 and matrix4 operation, like rotate， lookAt, perspective
only fragment color is supported
simple light
simple backface excluding
simple z-sorting based on z-index

WARNING

License

MIT

leeluolee/clip3d

leeluolee

Reviews

Repository Details