Identifying the floor or ground using a webcam in motion: A step-by-step guide

I am currently facing a unique challenge:

In my project, I have markers (specifically Hiro, A, Kanji) displayed on banners, and I need to show a 3D model (such as augmented reality) when the marker is recognized. Everything works well so far, but here's the catch - the 3D model needs to be anchored to the ground. The ground is not perfectly flat or extremely bumpy; it resembles a meadow.

My question is: Is it possible to anchor the 3D model to the ground without using any physical tools (I mean not involving hardware, only software)?

If yes, what do you think would be the most straightforward method? I've heard that using OpenCV.js might provide a solution, but I haven't come across any useful resources yet.

The 3D model appears correctly on the marker; all I need to do is determine its positioning so that it sits precisely on the ground. But how can I find these x, y, z coordinates?

Currently, I don't have any code to share because I'm unsure where to begin in order to make my work effective.

The entire process, starting from scanning the marker through the webcam, takes place on a website. I am utilizing NodeJS & ExpressJS on the backend, EJS as the template language, and THREE.js for the augmented reality aspect.

So, do you believe there is a way to accomplish this task?

javascriptopencvimage-processingthree.jsvideo-processing

Answer №1

One innovative approach to consider is utilizing the SLAM (simultaneous localization and mapping) technique, which enables the estimation of unknown environments as a camera moves through them. This method allows for the extraction of the ground plane and subsequent attachment of models to this plane once markers are detected. While implementing SLAM from scratch may be challenging, there are various AR libraries available that can assist with the tracking aspect, making the process more manageable.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it Appropriate for Custom React Hooks to Trigger Re-Render of Related Components?

I have just developed a custom hook that internally uses useState and useEffect. After importing this hook into another React function component called ComponentA, I noticed that ComponentA re-renders every time the state within the custom hook changes. ...

javascriptreactjsreact-hooks

Putting a Pause on CSS Transition using jQuery

I am attempting to delay a CSS transition for an element by using a delay function, with an additional 0.2s applied to make it slide 0.2s later than the initial delay of the main wrapper. I am applying a class to give it a transition effect to slide from r ...

javascriptjqueryhtmlcss

Tips to prevent encountering the "The response was not received before the message port closed" error while utilizing the await function in the listener

I'm currently in the process of developing a chrome extension using the node module "chrome-extension-async" and have encountered an issue with utilizing await within the background listener. In my setup, the content.js file sends a message to the ba ...

javascriptgoogle-chrome-extension

Postman Guide: Mastering the Evaluation of JSON Arrays

One of the features in Postman allows users to save a specific field from the response body as a variable and then utilize that variable in a subsequent call. For instance, after my initial call to the web service, the response body contains: [ { "id" ...

javascriptjsonpostman

Can we expand the capabilities of a ThreeJS object in any way?

In my ThreeJS project, I am implementing an interactive feature where users can click on cubes that behave differently when clicked, such as having different color animations. To achieve this, I plan to create extension classes for the THREE.Mesh object a ...

javascriptoopinheritancethree.js

Optimizing Input Type Date (Calendar) Reactstrap for Minimum and Maximum Values

I'm in the process of integrating a Calendar feature into my website for scheduling appointments, and I need it to start from today and onwards. How can I achieve this using the Reactstrap component? I couldn't find any relevant information in th ...

javascriptreactjsbootstrap-4calendarreactstrap

Modification of window size using jQuery animations

Currently, I am working on creating a sidebar that slides in from the left side of the screen. To achieve this effect, I have set the menu element to float left with a width of 40% and a margin-left of -40%. However, when I try to reveal the sidebar by sw ...

javascriptjqueryhtmlcss

In React + TypeScript, learn how to effectively pass down a function from a container component to a

I am currently working on developing a tabs application using React and Typescript. The main component, Tabs, manages the state and passes it down to the Content component. Additionally, I have implemented a function called 'handleName' which is ...

javascriptreactjstypescript

What steps can I take to ensure that my popup images continue to appear?

Currently, I am working on creating a webpage that features thumbnails sourced from a local geoserver. The goal is to have these thumbnails expand into dialog windows that can be moved around. While I have successfully implemented the functionality to expa ...

javascriptjqueryhtmlxslt

Issue with AngularJS $http not responding to ng-click after first call

My landing controller uses a service that initiates the $http call by default when the App loads. However, I need to pass parameters based on click events, so I implemented an ajax call on ng-click. The issue is that I keep receiving the same data on ng-c ...

javascriptangularjsnode.jshtmlexpress

VS Code sees JavaScript files as if they were Typescript

I have recently delved into the world of Typescript and have been using it for a few days now. Everything seems to be working smoothly - Emmet, linting, etc. However, I've encountered an issue when trying to open my older JavaScript projects in VS Cod ...

javascripttypescriptvue.jsnuxt.jsvetur

Connecting CSS and JS files in JSP was a bit of a challenge

Just starting out with jsp and using Glassfish server via netbeans. Struggling to link my jsp file with css and javascripts. Below is the structure of my files: Web Pages --Web-Inf --assets --css --style.css --js --jquery.js ...

javajavascriptcssjsp

Inquiry regarding the setTimeout function requiring an answer

I have a question about how setTimeout works. Does it wait for the previous code to finish executing before moving on to execute something else after a set time, or does it simply wait for a specific amount of time and then continue with the rest of the co ...

javascriptlocationsettimeoutuserscripts

Transferring information to a subordinate view

I'm working on developing a single-page application and need to transfer data to a child view. After fetching the API using Axios, I am able to successfully log the data in the console. However, when trying to display the data in the child view, I en ...

javascriptvue.js

Page jumping vertically in Chrome upon reload, with Firefox and Internet Explorer functioning properly

Utilizing this jQuery script, I am able to center a website vertically within the browser window if it exceeds the height of the outer wrapper-div, which has fixed dimensions. $( document ).ready(function() { centerPage(); )}; // center page vertic ...

javascriptjqueryhtmlcssgoogle-chrome

Java Selenium Javascript executor fails to return desired result

Attempting to execute a javascript function I created to gather all comments from an HTML site using xpath (requirement). The function, when pasted directly into a browser without the 'return' statement, works flawlessly. However, when run th ...

javascriptjavaseleniumselenium-webdriverxpath

Efficient method to access two arrays simultaneously and combine them into an associative array in JavaScript

When using Ajax to return a table, you have the option of separating column names and row values. Here are two ways to do it: let columns = ["col1", "col2", "col3"]; let rows = [ ["row 1 col 1", "row 1 col 2", "row 1 col 3"] , ["row 2 col 1", "r ...

javascriptarraystypescriptpropertiestypescript2.0

Detecting the specific button that was selected with PHP

I am in the process of developing a website for a production company where, upon clicking on a director's name from the menu, all other menu items disappear and only the selected director's biography and work are displayed. My current challenge ...

phpjavascriptjquerymysqlcss

Utilize Google Maps to receive directions to a specific destination and discover current traffic conditions along the route using their comprehensive API

I am currently working on implementing the Google Maps direction identifier functionality with traffic details. However, I am able to obtain directions but not specific traffic details for a selected path; it seems to apply overall traffic data instead. ...

javascriptjqueryhtmlgoogle-maps

What is the best way to update $state in AngularJs when the user makes changes to the controller?

I am currently working on Angular UI Router and I want to refresh the current state by reloading it and rerunning all controllers for that state. Is there a way to reload the state with new data using $state.reload() and $stateParams? Here is an example ...

javascriptangularjs