A-Frame nested plane element not shown correctly - aframe

I have a a-plane nested in another a-plane.
<a-plane width="10" height="5" color="#FFFFFF">
<a-plane width="10" color="#000080"></a-plane>
</a-plane>
But the result looks like this
I also tried it with a nested a-image and had the same result. I also tried to remove the inner plane and add it outer and to the same position. But I've got always the same result.
A-Frame Version: 0.9.2

You've placed two planes in an identical position. The renderer does not know which one should be in front of another (since they are planes and their transforms are identical) - and hence you experience z-fighting.
You need to position one of the planes so that they won't overlap:
<a-plane>
<a-plane position='0 0 -0.001'>
</a-plane>
</a-plane>

Related

Is there a way to reflect a sphere so that it behaves as a skybox in A-frame? (A-frame docs suggestion not working)

I followed the docs exactly as described (refer
https://aframe.io/docs/master/components/scale.html)
in a super basic WebVR scene on Glitch and it seems the code related to reflecting a sphere along the Z-axis won't work. It seems to be fairly straightforward, so I can't imagine why there should be any trouble. Am I doing something stupid or is it really not working? I know I could use a-sky but I want more control over position, rotation, etc (it needs to be an element in the world).
A-Frame Version: 1.0.4
Platform / Device: Windows ASUS Rog Zephyrus Laptop, Desktop browser (tested on Firefox and Edge)
Reproducible Code Snippet or URL: https://east-stock.glitch.me/. Ideally, you shouldn't be able to see the sphere from "outside" it, as in this scene, and the red should appear once you navigate "inside" the sphere.
Just so you have it, this is what I put in my scene:
<a-entity
geometry="primitive: sphere; radius: 4"
material="color: red"
scale="1 1 -1"
position="0 0 -5"
></a-entity>
You need to add some properties to the material of the sphere to get it to work.
<a-entity
geometry="primitive: sphere; radius: 4"
material="color: red; side: back; shader: flat; "
scale="1 1 1"
position="0 0 -5"
></a-entity>
You only want to show the 'back' of the faces of the sphere, that's what the side:back does. You probably don't want the sphere to reflect the light, therefore in this case I would add the shader:flat parameter so it is rendered flat.

How to rotate a glTF model on the spot in A-Frame?

I am rotating a glTF model of the moon. I want it to rotate around its center, rather than around the center of the scene.
I tried the answer here:
How to change the rotation axis for an animated A-Frame object?
but it doesn't seem to work for me (the object doesn't rotate at all).
I have tried the code here as well: https://blog.prototypr.io/learning-a-frame-how-to-do-animations-2aac1ae461da
But the object doesn't rotate when I use that either.
So far I have only been able to get it to rotate using this code:
<a-entity gltf-model="#moon" scale="0.5 0.5 0.5" position="0 0 0"
animation="property: rotation; to: 0 360 0; loop: true; dur: 10000"></a-entity>
But using that, it rotates around the center of the scene rather than rotating on it's own central axis, if that makes sense. (Global axis rather than local axis?)
This is how I am loading in A-Frame:
<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script>
Add a parent entity around it then the model will rotate around that.
<a-entity>
<a-entity gltf-model="#moon" scale="0.5 0.5 0.5" position="0 0 0"
animation="property: rotation; to: 0 360 0; loop: true; dur: 10000"></a-entity>
</a-entity>
The other way to fix this is to place your axis in the 3D app that created the model, and export the gltf again.

Specifying order of objects in aframe

Is there something similar to z-index of CSS in aframe?
i.e, if I have two objects in the xz plane, how do I make one overlap the other?
There's no z-index but there's a z axis. In A-frame you're using a "right-handed coordinate system where the negative Z axis extends into the screen"
https://aframe.io/docs/0.7.0/components/position.html#value
This one helps visualize it:
https://www.evl.uic.edu/ralph/508S98/coordinates.html
So to play with the concept of z-index of two objects, you would change their z-axis position attributes:
<!-- front object -->
<a-entity position="0 0 -2"></a-entity>
<!-- back object -->
<a-entity position="0 0 -2.1"></a-entity>

Add Speed to WASD Controls for A-Frame

How can I increase the speed of the WASD Controls for my WebVR page?
Because now it goes really slow.
<a-entity position="0 1.8 0" camera look-controls wasd-controls>
<a-camera id="camera">
<a-cursor color="#333" maxDistance="30"></a-cursor>
</a-camera>
</a-entity>
The wasd-controls component has several options, described in the A-Frame v0.4.0 docs. Increasing acceleration, or decreasing easing, will both make the camera move faster.
<a-entity camera look-controls wasd-controls="acceleration: 100">
<!-- ... -->
</a-entity>
The acceleration config does not affect top speed. If you are looking to change top speed, I made a fork of aframe that includes configs for speed as well as new features like gravity, look sensitivity, and Y-axis inversion.

SVG stacked elements color overlap

I have an SVG element that contains two <circle> children with the exact same dimensions and position. The only difference between the two is their color: the first one is red and the second is green. I've noticed that, even though the green circle is above the red, you can still see a little bit of color shift at the edges of the circle. Is there any way I can avoid this change in color?
Here's a screenshot of how it looks like with and without the red circle beneath:
Also here's the fiddle that I'm using to reproduce this.
And these are some of the solutions that I've tried but didn't work:
Trying out the different values for shape-rendering on the SVG - Setting it to crispEdges sort of worked, but made the edges very jagged. All other values didn't work.
Adding a slight blur to the top element - Didn't work very well and even made the color shift more visible.
Making the top element slightly larger - Works but it's not optimal since I'll be using this with an arc and the bottom element has to be exactly the same.
Any different ideas are welcome.
You can use a filter to dial down the anti-aliased fringe. This will have the same effect as a crispEdges should.
<svg>
<defs>
<filter id="edge-removal">
<feComponentTransfer>
<feFuncA type="table" tableValues="0 0 0 0 0 0 0 0 0 0 1" />
</feComponentTransfer>
</filter>
</defs>
<g filter="url(#edge-removal)">
<circle r="250" cx="275" cy="275" stroke="#FF0000" fill="none" stroke-width="50"></circle>
<circle r="250" cx="275" cy="275" stroke="#00FF00" fill="none" stroke-width="50"></circle>
</g>
</svg>

Resources