search

hiukim / mind-ar-js

Web Augmented Reality. Image Tracking, Face Tracking. Tensorflow.js
MIT License
2.27k stars 423 forks source link

Compile Target Images #18

Closed denispriler closed 3 years ago

denispriler commented 3 years ago

Is there any way to compile images with NodeJS? Just to run command in console or whatever

hiukim commented 3 years ago

Unfortunately, it can't be done at the moment.

Part of the code is currently run in webgl, which requires a browser environment.

ultranano commented 3 years ago

Hi @hiukim! How i can compile the target image on my own server? I can't found an example of that. Thanks in advance!

hiukim commented 3 years ago

@ultranano Unfortunately, it can't be done at the moment.

Part of the code is currently run in webgl, which requires a browser environment.

ultranano commented 3 years ago

I mean... I want to compile image target reference without pass to your site but use my own domain. It’s possible? How I can setup this?

hiukim commented 3 years ago

There is an old (not maintained anymore) example here: https://github.com/hiukim/mind-ar-js/blob/master/examples/compile.html. But I think it's still working.

The most important function is this one: https://github.com/hiukim/mind-ar-js/blob/ba310848f10acf3941bdccd949b3120b14ddda96/examples/compile.html#L90

ultranano commented 3 years ago

thanks! i'll try today. BTW why there isn't a new example of compile target form like in the documentation?

Tha compile form example work only with "dist-dev" or I can use also "dist"?

hiukim commented 3 years ago

I think you can use either dist-dev or dist

hiukim commented 3 years ago

I just wasn't expecting there is a need to host a custom target compiler. What's the use case of it?

I guess I can tidy that example up and put it in the doc.

Ebeleh commented 3 years ago

I just wasn't expecting there is a need to host a custom target compiler. What's the use case of it?

I guess I can tidy that example up and put it in the doc.

maybe u can give code for the image compiler? or the link where u got it

kalwalt commented 3 years ago

@hiukim if you want we can develop a target compiler to host on our Netlify org account webarkit

hiukim commented 3 years ago

@Ebeleh @kalwalt

The code is already in the repo. It's mainly the ./src/compiler.js

There is an example under ./examples/compile.html. The code should still be working, but just that the UI might not be well polished. but shouldn't be too difficult to understand.

I think the core function call is here: https://github.com/hiukim/mind-ar-js/blob/ba310848f10acf3941bdccd949b3120b14ddda96/examples/compile.html#L96

Yes, feel free to develop your target compiler if you want.

Ebeleh commented 3 years ago

@Ebeleh @kalwalt

The code is already in the repo. It's mainly the ./src/compiler.js

There is an example under ./examples/compile.html. The code should still be working, but just that the UI might not be well polished. but shouldn't be too difficult to understand.

I think the core function call is here: https://github.com/hiukim/mind-ar-js/blob/ba310848f10acf3941bdccd949b3120b14ddda96/examples/compile.html#L96

Yes, feel free to develop your target compiler if you want.

thanks

Swapratim commented 3 years ago

Hi Hiukim,

Thanks for the compiler https://github.com/hiukim/mind-ar-js/blob/master/examples/compile.html. About this line: Since I cannot find dist-dev, I am referring the following from dist:

  1. mindar.prod.js
  2. mindar.prod-min.js

