Custom AR/VR/Quicklook Buttons in Blender | needle — tools for creators | Page 1

thorn hound Jun 26, 2024, 3:55 PM

#

Hi all 👋 😀

Is it possible to add custom AR, VR and Quicklook buttons in Needle for Blender?

Cheeeeeeeeeeers, in advance, for any advice 🙂

sharp wharfBOT Jun 26, 2024, 3:55 PM

#

thorn hound Hi all 👋 😀 Is it possible to add custom AR, VR and Quicklook buttons in Need...

Thanks for reaching out @thorn hound

Please read through the following and share the information requested. This will help us to better assist you.

Description

Describe the issue that you're seeing. Please be as detailed as possible e.g. is this issue happening in Unity or Blender, which Needle Engine version are you using, do you see any errors in the Editor or Browser console, etc.

Information:

If you're using Unity click the menu item Needle Engine/Report a Bug/Copy Project Info to Clipboard. Please share the results below.
Please provide code snippets using Discord Code Blocks
Have you contacted Needle through another channel or just through Discord?

Useful Links

Needle Engine Samples - Find examples that you can download or try out in the browser for many common usecases
Needle Engine Documentation

Did you know 💡

We now also have a forum with AI support: Join now with your discord account - or request help by clicking the button below.

narrow moat Jun 26, 2024, 4:08 PM

#

you can do this with a little bit of custom code yes. What kind of buttons do you want? Buttons in your website as HTML 2D elements or 3D objects that can be clicked?

thorn hound Jun 26, 2024, 4:30 PM

#

Hi @narrow moat and thanks, as ever, for responding 🥰

I'm looking to add buttons in my website as HTML 2D elements.

narrow moat Jun 26, 2024, 4:32 PM

#

You can create buttons (unstyled) with javascript for example (is this OK?) like so:

WebXRButtonFactory.create().createARButton()
// createVRButton
// createQuicklookButton

#

This will give you an HtmlButtonElement that you can add to your website anywhere (it's a <button> element)

thorn hound Jun 26, 2024, 4:36 PM

#

Cool... I had arrived at something similar via experimentation. However, I didn't have the skill or knowledge to ascertain how to reference any button images I may make.

What you've so kindly described makes perfect sense 😎 🤩 🚀

Thank yoooooooooo!!!

narrow moat Jun 26, 2024, 4:44 PM

#

I'm considering adding a little html element for it like so
<needle-button ar>Start AR</needle-button> (but did just a quick test)

Let me know how it goes

thorn hound Jun 26, 2024, 5:02 PM

#

Ooooooooo, that sounds like it would be ace! 💭 🚀

narrow moat Jun 27, 2024, 4:20 PM

#

@thorn hound you can use <needle-button ar></needle-button> in the latest version (and <needle-button ar>Start AR Fun</needle-button> for even more fun)

thorn hound Jun 28, 2024, 8:34 AM

#

@narrow moat Oh my goodness... I cannot wait to try this!!! 👀 😎 🤩 🚀

Thank you sooooooooo much! On it, right now!

thorn hound Jun 28, 2024, 9:34 AM

#

Apols for delay in feeding back re: outcome, but I haven't quite managed to get it working at this end just yet.

Rest assured, the problem lies with me not the feature 😅 It's just 'cos I haven't got things set up quite right. I'm on the case, though... and I will get there 😅 😁

thorn hound Jul 14, 2024, 9:19 AM

#

UPDATE/BEGGING LETTER 😜

Okay, well for some reason I'm still totally failing to get any of this to function. Sooooooooooooo, I have a massively cheeky request!

What I'm basically trying to achieve is a custom/modifiable 'Start AR' button which entirely obscures the scene content (see mockup image), so that an AR experience can be launched onClick without the user seeing the content in the browser window before his/her device camera is opened.

THE REQUEST
At some point, when you dudes have some spare time (yeah, really 🤣 ), would it be possible to have a .blend sample file with its associated .html and .css (as necessary) showing how this might be achieved?

Genuinely no rush, BTW! This is very non-urgent, long-lead, wish-list kinda item ☺️

#

The start screen/button (as shown in the pic) doesn't actually need to be full screen (although that would be ace). Its main priority is to hide the scene content from view until the AR is started.

narrow moat Jul 14, 2024, 9:59 AM

#

@thorn hound you can use this HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" href="favicon.ico">
  <meta name="viewport" content="width=device-width, user-scalable=no">

  <title>Made with Needle</title>
  <meta property="og:title" content="Made with Needle" />
  <meta property="og:description" content="🌵 Made with Needle Engine" />
  <meta name="twitter:card" content="summary_large_image">

  <meta name="robots" content="index,follow">
  <meta name="url" content="http://needle.tools">

  <link rel="stylesheet" href="./src/styles/style.css">
  <script type="module" src="./src/main.ts"></script>

  <style>
    .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1000;
      background-color: #FD7202;
      /* Layout */
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 1rem;

      border: none;
      pointer-events: all;
      font-size: 2rem;
      cursor: pointer;
      color: white;

      & img {
        transform: scale(1);
        animation: pulse 2s infinite;
      }
    }

    @keyframes pulse {
      0% {
        transform: scale(1);
      }

      50% {
        transform: scale(1.1);
      }

      100% {
        transform: scale(1);
      }
    }
  </style>

</head>

<body>
  <div class="container">
    <needle-engine src="assets/scene.glb">
    </needle-engine>
    <button class="overlay start-ar">
      <span>Start AR</span>
      <img src="https://i.ibb.co/3N3C42Z/images-2.png" alt="start AR image indicator" />
    </button>
  </div>
</body>

</html>

#

and this goes in main.ts:

import("@needle-tools/engine") /* async import of needle engine */;
import "./codegen/register-types"

