Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

A-Frame non-standard texture rendering behavior compared to Chrome / FF #1186

Closed
kfarr opened this issue Jun 9, 2019 · 5 comments

Comments

Projects
None yet
2 participants
@kfarr
Copy link

commented Jun 9, 2019

Describe the bug
I have a simple A-Frame scene using a-plane entities with a transparent png texture to create a rudimentary 3D gaming object.

In Chrome and FF, the planes render as expected to display a bus and shadow. However, in Exokit there are unexpected textures displaying, such as the side of the bus rendering on the shadow, or additional wheels showing up.

To Reproduce
Steps or commands ran to reproduce the behavior:

  1. Go to https://kfarr.github.io/aframe-bus/test-bus-wasd-texture-issue.html on chrome (non-webvr)
  2. See screenshot [A] showing bus rendering as expected (after adjusting camera position by zooming in using scroll wheel)
  3. Go to https://kfarr.github.io/aframe-bus/test-bus-wasd-texture-issue.html on exokit in webvr mode using node . -x webvr https://kfarr.github.io/aframe-bus/test-bus-wasd-texture-issue.html
  4. See the incorrect textures in screenshot [B]

Additional context

System information:

  • OS: Windows 10

  • Exokit Version [e.g. v0.0.512]
    exokit master branch hash: f01d085

  • Node version
    v11.13.0

  • Npm version/build log if applicable

  • Is your Exokit downloaded or built?
    built

Screenshots
If applicable, add screenshots to help explain your problem.

[A] screenshot working as expected in chrome
Screenshot (55)

[B] screenshot not working as expected with red markup
Screenshot (53)_LI

@modulesio

This comment has been minimized.

Copy link
Member

commented Jun 9, 2019

I wonder if this has to do with a texture stride or flip during upload 🤔.

additional wheels showing up

That made my day, thanks. 😄

@modulesio modulesio added the bug label Jun 9, 2019

@modulesio

This comment has been minimized.

Copy link
Member

commented Jun 12, 2019

Will need to reduce this one to just the bus.

@modulesio

This comment has been minimized.

Copy link
Member

commented Jun 12, 2019

Current hypothesis is that this is a texture resize issue. THREE.js resizes textures by drawing to a side 2D canvas. If that is not properly cleared, you would expect artifacts like this.

THREE.WebGLRenderer: Texture has been resized from (1024x1280) to (1024x1024).
THREE.WebGLRenderer: Texture has been resized from (2560x2560) to (2048x2048).
THREE.WebGLRenderer: Texture has been resized from (767x186) to (512x128).
THREE.WebGLRenderer: Texture has been resized from (815x240) to (512x128).
THREE.WebGLRenderer: Texture has been resized from (725x151) to (512x128).
THREE.WebGLRenderer: Texture has been resized from (767x186) to (512x128).
THREE.WebGLRenderer: Texture has been resized from (162x168) to (128x128).
THREE.WebGLRenderer: Texture has been resized from (280x280) to (256x256).
@modulesio

This comment has been minimized.

Copy link
Member

commented Jun 12, 2019

I think clearing the canvas2d when requesting a context (getContext('2d') fixes it. Exokit currently reuses the context rather than making a new one.

@kfarr

This comment has been minimized.

Copy link
Author

commented Jun 14, 2019

confirmed fix!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.