`
JerryWang_SAP
  • 浏览: 1025200 次
  • 性别: Icon_minigender_1
  • 来自: 成都
文章分类
社区版块
存档分类
最新评论

150行JavaScript代码实现增强现实

阅读更多

增强现实技术(Augmented Reality,简称 AR),是一种实时地计算摄影机影像的位置及角度并加上相应图像、视频、3D模型的技术,这种技术的目标是在屏幕上把虚拟世界套在现实世界并进行互动。这种技术1990年提出。随着随身电子产品CPU运算能力的提升,预期增强现实的用途将会越来越广。

本文介绍使用JavaScript开源框架AR.js实现的增强现实的Hello World例子。

先看效果:

首先在手机浏览器里打开我部署在github page上的这个demo应用:

https://i042416.github.io/FioriODataTestTool2014/WebContent/098_ar.html

我用的是Android手机安装的Chrome浏览器。

 

打开网页,会提示你是否允许这个网页应用访问您的手机摄像头。点击允许:

 

用手机上的摄像头扫描这张图片:

 

神奇的事情就发生了。您会看到,通过手机摄像头望过去,手机屏幕里会出现一个新的不断滚动的3D物体,如下图所示。

 

下面具体介绍这个最简单的例子是怎么开发出来的。

所有的源代码在我的github上:

https://github.com/i042416/FioriODataTestTool2014/tree/master/WebContent/ar

新建一个html文件,把下列150行代码粘贴进去,然后在服务器上运行,使用之前描述的步骤即可进行AR测试:

<!DOCTYPE html>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

<script src='ar/lib/three.min.js'></script>
<script src="ar/lib/stats.min.js"></script>
<script src="ar/lib/ar.js"></script>

<script>
debugger;
 THREEx.ArToolkitContext.baseURL = '';
</script>
<body style='margin : 0px; overflow: hidden; font-family: Monospace;'>
<div style='position: absolute; top: 10px; width:100%; text-align: center; z-index: 1;'>

<script>

    var renderer    = new THREE.WebGLRenderer({
        // antialias    : true,
        alpha: true
    });
    renderer.setClearColor(new THREE.Color('lightgrey'), 0)
    // renderer.setPixelRatio( 1/2 );
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.domElement.style.position = 'absolute'
    renderer.domElement.style.top = '0px'
    renderer.domElement.style.left = '0px'
    document.body.appendChild( renderer.domElement );

    // array of functions for the rendering loop
    var onRenderFcts= [];

    // init scene and camera
    var scene   = new THREE.Scene();
    
    var camera = new THREE.Camera();
    scene.add(camera);
    
    var arToolkitSource = new THREEx.ArToolkitSource({
        // to read from the webcam 
        sourceType : 'webcam',

        // to read from an image
        // sourceType : 'image',
        // sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/images/img.jpg',      

        // to read from a video
        // sourceType : 'video',
        // sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/videos/headtracking.mp4',     
    })

    arToolkitSource.init(function onReady(){
        onResize()
    })
    
    window.addEventListener('resize', function(){
        onResize()
    })
    function onResize(){
        arToolkitSource.onResize()  
        arToolkitSource.copySizeTo(renderer.domElement) 
        if( arToolkitContext.arController !== null ){
            arToolkitSource.copySizeTo(arToolkitContext.arController.canvas)    
        }   
    }

    var arToolkitContext = new THREEx.ArToolkitContext({
        // cameraParametersUrl: THREEx.ArToolkitContext.baseURL + '../data/data/camera_para.dat',
        cameraParametersUrl: 'ar/data/data/camera_para.dat',
        detectionMode: 'mono',
        maxDetectionRate: 30,
        canvasWidth: 80*3,
        canvasHeight: 60*3,
    })

    arToolkitContext.init(function onCompleted(){
        camera.projectionMatrix.copy( arToolkitContext.getProjectionMatrix() );
    })

    onRenderFcts.push(function(){
        if( arToolkitSource.ready === false )   
            return;
        arToolkitContext.update( arToolkitSource.domElement )
    })
    
    var markerRoot = new THREE.Group
    scene.add(markerRoot)
    var artoolkitMarker = new THREEx.ArMarkerControls(arToolkitContext, markerRoot, {
        type : 'pattern',
        patternUrl : THREEx.ArToolkitContext.baseURL + 'ar/data/data/patt.hiro'
    })

    // build a smoothedControls
    var smoothedRoot = new THREE.Group()
    scene.add(smoothedRoot)
    var smoothedControls = new THREEx.ArSmoothedControls(smoothedRoot, {
        lerpPosition: 0.4,
        lerpQuaternion: 0.3,
        lerpScale: 1,
    })
    onRenderFcts.push(function(delta){
        smoothedControls.update(markerRoot)
    })

    var arWorldRoot = smoothedRoot

    // add a torus knot 
    var geometry    = new THREE.CubeGeometry(1,1,1);
    var material    = new THREE.MeshNormalMaterial({
        transparent : true,
        opacity: 0.5,
        side: THREE.DoubleSide
    }); 
    var mesh    = new THREE.Mesh( geometry, material );
    mesh.position.y = geometry.parameters.height/2
    arWorldRoot.add( mesh );
    
    var geometry    = new THREE.TorusKnotGeometry(0.3,0.1,64,16);
    var material    = new THREE.MeshNormalMaterial(); 
    var mesh    = new THREE.Mesh( geometry, material );
    mesh.position.y = 0.5
    arWorldRoot.add( mesh );
    
    onRenderFcts.push(function(){
        mesh.rotation.x += 0.1
    })

    var stats = new Stats();
    document.body.appendChild( stats.dom );
    // render the scene
    onRenderFcts.push(function(){
        renderer.render( scene, camera );
        stats.update();
    })

    // run the rendering loop
    var lastTimeMsec= null
    requestAnimationFrame(function animate(nowMsec){
        // keep looping
        requestAnimationFrame( animate );
        // measure time
        lastTimeMsec    = lastTimeMsec || nowMsec-1000/60
        var deltaMsec   = Math.min(200, nowMsec - lastTimeMsec)
        lastTimeMsec    = nowMsec
        // call each update function
        onRenderFcts.forEach(function(onRenderFct){
            onRenderFct(deltaMsec/1000, nowMsec/1000)
        })
    })
</script></body>
 

当然,这个效果来自大神jeromeetienne开源的AR.js:

https://github.com/jeromeetienne/AR.js/

当然大神自己也很谦虚地提到,他这个开源的增强现实框架也是建立在巨人的肩膀上开发的:比如其中3D效果的绘制,使用到了另一个开源框架three.js:

 

要获取更多Jerry的原创文章,请关注公众号"汪子熙":

 
0
0
分享到:
评论

相关推荐

    three.jsAR增强现实包AR.js和aframe(201806)

    1. **AR.js**:这是一个强大的JavaScript库,专门用于在Web浏览器中实现增强现实功能。它利用设备的摄像头和AR标记来追踪和渲染3D内容,使得开发者能够创建互动式的AR体验,而无需复杂的后端设置或特定的硬件。 2. ...

    JavaScript_JavascriptWebGL轻量级面部跟踪库,专为增强现实网络摄像头过滤器设计的功能多人脸检测旋转张嘴

    综上所述,这个JavaScript库利用WebGL技术和面部跟踪算法,提供了一种轻量级的解决方案,用于在网络摄像头应用中实现增强现实的面部过滤器,支持多人脸检测和丰富的面部表情追踪。这为开发创新的AR应用提供了强大的...

    200 行 JavaScript 的人脸检测库

    在实际应用中,pico.js 可以用于各种场景,如在线视频聊天、社交媒体应用的人脸验证、安全监控系统的面部识别,甚至是增强现实(AR)游戏中的互动元素。由于其轻量级和高性能,开发者可以轻松地将它集成到自己的项目...

    基于Python的百晓通客栈增强现实开发库设计源码

    本项目是一款基于Python的百晓通客栈增强现实开发库设计源码,涵盖79个文件,包括21个Python源代码文件、10个JPG图片文件、9个RST文档文件、6个PNG图片文件、5个Markdown文档文件、5个JavaScript文件、3个JSON配置...

    ARjs使用ARToolKit的Web的高效增强现实

    1. **高性能**:AR.js通过优化的JavaScript代码和WebGL渲染,能够在大多数现代移动设备上实现流畅的3D渲染和跟踪性能,提供了接近原生应用的体验。 2. **跨平台**:由于是基于Web的,AR.js可以无缝地在各种操作系统...

    javascript

    在Web开发中,开发者可能会创建这样的C#类来模拟JavaScript的功能,或者通过C#代码来生成JavaScript代码,以在客户端运行。 总的来说,JavaScript以其灵活性和广泛的应用场景,成为了Web开发中不可或缺的一部分。...

    Javascript基础教程(文字版,代码可复制)

    // JavaScript代码 ``` - **位置选择**: - **内联**: 直接在HTML元素中通过`on...`属性添加JavaScript代码。 - **内部**: 在`&lt;head&gt;`标签或`&lt;body&gt;`标签内部使用`&lt;script&gt;`标签。 - **外部**: 创建单独的`....

    JavaScript最佳入门教程(中文版)

    这些基础知识构成了编写任何JavaScript代码的基础。 接下来,教程会深入到JavaScript的OOP部分,这是它的一个关键特性。面向对象编程允许开发者通过创建类和对象来模拟现实世界中的实体,使得代码更加模块化和可...

    震撼的javascript网页效果

    9. **表单验证**:JavaScript可以增强表单验证功能,提供即时反馈,提高用户输入数据的准确性,避免无效提交。 10. **Web Workers**:Web Workers允许在后台线程执行计算密集型任务,避免阻塞主线程,从而提高网页...

    【JavaScript源代码】Handtrack.js库实现实时监测手部运动(推荐).docx

    除了基本的手部检测,开发者还可以结合其他技术,如AR(增强现实)、VR(虚拟现实)或游戏开发,构建更多创新的应用,比如手势控制的游戏、无障碍交互界面等。 总的来说,Handtrack.js 是一个强大且易于使用的...

    python毕业设计:基于增强现实的教育信息系统+源代码+文档说明

    # EducationalSystempython, ...3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。下载后请首先打开README.md文件(如有),仅供学习参考, 切勿用于商业用途。--------

    exokit跨平台JavaScript引擎

    3. **容易上手**:由于Exokit使用了流行的Web技术,如JavaScript和WebGL,开发者可以通过简单的JavaScript代码快速创建复杂的VR和AR应用程序。 4. **插件系统**:Exokit提供了丰富的插件系统,开发者可以利用这些...

    HTML5+JavaScript动画基础(文本+源码)

    缓动函数(Ease Functions)用于模拟现实世界中的非线性运动,如物体加速启动和缓慢停止,提供更自然的视觉体验。弹动效果(Bounce Effect)通过模拟弹性碰撞,让动画有弹簧般的回弹感。 碰撞检测是游戏和互动应用...

    用JavaScript实现的算法和数据结构,并附有进一步阅读的解释和链接.zip

    首先,"javascript-algorithms_master.zip"是一个GitHub项目的存档,通常包含了源代码文件,这些文件展示了各种算法和数据结构的JavaScript实现。开发者可以从中学习到如何用JS编写排序算法(如冒泡排序、快速排序)...

    javascript经典特效---有光源的图片效果.rar

    这个HTML文件可能包含了一个Canvas元素,以及用于处理图片和渲染光照效果的JavaScript代码。通过分析这个示例,你可以更好地理解上述概念,并学习如何在实际项目中应用。 总的来说,利用JavaScript实现有光源的图片...

    LLJ.rar_VRML_javascript_vrml javascript

    【标题】"LLJ.rar" 是一个...用户可以通过编写JavaScript代码来控制这个模型,使其根据实际需求或数据进行变化,提供了一种直观、生动的虚拟展示方式。对于学习和实践VRML与JavaScript结合的应用,这是一个很好的实例。

    虚拟现实vrml课件和代码

    在“虚拟现实vrml课件和代码”这个资源包中,我们可以找到关于虚拟现实学习的材料,特别是与Vrml相关的编程设计。Vrml语言的核心在于定义场景的节点、属性和事件,通过这些元素,可以构建出具有视觉、听觉甚至是触觉...

    javascript-978-1-7884-7164-0:JavaScript开发人员的增强现实[视频]

    标题中的“javascript-978-1-7884-7164-0:JavaScript开发人员的增强现实[视频]”表明这是一份专为JavaScript开发者设计的关于增强现实(AR)技术的教育资源,可能包括一系列视频教程。描述中的内容与标题相呼应,...

    x3d校园设计项目实现源代码

    【标签】"x3D 源代码"进一步确认了项目的核心技术,X3D是一个基于XML的3D图形规范,支持交互性和实时性,广泛应用于虚拟现实(VR)、增强现实(AR)以及网络上的3D可视化。源代码则意味着我们可以深入理解其工作原理...

    JavaScript仿Windows关机效果

    总的来说,JavaScript仿Windows关机效果是一个集动画、交互和音频效果于一体的Web开发技术,它展示了JavaScript在实现复杂用户界面和模拟现实世界行为方面的强大能力。通过学习和实践这一技术,开发者可以提升自己在...

Global site tag (gtag.js) - Google Analytics