Ar, gltf tools

GLTF Editors

Примеры от PlayCanvas

Убрать зеленый фон (хромакей, chomakey)

 

var canvas = document.getElementById('cnv');	
var ctx = canvas.getContext('2d',{ willReadFrequently: true });
var video  = document.getElementById('video');

video.addEventListener('play', function () {
    var _this = this; 
    (function loop() {
        if (!_this.paused && !_this.ended) {
            ctx.drawImage(_this, 0, 0,canvas.width,canvas.height*.8);
            var  frame = ctx.getImageData(0, 0,canvas.width,canvas.height);            
            for(var i =0;i<frame.data.length;i+=4){

            	var r = frame.data[i];	
            	var g = frame.data[i+1];	
            	var b = frame.data[i+2];	            	
            	if(r>10 & r<100 & g>100 & g<190 & b<100){
          frame.data[i+3] = 0 // alpha
            	}
            	
            }
            ctx.putImageData(frame,0,0);
          
            requestAnimationFrame(loop);
            // setTimeout(loop, 1000 / 30); // drawing at 30fps
        }
    })();
}, 0);

 

Экспорт в gltf

Cables GL

Новый инструмент для создания и анимации 3D для VR/AR (video). Сайт программы cables.gl. Документация здесь.

Animated rig in Cables.gl (video)

Cable.gl links

Cable gl tutors channel

Говорящее облако (видео урок)

Анимация 3D линий (пример, код)

 

Other lessons with Cable.gl

 

GLTF Animation with Three.js

Большая статья с разбором кода

New AR tools in web

Artivive tool for create AR posters (video). Сайт проекта здесь.

How to use Artivive AR tool