mold
mold

Reputation: 55

A-Frame Texture not Transparent

In my A-Frame scene I have two separate inverted spheres models with two different materials

To create the inverted sphere objects, I am using Blender. I am applying the textures in the texture menu, then applying them as materials. Then, I export the models as .dae with materials included in the export settings.

Textures window for invertedsphere2:

enter image description here

Materials window for invertedsphere2:

enter image description here

In this photo, "models/invertedsphere.dae" properly shows "glyphs.png" as the texture.

https://i.sstatic.net/atyma.jpg

Here's how my second inverted sphere appears in Blender, and how I assume it should look in A-Frame.

https://i.sstatic.net/7bfck.png

However, this is how it appears in A-Frame.

non-transparent tex

The first sphere is 5 units large in every dimension, and the second sphere is 4.7 units large in every dimension, meaning that I should be able to see the first sphere through the transparent areas of the second sphere, however this is not occurring.

How do I get the texture to show properly?

Additionally, my scene code:

<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta charset="utf-8" />
<title>Aetheria</title>
<meta name="description" content="Aetheria" />
<script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>

  <!-- Primitives. -->
  <a-box position="-1 0.6 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
  <a-sphere position="0 1.35 -5" radius="1.25" color="#EF2D5E"></a-sphere>
  <a-cylinder position="1 0.85 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
  <a-plane position="0 0.1 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
  <a-entity collada-model="model/invertedsphere/invertedsphere.dae" scale="5 5 5" position="0 1.441 -2.752"></a-entity>
  <a-entity collada-model="model/invertedsphere/invertedsphere2.dae" scale="4.7 4.7 4.7" position="0 1.441 -2.752"></a-entity>


  <!-- Background sky. -->
  <a-sky height="2048" radius="30" src="#skyTexture" theta-length="90" width="2048"></a-sky>

  <!-- Ground. -->



</a-scene>

Upvotes: 2

Views: 1263

Answers (1)

mold
mold

Reputation: 55

The solution I ended up finding involved using glTF and the process was much more complicated than I initially anticipated. I will do my best to write a condensed guide here.

  1. Clone the glTF Blender Exporter
  2. Make sure to place the scripts in your Blender add-ons directory and enable it.
  3. In the model you wish to texture/add material to, choose "File > Link" then navigate to "(working directory)/glTF-Blender-Exporter/pbr_node/glTF2.blend/Node Tree/" then select either "glTF Metallic Roughness" and/or "glTF Specular Glossiness"
  4. Open the node editor and make sure that you are displaying Shader Nodes and are taking the Shader Nodes from the object, e.g. node editor settings
  5. In the node editor menu, select "Add > Group > glTF Metallic Roughness/glTF Specular Glossiness", then click anywhere in the node editor to place it.
  6. For reference, my object is set up as so: my node tree Note that my Image Texture's Alpha Channel node connects to the Alpha Channel in the shader. This is the key part that makes the texture transparent.

NOTE: No other shaders will work besides glTF shaders at this time if exporting to glTF.

  1. Export as either .glTF or .glb. If you export as .glTF, a .glTF file and a .bin file will be created. The .bin file will contain the material and texture. If you export as a .glb file, the material and texture will be self-contained within the same file as your model.

  2. Test using the glTF viewer. I prefer it to testing in A-Frame because it gives you error output in a clear, readable fashion, and allows you to drag-and-drop models.

Upvotes: 1

Related Questions