8th Wall Renderer Causing Issues

🧑‍💻 Technical Support
1

I have a simple project that I’m troubleshooting. The only assets are 2 buttons, a logo, and text, all in HTML. I designed the buttons to change the text when selected. When I go to test the project in the simulator, I can see what I’ve programmed correctly working over a white background.

However, as soon as I enable <meta name="8thwall:renderer" content="aframe:1.3.0" />, the original assets stop rendering and all I get is the simulators moving background.

All of my HTML assets are programmed outside of the <a-scene> section. My JS Script is in the “head.html” and comes after the Meta import section. I also have a “main.css” file, but I can’t see how that would effect the simulator since it worked fine without the <meta name="8thwall:renderer" content="aframe:1.3.0" /> enabled.

body.html

<!-- Logo -->
<img id="logo" src="assets/images/logo_Small.png"></img>

<!-- Buttons -->
<button id="prev" onclick="prev()"><</button>
<button id="next" onclick="next()">></button>

<!-- Shows/Hides HTML Assets -->
<p id="name">Bamboo</p>

<a-scene></a-scene>

head.html

<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="8thwall:renderer" content="aframe:1.3.0" />
<meta name="8thwall:package" content="@8thwall.xrextras" />
<meta name="8thwall:package" content="@8thwall.landing-page" />

<script></script>

Any idea why this is happening?

2

What are you trying to achieve? Do you want to show your 2D UI in front of the camera feed/simulator video? If so, I’d recommend checking out this sample project:

3

Hiya Matthew,

Just to give you a bit more context - the a-scene is getting rendered at z-index 0, and is rendering on top of your html elements.

You could move the a-scene to z-index -1 ( lower ), or set the z-index of your elements to 1 ( higher ). Note that when you set the z-index of your elements, you’ll need to also set the position attribute ( to eg relative, absolute etc )

It might be better to contain your UI elements in a parent div, and give this div a z-index of 1, a position of absolute, and a top of 0 ( using css, or directly using the style attribute, eg…

<div style="z-index: 1; position: absolute; top: 0">
  <img id="logo" src="assets/images/logo_Small.png"></img>
  
  <!-- Buttons -->
  <button id="prev" onclick="prev()"><</button>
  <button id="next" onclick="next()">></button>
  
  <!-- Shows/Hides HTML Assets -->
  <p id="name">Bamboo</p>
</div>

Hope that helps you understand why you are seeing what you’re seeing, in a very simple example!

1 Like
4

@Evan,

Thank you. I will look through the code. I may have originally started with that project, but it still might yield some insight.

5

@Mal_Duffin,

Thank you! This is the type of thing I thought I was missing. Position as the issue makes total sense. And the suggestion of making a parent div and positioning it in front makes sense as well. I’m looking forward to applying these ideas later this evening.

1 Like
6

@Mal_Duffin

So this seems to be doing the trick when applied to my new, parent div. However, the issue I’m having now is that the logo and text are showing without the buttons. The button’s CSS positions the buttons at the bottom of the screen, which might be the issue.

Example CSS from one of the buttons…

#next {
  width: 20vw;
  height: auto;
  position: absolute;
  bottom: 6vh;
  right: 10vw;
  border: 0.2em solid green;
  text-align: center;
  padding: 0.4em;
  color: #fff;
  border-radius: 100px;
  background-color: black;
  background-size: cover;
  visibility: visible;

The only thing I can see being a possible issue is the bottom position. Other than that, nothing really sticks as an issue. Any ideas?

7

Hiya Matthew,

If you want the parent div to act like a full-screen overlay, you’ll need to add in more css styling for the divs width and height to make it cover the screen dimensions.

This is some css I’ve used in a recent project, there are probably a few different ways to do it.

.fullWidthHeight {
  width: 100vw;
  height: 100vh;
  max-height: 100vh;
  max-height: -webkit-fill-available;
  min-height: 100vh; 
  min-height: -webkit-fill-available;
}

<div class="fullWidthHeight">

Hope that helps!

8

@Mal_Duffin

Awesome! That worked. I added the class and now I can see the buttons. I’ll have to play with the settings now to fully understand the settings, but am grateful for the answer.

Cheers!
MC

1 Like
9

@Mal_Duffin

So I finally got everything to been seen and the logic to work correctly as well. Big accomplishment for me. There’s just one hiccup. Now that the logic and visuals are working as expected, I’ve lost the interactivity with the GLB model. I’m guessing it has to do with the layering again, but pushing them behind the Z axis, zero point seems like I’ll end up with the same issue that I started. Would that be true?

10

Hiya Matthew,

The loss of interactivity is due to the overlay div capturing the events, and requires more css to fix.

When doing something like this, you can turn off user input for the div, and turn it on for specific interactive elements.

.removeInteractivity {
  pointer-events: none;
}

.addInteractivity {
  pointer-events: all;
}

<div class="fullWidthHeight removeInteractivity">
  <button class="addInteractivity" id="prev" onclick="prev()"></button>

...

At this stage, you’re working with regular html browser rules - the layer is treated like any other element, and you need to deal blocking or enabling how the input filters down from higher elements.

Hope that helps!
Mal

11

@Mal_Duffin

Hey Mal,

I’ve applied the new adjustments and it works, kinda. The buttons work and I can scale the glb, but moving and rotating the glb seems disabled or conflicting with the html. I’ll poke at it this weekend to see if I can figure out the best settings to get everything working.

I’ll have to refresh myself on the html browser rules to figure out why they are conflicting with the xrextras.

Cheers,
MC

2 Likes