Clip3d：使用 css:clip-path 來實現 3D 模型渲染
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