3D rendering with css:clip-path
clip3d is still in very very experimental stage__
SnapShot.gif
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
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]
}),
// https://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();
-
AMD
-
Commonjs
-
GLobal
- 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
MIT