<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Super Delivery Experiments</title> <link href="https://fonts.googleapis.com/css?family=Fira+Sans" rel="stylesheet"> <!-- Compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css"> <!-- Compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script> <style type="text/css"> body { font-family: 'Fira Sans', sans-serif !important; } .card-image { background-color: black; } .card-image img { opacity: .5; height:150px; object-fit: cover; } .card-image video { opacity: .5; height:150px; object-fit: cover; } .card .card-action a:not(.btn):not(.btn-large):not(.btn-large):not(.btn-floating) { color: blue !important; } a:not(.btn):not(.btn-large):not(.btn-large):not(.btn-floating) { color: blue !important; } </style> </head> <body> <div class="container"> <img src="texture.jpg" /> <div class="row"> <div class="col s12 "> <h1>S.D. Experiments</h1> <div class="divider"></div> </div> </div> <!-- Cards container --> <div class="col s12 m12 l12"> <div class="row"> <!-- Col: Card --> <div class="col s12 m6 l4"> <div class="card"> <div class="card-image"> <img src="./scenes experiment/thumb.png"> <span class="card-title">360 photo experiment</span> </div> <div class="card-content"> <p>360 degree photo augmented with 3d objects</p> </div> <div class="card-action"> <a href="./scenes experiment">Try it</a> </div> </div> </div> <!-- Col: Card --> <div class="col s12 m6 l4"> <div class="card"> <div class="card-image"> <img src="./eloszoba 3d/thumb.png"> <span class="card-title">3D model experiment</span> </div> <div class="card-content"> <p>3d model of the hall made with tap measure ios AR app and sketchup</p> </div> <div class="card-action"> <a href="./eloszoba 3d">Try it</a> </div> </div> </div> <!-- Col: Card --> <div class="col s12 m6 l4"> <div class="card"> <div class="card-image"> <!--<img src="./ar experiment/thumb.png">--> <video class="responsive-video" src="./ar experiment/thumb.mp4" autoplay loop> </video> <span class="card-title">AR experiment</span> </div> <div class="card-content"> <p>Tag based augmented reality experiment</p> <a href="./ar experiment/markers/inside with border.png">inside marker</a> | <a href="./ar experiment/markers/door with border.png">door marker</a> | <a href="./ar experiment/markers/fence with border.png">fence marker</a> | <a href="https://jeromeetienne.github.io/AR.js/data/images/HIRO.jpg">hiro marker</a> </div> <div class="card-action"> <a href="./ar experiment">Try it</a> </div> </div> </div> <div class="col s12 m6 l4"> <div class="card"> <div class="card-image"> <img src="./ar qr experiment/thumb.png"> </video> <span class="card-title">QR code as AR marker</span> </div> <div class="card-content"> <p>Instant AR</p> </div> <div class="card-action"> <a href="./ar qr experiment">Try it</a> </div> </div> </div> <div class="col s12 m6 l4"> <div class="card"> <div class="card-image"> <img src="./real2vr/thumb.png"> </video> <span class="card-title">360 video to lidar scape</span> </div> <div class="card-content"> <p>Trying to simulate the moment of truth: arriving to a house in reality (360 video) and switching to VR at the door (lidar point scape).</p> <a href="./real2vr/indexVR.html">VR Goggle optimized view</a> </div> <div class="card-action"> <a href="./real2vr">Desktop optimized view</a> </div> </div> </div> <div class="col s12 m6 l4"> <div class="card"> <div class="card-image"> <img src="./point cloud/thumb.png"> </video> <span class="card-title">Point cloud VR</span> </div> <div class="card-content"> <p>Trying to remake our @baggio ad, with Aframe.js for better quality 3d effects.</p> </div> <div class="card-action"> <a href="./point cloud">Load</a> </div> </div> </div> </div> </div> </body> </html>