⚡ Volume.js — Light Fast
WebGL/GPU Engine ⚡
21 KB (Gzip)!

🙂 Beginner friendly. ☕

How to load *.GLB model


									// window.onload = function() {
					
					engine_init({look_angle: 1}); 
					
					actor_init({load: "./glb/tent.glb", scale: 0.2});
					
					actor_init({load: "./glb/barrel.glb", scale: 0.2, pos: vec(-20, -1, 0)});
					
					
					
					//

Triangles


									// window.onload = function() {
							engine_init(); 
							var figure = actor_init();
							shape_set_triangles(figure.shape, [
								{w1: vec(-15, -15, 0), w2: vec(15, -15, 0), 
									w3: vec(15, 15, 0), color: hex("#92C600")},
									
								{w1: vec( 15,  15, 0), w2: vec(-15, 15, 0), 
									w3: vec(-15,-15, 0), color: hex("#D8F281")},
							]);
					// }

How to add shapes


									engine_init({look_angle: 1}); 
					actor_init({
						shape: build_ring_shape({
							radius1: 10, radius2: 20, color: vec(1, 0, 0.5),
						})
					});
					
					// build_ring_shape - build-it figure,
					// but you can build any other own.

How to add shapes 2


									engine_init({look_angle: 1}); 
					for (var i = 1; i < 10; i++) {
						var factor = i / 9;
						actor_init({
							shape: build_ring_shape({
								radius1: i * 3, radius2: i * 3 + 1, 
								color: vec(factor, 0, 1),
								thetaLength: Math.PI * 2 * factor
							})
						});
					}

Mouse ray to plain hit


									engine_init({look_angle: 1}); 
					
					actor_init({load: "./glb/tree_low.glb", scale: 0.1});
				
					var ring = actor_init({
						shape: build_ring_shape({
							radius1: 0, radius2: 4, color: vec(1, 0.7, 0)
						})
					});
				
					gl.canvas.onpointermove = function(ev) {
						var ray = engine_mouse_ray();
						var hit = ray_to_plane_hit(ray, vec(), vec(0, 0, 1));
						if (hit) ve_set(ring.pos, hit.x, hit.y, ring.pos.z);
						engine_paint_once();
					}
					
					// debug plain
					actor_init({shape: build_chess_shape(), pos: vec(0, 0, -0.1)});

Ray to GLB hit

BVH is using. BVH is built automatically on first ray cast.


									engine_init({look_angle: 1.3}); 
					var terrain = actor_init({load: "./glb/terrain.glb", scale: 80,
						glb_color: hex("#ffb100")});
				
					var flag = actor_init({load: "./glb/flag.glb", scale: 0.35});
				
					gl.canvas.onpointermove = function(ev) {
						var hit = ray_to_actor_hit(engine_mouse_ray(), terrain);
						if (hit) {
							ve_set(flag.pos, hit.x, hit.y, hit.z);
							// Наклон флага
							quat_from_vectors(flag.quat, 
								vec(0, 0, 1), hit.triangle.normal);
							matrix_from_quat(flag.matrix, flag.quat);
							engine_paint();
						}
					}

Instancing


									engine_init({look_angle: 1}); 
					
					var tree_shape = shape_init({load: "./glb/tree_low.glb"});
					
					for (var i = -10; i < 10; i++) {
						actor_init({
							shape: tree_shape, scale: 0.1, 
							pos: vec(i * 4, rand(0, 25), 0)
						});
					}
					
					// tent
					actor_init({load: "./glb/tent.glb", scale: 0.1, pos: vec(0, -20, 0)});
					// base plain
					actor_init({shape: build_chess_shape()});

Rotation with euler angles


									engine_init({look_angle: 1.2, autorun: 1}); 
					
					var coin = actor_init({load: "./glb/coin.glb", scale: 0.5});
					
					coin.animator = function() {
						this.rotation.z += 0.05;
						actor_update_rotation(this);
					}
					
					// base plain
					actor_init({shape: build_chess_shape()});

Rotation with quaternions


									engine_init({look_angle: 1, autorun: 1}); 
					actor_init({shape: build_chess_shape()});
					
					var coin = actor_init({load: "./glb/flag.glb", 
						scale: 0.3, pos: vec(0, 0, 4)});
						
					var angle = 0;
					var vector = ve_normalize(vec(1, 0, 1));
					
					coin.animator = function() {
						actor_rotate_to_angle(coin, vector, angle += 0.02);
					}

Engine main data structures


									/*
					class Actor    { pos; rotation; scale; } // - moveable object
					class Shape    { triangles; } // - lading geometry
					class Triangle { w1; w2; w3; color; } // - triangle
					class Ray      { origin; direction; } // - ray
					class Vector3  { x; y; z; } // - vector
					*/
					engine_init({look_angle: 1}); 
					actor_init({load: "./glb/rocks.glb", scale: 0.2});

Quaternions


									engine_init({look_angle: 1.2, autorun: 1}); 
					
					var flag1 = actor_init({load: "./glb/flag.glb", 
						scale: 0.35, pos: vec(-25, 0, 0)});
					var flag2 = actor_init({load: "./glb/column.glb", 
						scale: 0.25, pos: vec(0, 0, 0)});
					var flag3 = actor_init({load: "./glb/flag.glb", 
						scale: 0.35, pos: vec(25, 0, 0)});
					
					flag1._angle = 0;
					flag2._time = 0;
					
					flag1.animator = function() {
						// Q 1
						flag1._angle += 0.02;
						quat_from_angle(flag1.quat, vec(0, 0, 1), flag1._angle);
						matrix_from_quat(flag1.matrix, flag1.quat);
						// Q 2
						flag2._time += 0.01;
						quat_from_angle(flag2.quat, vec(1, 0, 0), Math.sin(flag2._time));
						matrix_from_quat(flag2.matrix, flag2.quat);
						// Combination
						quat_multiply(flag3.quat, flag2.quat, flag1.quat);
						matrix_from_quat(flag3.matrix, flag3.quat);
					}
					// base plain
					actor_init({shape: build_chess_shape()});

Camera Look To


									engine_init({}); 
					actor_init({shape: build_chess_shape()});
					actor_init({load: "./glb/flag.glb", scale: 0.35});
					
					// Look From To
					var from = vec(0, 0, 100);
					var to = vec(0, 0, 0);
					engine_look_to(from, to);

Next version in development:

GLB Animations

Massive Point Lights

Custom shader materials

Global Illumination

Mesh Simplificator

Volume.js

License: EULA
1. Can be pubished _only_ in minified form as part of bigger project.
2. Free for personal and commercial use.

⚡ Volume.js — Light Fast WebGL/GPU Engine ⚡ 21 KB (Gzip)!