AR-js-org/AR.js

Tutorial: location-based-three

YasserB94 opened this issue · 1 comments

YasserB94 commented

Do you want to request a feature or report a bug?
🐞Report a bug 🐞

What is the current behavior?
On the first step of the tutorial as long as I can correctly render the red box using ThreeJS
Once I add the AR.js related code I start running into issues.

  • ✅The webcam correctly requests for the needed permissions and is in use by the browser
  • 🐞No video element is added to the dom as described in the guide
  • 🐞The webcam cannot be seen anywhere

I am greeted by several errors and warnings in the console:

  • 🐛WARNING: Multiple instances of Three.js being imported.
  • 🐛THREE.PlaneBufferGeometry has been renamed to THREE.PlaneGeometry.
  • 🐛THREE.WebGLProgram: Shader Error 0 - VALIDATE_STATUS false
  • 🪳Program Info Log: Must have a compiled vertex shader attached:
SHADER_INFO_LOG:
ERROR: 0:327: 'uvundefined' : undeclared identifier
ERROR: 0:327: 'constructor' : not enough data provided for construction
VERTEX
  • 🐞ERROR: 0:327: 'uvundefined' : undeclared identifier
  • 🐞ERROR: 0:327: 'constructor' : not enough data provided for construction
    VERTEX
322: void main() {
  323: #if defined( USE_UV ) || defined( USE_ANISOTROPY )
  324: 	vUv = vec3( uv, 1 ).xy;
  325: #endif
  326: #ifdef USE_MAP
> 327: 	vMapUv = ( mapTransform * vec3( MAP_UV, 1 ) ).xy;
  328: #endif
  329: #ifdef USE_ALPHAMAP
  330: 	vAlphaMapUv = ( alphaMapTransform * vec3( ALPHAMAP_UV, 1 ) ).xy;
  331: #endif
  332: #ifdef USE_LIGHTMAP
  333: 	vLightMapUv = ( lightMapTransform * vec3( LIGHTMAP_UV, 1 ) ).xy;
three.module.js:19936:12
  • 🐛WebGL warning: linkProgram: Must have a compiled vertex shader attached:
    SHADER_INFO_LOG:
  • 🐛ERROR: 0:327: 'uvundefined' : undeclared identifier
  • 🐛ERROR: 0:327: 'constructor' : not enough data provided for construction
  • 🐛WebGL warning: useProgram: Program must be linked successfully.
  • 🐛WebGL warning: drawElementsInstanced: The current program is not linked.

Then a couple more warnings and:
🐞After reporting 32, no further warnings will be reported for this WebGL context.🐞

If the current behavior is a bug, please provide the steps to reproduce.

Reproduce by following the tutorial about location-based-arjs-with-threejs from the official documentation website.

Please mention other relevant information such as the browser version, Operating System and Device Name
Tested on:

  • 💻 Firefox,Firefox Dev,Chrome,Brave,Safari
  • 📱iOS - Safari,Chrome

What is the expected behavior?

  • To learn something trough the tutorials and not have errors everywhere when following the documentation to the letter.
  • I was hoping to see at least a cube on a webcam view

If this is a feature request, what is motivation or use case for changing the behavior?

froston commented

Hey. I figured out installing older version of three.js fixes some of the issues. However I'm still having a problem with three objects quickly appearing in the beggining and then dissapearing from the scene. Found a hacky fix for it but I would appreaciate AR.js fixing the location based bugs.

{
  "dependencies": {
    "@ar-js-org/ar.js": "3.4.5",
    "three": "0.150.0"
  },
}
  • ❤️2