Using QR code as marker

[prasannaboga]

Do you want to request a feature or report a bug?
feature

What is the current behavior?
I have created a custom pattern using QR corner square. Using this custom pattern I am able to show the 3D object any one of the square corners. I am using jsQR library to scan the QR code show the object based on QR code data. Now it scans the QR code and updates 3D box color based on QR Code value.

If the current behavior is a bug, please provide the steps to reproduce.
Sample code in codepen

What is the expected behavior?
Here I want to position the object center of QR code. I want to calculate all three square corners positions and calculate center position. And, when mobile is moving forward/backward to object size increase/decrease based on the square size, but I want to make object always fit to screen irrespective of marker size or distance between marker and mobile.

If this is a feature request, what is motivation or use case for changing the behavior?

Please mention other relevant information such as the browser version, Operating System and Device Name
Android Chrome
Ubuntu Chrome

Sample QR codes

red	green	blue

[nicolocarpignoli]

I'm not sure about what you're asking, but it is possible to create a QR Code that contains a marker (pattern or barcode). You can do that with a simple free online tool (https://www.qrcode-monkey.com). You just choose content of QR Code (like an URI) and also upload your marker in "ADD LOGO IMAGE".

Details on: https://medium.com/chialab-open-source/how-to-deliver-ar-on-the-web-only-with-a-qr-code-e24b7b61f8cb

[prasannaboga]

@nicolocarpignoli Let me write what I am trying to do with AR.js.

To display 3d object using AR.js we need a marker. Markers are preset Hiro/Kanji, barcode or custom marker which is generated by AR.js marker training
(https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html).

I am trying to implement augmented reality in our application to display 3d object after QR code scan on QR code, using AR.js to achieve this. But AR.js need a marker to place the object.
What we do is create a custom pattern https://raw.githubusercontent.com/prasannaboga/demo_arjs02/master/source/images/pattern-qrcode-square.patt
using this black block in QR code using AR.js marker training.

With this custom pattern able to place 3d object after scanning QR code based on QR code data. Please check following example in codepen https://codepen.io/prasannaboga/pen/deOLQe, please scan above QR codes(contains text data with colors red, green and blue) in this example, It displaying a 3d box after scanning QR codes box color is changing.

1. Place object in the center of QR code.
   In this article, https://medium.com/arjs/area-learning-with-multi-markers-in-ar-js-1ff03a2f9fbe using Multi-Markers find the area.
   Can we find the center position of QR code because QR code had 3 same markers?
   

2. Scale the object and always fit into the screen.
   3d object size is based on marker size and the distance between mobile and marker if mobile phone near to marker object big or vice-versa.
   

[nicolocarpignoli]

Ok, I think I get it.
I am not able to answer your first question because I haven't played with multiple-markers yet.
Anyway, I don't recommend to use such a simple pattern marker (the" black box") as it can be confused with other images. It is not so 'recognisable'.

For the second answer, it is possible to scale the object and make it bigger/smaller aside from the marker 'size'.

Example (see scale attribute):

<a-box id="myBox" color="black" position="0 0 0" rotation="45 30 45" scale="2 2 2" rotation="0 0 0" material='opacity: 0.7;'>

With "2 2 2" we scale x2 the a-frame object in every direction.
for detail see: https://github.com/aframevr/aframe/blob/master/docs/components/scale.md

[nicolocarpignoli]

@prasannaboga any luck?

[prasannaboga]

@nicolocarpignoli by using scale="2 2 2" static scale value 2 is not helping because marker size are very.

Using rangeslider.js javascript plugin I am calculation scale and rotation value based on slider value.

Here is the working example please check Sample20.

[gravyplaya]

@prasannaboga what qrcode markers are you using for your sample?

[prasannaboga]

@gravyplaya I created a custom marker with the black square, here is patt file https://raw.githubusercontent.com/prasannaboga/demo_arjs02/master/source/images/pattern-qrcode-square.patt

Try this sample18 given above QR codes.
Or codepen example https://codepen.io/prasannaboga/pen/deOLQe

[MateusEduardo]

@prasannaboga any luck? About your first question... I was reading about AR-CODE. I think it can help us. Do you really need multi-markers?

So.. here https://jeromeetienne.github.io/AR.js/three.js/examples/arcode.html
you can generate qr-code with some data and when i was testing your code at codepen i think it works! :)

all you need is change this line:
<a-marker preset='custom' type='pattern' url='https://prasannaboga.github.io/demo_arjs02/images/pattern-qrcode-square.patt'>

by the default preset "hiro":
<a-marker preset='hiro'>

Example:
http://prntscr.com/l6jrx9

please let me know if you had something else