import { Context, isiOS, NeedleXRSession, USDZExporter } from "@needle-tools/engine";

document.addEventListener("DOMContentLoaded", () => {
    const button = document.querySelector("button.start-ar");
    if (!button) {
        console.warn("No button with a start-ar class found");
        return;
    }
    button.addEventListener("click", StartAR);
});

function StartAR() {
    console.log("Starting AR");
    if (isiOS()) {
        const usdz = new USDZExporter();
        usdz.objectToExport = Context.Current.scene;
        usdz.exportAndOpen();
        return;
    }
    NeedleXRSession.start("immersive-ar");
}

#

it will give you something like this (excuse my very quick and dirty logo extraction 😉 )

#

You might want to tweak the image size a bit in CSS and select a different font (e.g. from google fonts, not sure what you're using) and replace the image 😉

thorn hound Jul 14, 2024, 10:28 AM

#

Oooooooh! How exciting!!! 👀 👀 👀 👀 👀

This looks like it could be perfect! A BILLION thanks, Marcel!

I'm off to have a play with it all right now this very minute!!! ⚡ 🤩 🚀

thorn hound Jul 15, 2024, 7:14 AM

#

Sadly, I still can't get it to work 🤔

It looks really great (the screen is precisely the kind of effect I'd been hoping for 🙂 👌 ) but, when tapped, the 'Start AR' button fails to launch anything.

Basically, nothing happens... so I've obviously still got something set up wrong somewhere 💭 💭 💭

Are there any specific settings I should be using in the .blend file?

narrow moat Jul 15, 2024, 8:30 AM

#

You're opening the website on your phone, right?

thorn hound Jul 15, 2024, 8:34 AM

#

Yup.

I did a production build and ensured everything was as you indicated (re: main.ts and the html) and then uploaded it all, as normal, to my Firebase repository and visited the site using both an Android phone and an iPad.

I'm absolutely certain that I have something incorrectly configured... but I just can't seem to work out what I've got wrong 😬

narrow moat Jul 15, 2024, 8:35 AM

#

Do you have a link for me? You can send it via PM 🙂

thorn hound Jul 15, 2024, 8:35 AM

#

Two seconds...

#

PM'd ☺️

narrow moat Jul 15, 2024, 8:39 AM

#

Did you modify the files in the dist directory after building? Because it tries to load the main.ts on the server which isnt correct and thus not working.

thorn hound Jul 15, 2024, 8:40 AM

#

Yes, I did... should I have left them untouched?

narrow moat Jul 15, 2024, 8:41 AM

#

Oh yes!! Absolutely 🙂 You can edit the index.html directly in your web project directory and the src/main.ts file - the build step is what bundles all the code and optimizes files, you're not supposed to edit files in dist - these are final for upload 🙂

thorn hound Jul 15, 2024, 8:44 AM

#

That makes sense... and thank you for the steer! I'll give it all another go in a min (have got a Zoom meeting to attend but will get right back to it after that).

As always, big thanks for the advice, Marcel... and I'll feedback here with latest result when I retry it all 😎 🚀

narrow moat Jul 15, 2024, 8:44 AM

#

No problem, let me know how it goes 🙂

thorn hound Jul 15, 2024, 8:51 AM

#

@narrow moat WoooooooooooooHoooooooooooooo!

SUCCESS!!! 😎 🤩 🚀

I've just managed to sneak a super-quick test in before my Zoom meeting starts... and YAAAAAAAAAAAAAAAY. It's all working PERFECTLY!

Thank you! Thank you! Thank you! 🙌 🙌 🙌

narrow moat Jul 15, 2024, 8:53 AM

#

No problem
There's just one case to think about when using this: it does not tell a visitor of your website when a device doesnt support WebXR (AR or Quicklook) - ideally for those users there would be a message informing visitors about it and maybe even show a QR code to open the website on a phone.

thorn hound Jul 15, 2024, 8:54 AM

#

Yup. Agreed!

I'll get right on that 🙂 👍

Once again... big thanks for everything!!! 🥰

narrow moat Jul 15, 2024, 8:56 AM

#

        NeedleXRSession.isARSupported().then(supported => {
            if(!supported) { ... }
        })

#

and something like that should help

const qrCodeElement = ButtonsFactory.create().createQRCode()
document.body.querySelector("button.start-ar").append(qrCodeElement)

thorn hound Jul 15, 2024, 9:42 AM

#

Oooooooo, fab! Thanks for that, too! 👀 🥰 👍

stone cove Sep 29, 2024, 11:55 AM

#

Hello Marcel, I have been trying to implement this whole day but build stops when i try to deploy it to glitch. I see that maybe it is because overlay blocks "powered by needle." Any pointers for a workaround where overlay doesn't block "powered by needle" ? I mean if that is the problem

narrow moat Sep 29, 2024, 2:51 PM

#

Hi @stone cove im not sure what "the build stops" mean? Can you share more details and maybe an example?

stone cove Sep 29, 2024, 3:43 PM

#

it shows that build failed when i click "build and deploy to glitch" and I think it is because the overlay was blocking "powered by needle." It shows up on browser with yellow overlay and all, and "start ar" button below banana peel logo. I am not on indie or pro license

narrow moat Sep 30, 2024, 7:41 AM

#

Hi @stone cove could you please open a new thread on https://forum.needle.tools and add some screenshots there too? Thank you!

Needle

Needle is a tools and platform provider working on the edge of technology and creativity. Join our community to get support when using our products and have questions around Unity, Blender, threejs, glTF or web development in general. With Needle Engine we provide one of the best solutions for developing complex WebXR, multi-user web applicat...

#Custom AR/VR/Quicklook Buttons in Blender

Thanks for reaching out @thorn hound

Description

Information:

Useful Links

Did you know 💡