# Search the Community

Showing results for tags 'augmented'.

• ### Search By Tags

Type tags separated by commas.

### Forums

• HTML5 Game Coding
• News
• Game Showcase
• Facebook Instant Games
• Coding and Game Design
• Frameworks
• Phaser 3
• Phaser 2
• Pixi.js
• Babylon.js
• Panda 2
• melonJS
• Haxe JS
• Kiwi.js
• General
• General Talk
• Collaborations (un-paid)
• Jobs (Hiring and Freelance)
• Services Offered

• 0 Replies

• 0 Views

Found 4 results

1. ## AR : Placing 3D Object in 2D picture using picked points

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.
2. ## Augmented Reality - Phone Camera ?

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
3. ## Augmented Reallity

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); }); }); }); };}