Search the Community

Hi everybody! I'm working on an Augmented Reality problem that involves math too complex for me. To be honest, I'm not sure there's a solution to this problem. Any help is of course welcome (even if this help consists in telling me "Impossible, you cannot go from an N dimension to an N+1 dimension). I would like to place a 3D object on a photo uploaded by a user. I have the intuition that by asking the user to place the origin and the axes of the coordinate data system, specifying for each of the axes a "real" length from a known reference frame, it could be possible to determine the sequence of transformations that led to such a projection of the 3D coordinate system. And deduce the position of the corresponding camera etc... to get the correct parameters to simulate the presence of a 3D object on a picture. This could of course only work if the user is able to draw the 3 axes and define their real length on the picture. Here is a nice drawing of the goal I would like to achieve : The user has entered the 3 axis on the projection picture, and thanks to known distance, has dimensioned them. The magic of math goes through there... We are able to draw a 3D object in this scene : here is a perfectly drawn unit cube on the XOZ plane? Here is a PG that reproduces the first part (the data entered by the user are directly entered in the code? https://playground.babylonjs.com/#2XZ6M5 I don't own that background, I just needed an image to show the problem. I thank you VERY MUCH in advance for your help ! PS : I know that the field of view of the camera is something to be taken in account as well, but I think a simple slider may allow user to change it to match picture's fov.

Do BabylonJS has any capability to mix phone camera and 3D "scene" "object" together as augmented reality? Is there any tutorial any show case or example? Can we add any 3D object(s) over camera of phone? Is there any way camera is for VR (left and right lens) and possibility to ad 3D object over camera ? Greetings Ian

Hi Guys Im looking for way to integrate augmented reality into the toolkit if any body has ideas about this please let me now. so far I'm trying with trackingjs, I figure if we can track faces, color etc we can bring the video in vr mode camera and stick stuff in the 3d world using trackingjs syst. any way I know there other libraries but I though this is a nice and clean way to do some augmented reality and it has nothing to do withe Babylon framework yet . @MackeyK24 here my initial code attempt , I put the #video div on the index.hmtl but I dont get the camera working yet je je I need to render the camera's device into the canvas @Deltakosh is ther a way to do this already? see the ~ref link public ready(): void { // this.scene execute when ready var scene = this.scene; this.scene.activeCamera.attachControl(this.engine.getRenderingCanvas()); this.manager.enableUserInput(); var tracker: any = new tracking.ObjectTracker(['face']); tracker.setInitialScale(4); tracker.setStepSize(2); tracker.setEdgesDensity(0.1); tracking.track('#video', tracker); tracker.on('track', function (event) { var canvas = this.engine.getRenderingCanvas(); var context = canvas.getContext('2d'); tracker.on('track', function (event) { context.clearRect(0, 0, canvas.width, canvas.height); event.data.forEach(function (rect) { context.strokeStyle = '#a64ceb'; context.strokeRect(rect.x, rect.y, rect.width, rect.height); context.font = '11px Helvetica'; context.fillStyle = "#fff"; context.fillText('x: ' + rect.x + 'px', rect.x + rect.width + 5, rect.y + 11); context.fillText('y: ' + rect.y + 'px', rect.x + rect.width + 5, rect.y + 22); }); }); }); };}

(also on Hacker News: https://news.ycombinator.com/item?id=7899214) Hey guys, I posted about this a few weeks ago but the games weren't quite ready yet so it didn't get much attention. This time I made a video ! Please have a look at http://short.epfl.ch/paprika/ to test the games and know more about the project! I hope you like the games, and I would really appreciate any feedback concerning the framework itself, any sort of informal evaluation really. So, the story: As part of a school project I've been working on a adapting an AR markers library called Chilitags into a very simple, very easy to use, more abstract JavaScript framework called Paprika. In short, what it does is allow you to use AR markers as input for your web application (with property binding and condition triggers for position, rotation, specific orientation, visibility, card flipping, tilting, stacking.) I created 3 games/demos with Phaser which are far from perfect, but serve as experiments to test paper interaction. I hope you enjoy these and I'd love to hear what you think of them! Asteroids:http://chili-epfl.github.io/paprika/phaser_demo_3.htmlIn this game you control the orientation and color mode of a spaceship using a card. Plays like Asteroids, with color mode mechanics inspired by Ikaruga.It uses one 2-sided card and tests rotation tracking + flipping detection.Traffic Management: http://chili-epfl.github.io/paprika/phaser_demo_2.htmlIn this game you control which lane gets a green light at 4 crossroads, the objective being to let all cars through in the shortest time possible without letting (too many of) them crash.It uses four 1-sided cards and tests orientation.there's also a simpler, 1 crossroad version of it here http://chili-epfl.github.io/paprika/phaser_demo_1.html)Ball Maze: chili-epfl.github.io/paprika/phaser_demo_4.htmlIn this game you control a ball inside a baze by tilting a piece of paper as you would the ball maze. the objective is to get to the goal without hitting the walls in the shortest time possible.It uses a 1 sided card and tests tilting and tilt orientation.