Clip3d：使用 css:clip-path 来实现 3D 模型渲染
dy223
10年前
Clip3d：使用 css:clip-path 来实现 3D 模型渲染。
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 propertyclip-pathfor 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 ofclip-path, This experiment is very weak for realworld 3d rendering. __If you have idea with clip3d, please create issue in this repo
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