bryik / aframe-cubemap-component Goto Github PK

A-Frame Version: 0.7.0 (Date 22-09-2017, Commit #570c623e)
index.js:87 three Version: ^0.87.0
index.js:88 WebVR Polyfill Version: ^0.9.36
three.js:20919 THREE.WebGLRenderer 87
2browser.js:111 core:schema:warn Unknown property transparent for component/system cubemap.
three.js:18007 THREE.WebGLProgram: gl.getProgramInfoLog()

I am using some textures I've been using in unity that seem to work fine in there, but in the aframe cubemap component it shows slight white edges. Changing the edge length doesn't seem to change the size of the box, so I'm not sure how to combat this. You can see the edges in the image - is this something wrong with the images themselves or is there something I can do to fine tune it with the component?

For some reason npm run dist fails at this line. Seems like the minifier can't handle let.

It's been ages since this project was setup--could use some re-tooling.

Chrome: Version 103.0.5060.53 (Official Build) (arm64)
OS: MacOS v12.4 on an M1 Macbook Pro.

Strange as it works in FireFox and in iOS Chrome on my iPad (which also runs an M1).

Rapidly changing the folder property causes unpredictable behaviour.

<a-scene>
  <a-entity id="skybox" cubemap="folder: /assets/Yokohama3/"></a-entity>
</a-scene>
<script type="text/javascript">
  setTimeout(changeBackground, 2000);

  function changeBackground() {
    let skybox = document.querySelector("#skybox");
    skybox.setAttribute("cubemap", "folder: /assets/GoldenGateBridge2/");
    skybox.setAttribute("cubemap", "folder: /assets/Yokohama3/");
    // Which cubemap will be displayed?
  }
</script>

The cubemap that ultimately gets displayed depends on the order texture load callbacks are executed which is random. It is quite easy to end up in situations where component data is inconsistent with the displayed texture:

In the above, /assets/GoldenGateBridge2/" is displayed, but data.folder is "/assets/Yokohama3/".

Proposed fix

The texture load callback is closed over the original folder path it was called to load (srcPath) and can be given access to the current component data by binding this. By comparing past and current folder paths, the texture load callback can figure out what to do.

// Within the texture load callback
if (srcPath !== this.data.folder) {
  // The texture that just finished loading no longer matches the folder
  // set on this component.
  texture.dispose();
  return;
}
// The folder property has not changed, so go ahead with the texture update.

Does it support stereo cubemap as https://github.com/wallabyway/aframe-stereocube ?

No longer works with more recent version of threejs. Same as this issue here:
https://stackoverflow.com/questions/59454931/three-js-r111-three-shaderlib-cube-uniforms-tcube-to-envmap-issue

A-Frame has rudimentary support for threejs scene background:

• Original suggestion: aframevr/aframe#2908
• Simple source code, only supports solid colors: https://github.com/aframevr/aframe/blob/master/src/components/scene/background.js

The core A-Frame background scene component could be improved, or this custom component could be updated to support newer versions of threejs:

• https://threejs.org/docs/#api/en/scenes/Scene.background
• https://threejs.org/docs/index.html#api/en/textures/CubeTexture

Hi,

I'm looking for a solution to have a fadeout / fadein effect after a new cubemap has loaded.

Here is a code snippet which shows the fade effect:
https://github.com/aframevr/360-image-gallery-boilerplate/blob/master/components/set-image.js

And here is the project site where you can see the fade effect when pressing the link buttons:
https://aframe.io/360-image-gallery-boilerplate/

The same should be done also for cubemap components:
Component that listens to an event, fades out an entity, swaps the texture, and fades it back in.

Regards.

The PNG extension example should also demonstrate transparency, but the milky way is hidden by the "transparent" PNG cubemap.

Not sure when/how this broke. Setting the opacity of the cubemap's shaderMaterial does reveal the milky way, so transparency still works to some degree.

var skyBoxShader = new THREE.ShaderMaterial({
  fragmentShader: shader.fragmentShader,
  vertexShader: shader.vertexShader,
  uniforms: shader.uniforms,
  depthWrite: false,
  side: THREE.BackSide,
  transparent: data.transparent,
  opacity: 0.5,
});

In my project I have previously used the A-Frame a-assets asset loader to load the equirectangular sky image. That same asset is also used as a sphericalEnvMap on materials for reflections.

For example:
<a-ocean-plane height="100" width="100" position="0 -1 0" material="sphericalEnvMap: #sky;"></a-ocean-plane>

I am attempting to convert this to cubemap. It turns out a cubemap can be referenced from a-asset loader as well, example pasted here for convenience:

<a-assets>
    <a-cubemap id="sky">
      <img src="right.png">
      <img src="left.png">
      <img src="top.png">
      <img src="bottom.png">
      <img src="front.png">
      <img src="back.png">
    </a-cubemap>
  </a-assets>

It would be nice to support this syntax to allow passing a selector such as #sky instead of the path for files for the cubemap component, this way the files can be loaded once and referenced from multiple components.

More info from A-Frame source code:
https://github.com/aframevr/aframe/search?q=a-cubemap

Hi, Ben！
You really did a good job! The cubemap component helps me a lot. But when I put 2 cubemap in a scene like below, it seems that the sky4's images will be overwritten by the sky5's images.
<a-entity id="sky4" cubemap="folder: ./assets/sky4/" visible="true"></a-entity>
<a-entity id="sky5" cubemap="folder: ./assets/sky5/" visible="false"></a-entity>
So, I think maybe this component doesn`t support multi-cubemap in a scene. But I believe it would be feasible to realize this feature. Unfortunately I'm a rookie of js, and I don't know how to do it, so I create this issue to ask you for help. It will be highly appreciated if you could help me to realize this feature.

The removal of Browserify requires a new solution for the live demo. I had hoped it would "just work" but seems like the paths are screwed up in GitHub Pages when I set it to use the master branch.

The Code for the yokohama example didn't work. To fix it use:

<html>
	<head>
	<title>A-Frame Cubemap Component - Yokohama</title>
	<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
	<script src="https://unpkg.com/[email protected]/dist/aframe-cubemap-component.min.js"></script>
	</head>
	
	<body>
	<a-scene>
		<a-entity cubemap="folder: ../assets/Yokohama3/"></a-entity>
	</a-scene>
	</body>
</html>

This also works in a local environment.

Questions:

• Can I push changes or contribute anyway?
• How can I build the project to get a min.js in dist?

Sky component (using equirectangular):

Cubemap component (same equirectangular from above converted to cube map using this tool):

Appears to be same as this issue:
https://discourse.threejs.org/t/r99-cubemap-brighter/5496

Discussion points:

• Should this be a user option to set encoding?
• Or, should sRGB be the default? If so then I think it's as simple as inserting a new line above 84 such as texture.encoding = THREE.sRGBEncoding;

Related discussion:

• https://discourse.threejs.org/t/gltf-glb-files-and-renderer-gammafactor/9490/3

Events

cubeTextureLoaded seems to be cubemapLoaded?

Fade demo.

Expectation: It should be fading back and forth between two different panoramas.

Reality: It is alternating between black and white with no visible panoramas.

Can I request this component be available on npm please?