But it is not working as expected. At least I cannot upload any image to the page or start the process (I'm not bothered about the UI but the basic functionality seems not working).

Can you please help?

image

hiukim commented 3 years ago

run npm run watch to build dist-dev/mindar.js but mindar.prod.js is also okay

what's the error?

Swapratim commented 3 years ago

The div for uploading image to start the conversion is not working. In the above screenshot, the div is apparently non-responsive to upload any image.

I'm not the expert apparently - am I missing anything?

Swapratim commented 3 years ago

Hi,

Any suggestion on this?

hiukim commented 3 years ago

need to see the error. Do you know how to open the console log?

Swapratim commented 3 years ago

Sure, I am testing it in here, you can too see the code and probably find the root cause: https://nft-webui.glitch.me

image

There are 2 things that could possibly create issue:

  1. Line 13: const compiler = new MINDAR.Compiler(); Uncaught ReferenceError: MINDAR is not defined --> I'm not sure how to import the MINDAR.compiler() since it is not getting imported from the following JS:

    • mindar.prod.js
    • mindar.prod-min.js
    • compiler.js
    • compiler.worker.prod.js
    • compiler.worker.prod-min.js

  2. I added a few lines of HTML tags inside "div id="dropzone" class="dropzone">

" to make sure image can be uploaded and visible. But clicking on 'Start' button not yielding any action

I added an alert inside JS function: document.getElementById("startButton").addEventListener("click", function() { alert('Hi'); ...} this alert is not showing on click. Probably it is related to "myDropzone" files which it cannot refer to.

Looking forward for your suggestions here.

image

hiukim commented 3 years ago

You only need to include mindar.prod.js. can remove others

Swapratim commented 3 years ago

Followed it. But still the console throws error at [ const compiler = new MINDAR.Compiler(); ] line After uploading image, the start button does not respond - even after waiting for 10 min - download button does not yield .mind file

Please see the code in here: https://glitch.com/edit/#!/nft-webui

hiukim commented 3 years ago

can you double check this link exists https://nft-webui.glitch.me/mindar.prod.js

Swapratim commented 3 years ago

You are absolutely right - the JS was not functioning due to Glitch auto-formattting file structure. After editing, it is working like a charm now. Thank you so much :-) Sorry for all the inconvenience though...

hiukim commented 3 years ago

nice!

Swapratim commented 3 years ago

One more question: what is the basis of putting a scale of the compiled image between Scale 1 to 10?

Swapratim commented 3 years ago

Hi @hiukim

Hope you are doing well. I have two questions for Mind AR:

  1. Can we interact with the 3D GLTF in here like rotate, zoom in/out etc.? (It can be done using AR.js for marker-based AR - using gesture-handler tag. But that tag does not work in here). Any suggestion how to make it work?
  2. Can we put audio as an asset-item and play it (onclick/autoplay) during AR show? (AR.js can do it actually).

Since it is also based on AR.js - can you not enable/add the functionality in the latest builds?

hiukim commented 3 years ago

@Swapratim

It's not based on AR.js. It's two entirely different engine from ground up.

Even said that, I think those two are totally possible. Unfortunately, I haven't tried any of these and I don't have a working example to show you.

Swapratim commented 3 years ago

@hiukim

Thanks. It totally makes sense.

Do you have any timeline when it can be incorporated in Mind AR?

hiukim commented 3 years ago

@Swapratim sorry, I don't have a timeline for that at the moment. When I have some free time, I could try it out.

Swapratim commented 3 years ago

@hiukim I would really appreciate that. Thanks for the update.

devangpawar17 commented 2 years ago

@Swapratim can you please provide the code to compile images in local host i am having problems doing it .

mlambie commented 2 years ago

@Swapratim @devangpawar17 I'd be keen on seeing this also

icantcook commented 2 years ago

@devangpawar17 @mlambie I managed to get it working with a few edits.. Here's the link. Hope it helps. https://glitch.com/edit/#!/evening-malleable-thorn @hiukim thanks a ton for the library, sir!

julior0518 commented 2 years ago

@devangpawar17 @mlambie I managed to get it working with a few edits.. Here's the link. Hope it helps. https://glitch.com/edit/#!/evening-malleable-thorn @hiukim thanks a ton for the library, sir!

I'm trying to use your version to try out the compiler but it tells me mindar is not defined in:

const compiler = new MINDAR.IMAGE.Compiler();

can you help please?

icantcook commented 2 years ago

@devangpawar17 @mlambie I managed to get it working with a few edits.. Here's the link. Hope it helps. https://glitch.com/edit/#!/evening-malleable-thorn @hiukim thanks a ton for the library, sir!

I'm trying to use your version to try out the compiler but it tells me mindar is not defined in:

const compiler = new MINDAR.IMAGE.Compiler();

can you help please?

That's strange. Can you share the logs? I'll have a look. The code is pretty straight forward though, and is tested on Edge, Chrome and Firefox.

devangpawar17 commented 2 years ago

@icantcook @mlambie it's working fine for me

sampath1911 commented 1 year ago

@icantcook @mlambie @devangpawar17 @denispriler Will this code work on next js and React js enviroment?

RaheemWilson commented 1 year ago

@hiukim I am trying to use the current cdn version to access the Compiler class but I am getting "Compiler is not defined error". Is there something that I might be missing? Please link below

<script src=“https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.2.2/dist/mindar.prod.js”></script>

piisan29 commented 1 year ago

@hiukim Thank you so much the documentation tutorials are really cool, by any chance is there a way or tutorial we could use to create our own compiler: https://hiukim.github.io/mind-ar-js-doc/tools/compile/

thank you so much

Swapratim commented 1 year ago

Hello @hiukim

Thanks for the brilliant tutorials. Is there a way for adding green screen (video without background - set alpha for background screen so that characters appear as 3D) video in AR (especially in image targeting AR)?

piisan29 commented 1 year ago

@hiukim I am trying to use the current cdn version to access the Compiler class but I am getting "Compiler is not defined error". Is there something that I might be missing? Please link below

<script src=“https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.2.2/dist/mindar.prod.js”></script>

Hello @RaheemWilson , by any chance did you already resolve this problem? Got the same error. Thank yoy

morteza-eskandarian commented 9 months ago

@Swapratim sorry, I don't have a timeline for that at the moment. When I have some free time, I could try it out.

Hello @hiukim I hope you are doing very well. I just wanted to ask if you have implemented the zoom or rotate feature in Mindar?

vxedit commented 7 months ago

hi @Swapratim , if you are looking for something which can help remove green part from your video and place the video in mind-ar with alpha channel set , you can use this method here. Link for this you have to place your video tag inside asset and make the plane get it within entity tag like this `

` , and can i get the source or anything related for making the compiler work independently so that i can integrate it inside my project , Thanks.

pranavkattel commented 3 months ago

Sure, I am testing it in here, you can too see the code and probably find the root cause: https://nft-webui.glitch.me

image

There are 2 things that could possibly create issue:

  1. Line 13: const compiler = new MINDAR.Compiler(); Uncaught ReferenceError: MINDAR is not defined --> I'm not sure how to import the MINDAR.compiler() since it is not getting imported from the following JS:

    • mindar.prod.js
    • mindar.prod-min.js
    • compiler.js
    • compiler.worker.prod.js
    • compiler.worker.prod-min.js
  2. I added a few lines of HTML tags inside "div id="dropzone" class="dropzone">" to make sure image can be uploaded and visible. But clicking on 'Start' button not yielding any action I added an alert inside JS function: document.getElementById("startButton").addEventListener("click", function() { alert('Hi'); ...} this alert is not showing on click. Probably it is related to "myDropzone" files which it cannot refer to.

Looking forward for your suggestions here.

image

how did u do it can i get the source code