21. WebAR那些事: ARDemo之《天马行空》

2021-10-13 01:57:26

紧接上文

使用WebAR技术，开发者只需40行代码，即可搭建一个ARDemo。同时我们也抛出了一个问题，如果把地球模型，换成一个可以动的小猫小狗，是不是就更加接近虚拟现实了？

本次Demo所需二维码

本次demo已经集成到APK中，用户可以点击《天马星空》来体验。

天马星空

环境准备

Demo使用r82版本，向下兼容
Three.js 到http://www.threejs.org下载最新源码，这里使用three.min.js作为渲染引擎。
WebVR.js WebVR的工具库，用于切换VR状态（three.js的源码包中，自己拷贝）
VREffect.js WebVR的展示库，用于分屏展示（three.js的源码包中，自己拷贝）
VRControls.js WebVR的控制库，用于监控陀螺仪、Camera、重力等（three.js的源码包中，自己拷贝）

3D模型

之前我们总是使用地球的3D模型，估计各位看官也看腻了，这次终于更新了！

支持动画的3D模型
通过阅读THREE.JS的示例，找到了喜欢的模型，一批奔跑的马儿。

在webgl分类下的shadowmap入口，可以看到官方的demo。

3D模型的格式
本次演示的3D模型，是JSON格式，可以有多种工具生成，比如3DMax、玛雅等。

这种格式虽然方便阅读，缺点也比较明显，将整个文件解析成json后，再转换成内存数据，最后上传到GPU，由于JS语言在运算处理方面的不足，加载过程会稍慢一些。

WebVRSDK支持的3D格式
打开THREE.JS的官方example，可以看到loder分类的3D模型格式，初步可以理解为，只要three.js支持的格式，WebVRSDK也是可以支持的。如果有不支持，请反馈给我，我会及时更新WebVRSDK

兼容性准备

获取摄像头API，目前只支持Navigator.getUserMedia

index.js核心代码

核心代码量约50行，核心代码和《上一篇》基本一致，只是将3D地球的模型，替换成了一批马。

代码参考Three.js，如下

var w = window.innerWidth;
var h = window.innerHeight;
var renderer = new THREE.WebGLRenderer();        // 创建渲染器
renderer.setSize(w, h);                            // 设置渲染器为全屏
document.body.appendChild(renderer.domElement);    // 将渲染器添加到body上

var horse, delta;
var clock    = new THREE.Clock();                // 创建时钟
var scene    = new THREE.Scene();                // 创建场景
var mixer    = new THREE.AnimationMixer(scene);    // 创建混合器
var camera    = new THREE.PerspectiveCamera(45, w / h, 100, 3000);

var control    = new THREE.VRControls(camera);        // 控制器，用来控制摄像机
var effect    = new THREE.VREffect(renderer);        // 控制器，用来控制VR渲染
var loader    = new THREE.JSONLoader();            // 加载器，用于加载3D模型
loader.load("horse.json", function(geometry) {
    var material = new THREE.MeshLambertMaterial({ color: 0xFFAA55, morphTargets: true, vertexColors: THREE.FaceColors });
    horse = new THREE.Mesh(geometry, material);
    horse.speed         = 200;
    horse.position.x = -500;
    
    scene.add(horse);
    scene.add(new THREE.AmbientLight(0x444444));// 创建环境光
    scene.add(new THREE.DirectionalLight(0xFFFFFF, 1, 0));
    mixer.clipAction(geometry.animations[0], horse).setDuration(1).startAt(-Math.random()).play();
});
window.navigator.getUserMedia({ audio : true, video: { width: w, height: h }}, function(stream) {
    var video = document.createElement('video');
    video.src = stream;
    video.play();

    var image = new THREE.VideoTexture(video);
    image.generateMipmaps = false;
    image.format     = THREE.RGBAFormat;
    image.maxFilter  = THREE.NearestFilter;
    image.minFilter  = THREE.NearestFilter;
    scene.background = image;                    // 背景视频纹理
}, null);

animate();
function animate() {
    effect.requestAnimationFrame(animate);
    if (horse) {
        delta = clock.getDelta();
        mixer.update(delta);
        horse.position.z += horse.speed * delta;
        if (horse.position.z > 1000) {
            horse.position.z = -1000 - Math.random() * 500;
        }
    }
    control.update();
    effect.render(scene, camera);
}

效果展示

很想把屏幕录制下来，再制成GIF格式的图片，方便演示，大家有没有推荐的工具软件，最好能直接截屏的那种。
演示的效果，大概是这样子的，一匹马从远处跑来，然后再跑到远处，直至消失。用两张图片大概来演示吧。。

畅想

WebAR入门简单

写这篇文章的时候，我也想不到，只需要50行代码，就可以做一个带有动画的ARDemo，不得不说Three.js太强大了。
那问题来了，既然代码都是用标准的JS写的，而且框架用的是开源的Three.js，那WebVRSDK做了什么？
WebVRSDK是使用C/C++编写的<跨平台><极简><高性能>的<浏览器>内核，大小在400K以下，以WebGL为核心，支持WebGL、Canvas、Video、Audio、XMLHttpRequest、VRDisplay、Camera、ImageDecode等等，但不支持Dom，并且为Three.js/Pixi.js/Tiny.js等做了深度兼容。
所以，前端开发者，只需要在PC浏览器开发、调试通过，就可以快速的移植到WebVRSDK平台。

千锤百炼才是精品

我对JS的理解还属于入门级别，目前写的Demo，基本都是临时学的，不要太当真。
想做好WebAR/VR，还需要前端大牛的支持。
如果有好的产品，欢迎移植&对接WebVRSDK。

下一回

添加个按钮，让AR可以和用户交互，但
加个什么按钮呢？
点击按钮之后，显示什么效果呢？
敬请期待

码农公寓