8thwall / web Goto Github PK

I am having trouble getting the examples to run in a stable manner. When the node server is running and I connect, I am prompted with " would like to access the camera", which then rapidly reloads, leading to a never ended prompt and reload session. Even if I click "Allow", the page then continues to reload and prompt again. Once I stop running the node server, this stops and I am able to proceed as usual. I'm a node amateur, but thinking this is a server problem?

Is there anyway to take screen shot of the current canvas without the augmented objects on top of it? I want a screenshot purely of camera feed.
I am currently using A-frame and emitting screenshotrequest by scene and capture it through event listeners.
The only thing coming to my mind is making the objects invisible for a moment and redisplay them, are there any better ways?

When we try to open the AR in webview(version 91+), the camera is not loaded and it just shows a black screen and AR model comes up on a black screen and the Model gets repeatedly painted over and over.

With the new Playcanvas engine release 1.42.0, support for shadow coordinates generation in VS was removed. This has broken the shadow material generation in xrextras Playcanvas.

Error in material "XR Shadow Material" with flags 65548
ERROR: Undefined function 'getShadowPCF3x3VS()' used in the following call chain:getEmission

This error is occurring in the latest AR World Tracking Starter Kit project.

Hi , i have been working with 8th wall + ThreeJS to Render ( VIDEOS, IMAGES, 3D Objects ), I was trying to apply OrbitControls from ThreeJS docs into 8th Wall Code but I was unable to do that as of 8th Wall do a lot of Job internally, I want to know if it's possible to do that and put me on the right track .
PS : my Code looks similar to the ThreeJS Example of Placeholder on your Repo .

Thanks in advance

Hi team, We have merged a PR into master 7 days before. Can anyone tell us when will see a release with the new changes?

Hello so I recent have revived a poster from a virtual concert and I was excited to scan the QR attached

but it redirects to a 404 not found page
can we add the right url redirect

https://apps.8thwall.com/cznwixyn/livelivelive/

Fixing these posters would be very appreciated, I will also try to learn your codebase and perhaps try and contribute to this

Hi, I'm trying to develop a web AR experience with 8thwall web. It needs to be synced with the physical world and I need 6DOF for this project. I can place my objects and augment them but the problem is that the drift I experience is too much, For example, if I go 4-5 meters away from my initial location I experience about 2 meters drift. I don't experience this much drift with my ARKit projects and I also tested google's 'view in 3d' in searches on the web on Safari and that also didn't give me this much drift.
I was wondering if I'm doing something wrong and how can I minimize drift in my project. I develop on my iPhone XS
PS: I also tested a web AR sample on 8thwall website and I also experienced drift issues with that.
Thanks very much

I trying run Alpha Video example, but events xrimagefound not emitting and not found the tracking.
I using a default outside.jpg and default features from example
Does anyone have a suggestion?

Hello,
Thank you for this web sdk. I have a simple question. While trying the getting started example with aframe, I'm trying to "automatically place" an object, when recognizing first time a flat surface.
Do you have an idea about how this could be done using 8thwall sdk ?
Thank you!

I've problem with texturing of very simple 3D model on iPhone in Safari browser.
Everything works well on Android without any issues.
Here is the model that I'm trying to render.
Here is how it renders on iPhone 7

Hello,
I am new to 8th Wall and I want to track an image and display a object 3D on top of it. How can I achieve this? Thanks in advance.

Hi 8th wall tried your amazing platform, works smoothly just the video on your frames examples, the jelly fish one is not working properly. It is recognising the target but the image is not playing

When trying to work with Three.js demos I get the "Oops, something went wrong!" message, testing on Safari using an Iphone 7 with software version 13.3.1. The A-Frame demos do work correctly, but none of the ones using Three.js as a rendering platform.

This project works as expected on iOS14 but not on iOS15:
https://www.8thwall.com/8thwall/placeground-threejs

In both cases the modal asking for access to motion sensors appear, but on iOS15 there is significant drift, nothing sticks to the floor.

On iOS15, orientation/rotation of the phone is correctly detected and the placed trees rotate away, but moving left/right/forward/backwards has no effect at all.

The equivalent A-Frame project works fine on both iOS14 and iOS15:
https://www.8thwall.com/8thwall/placeground-aframe

It appears to be exclusive to ThreeJS in combination with iOS15. All my existing projects are currently broken and migrating to a-frame is too much work. I'm keen to help in any way I can to resolve this issue if that's through additional testing or providing logs.

Hi,

If I take pictures of water bottle from 4 to 5 angles, and use them as image target, will it detect the image? I have tried with water bottle but it did not detect?

Suppose I go to supermarket and try to scan a soda bottle, will it work if I have image target set from 4 to 5 angles of soda bottle?

Can anybody put some light on this?

I was making a simple iOS application with WKWebView.

Examples with ar masks work for me, but examplex with "A-Frame: Manipulate 3D Model" not running. I have request permission for "Motion sensor" -> I press "Continue" - > Allow -> and nothin

I'm testing on iPad 5th gen with iOS 15 beta and iPad 6th gen with iOS 14. When I open 8th wall through safari, everything works.

Tutorial for WKWebView which used - https://www.youtube.com/watch?v=3XTcVi7tASU

I have problems showing my example through IOS 12.2 and 13.3.1
When the device displays, it receives the message "device not authorized to view". Although I have javacripts cookies enabled and camera and microphone access is not successful. With Android devices there is no problem.

I have set up flyer demo but it's not tracking target image. I have replaced app key properly as well uploaded target image on 8th wall. While uploading image target on 8th wall, I did not see save and enable option only save is there.

Could you please help. Details of issue can be found below

https://stackoverflow.com/questions/59169987/8th-wall-image-target-not-tracking-image

Hi,

is there any licence/possibility to self-host image targets locally or do you need to do some serverside optimization?

I am trying to dynamically load model based on URL.
Unable to view in camera feed though it downloads the model.

<body onload="modelLoad()">
/*
some code...
*/
<a-assets id="assets-id">
      
</a-assets>
/*
some more  code...
*/
....

function modelLoad(){
var modelEl = document.createElement('a-asset-item');
modelEl.setAttribute('src', "phone.glb");
document.getElementById('assets-id').appendChild(modelEl);
}

is it because AFRAME.registerComponent('image-target', { gets called before body onload ?

note : Am using xrAframe-image target example.

I am using the xrextras library in my project and I always get back the canvas with style top:1px. I'm not sure, what 1px at the top is for, but it makes my app has a 1px strip at the top.

When I checkout your sample projects. For example, this one https://8thwall.8thwall.app/camera-shaders/. I also notice that 1px at the top 😆 . Is that deliberate? Should I remove that strip in my app or leave it there?

In my attached picture, there is a small white strip at the top

It is possible to implement event handling as it is done in a-frame? In my opinion, is it does not work in 8thwall

<a-camera><a-cursor></a-cursor></a-camera>

when I try to run 'npm start' its throwing error

ERROR in ./src/app.js
Module not found: Error: Can't resolve './sumerian-exports' in 'D:\Kumaresh\web-master (2)\web-master\gettingstarted\xrsumerian\src'
@ ./src/app.js 7:0-46 18:21-33
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] start: webpack && pushd serve && npm install && popd && ./serve/serve -d dist -n
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Anurag\AppData\Roaming\npm-cache_logs\2018-12-28T15_32_38_443Z-debug.log

solution thanks in advance!

It is not possible to replace the video in tags a-sky, a-videosphere, a-video
But if just use a-frame, then the video can be replaced with another video.

I'm trying to load a JSON file produced by the three.js editor. However when I try to load the JSON it is served as an HTML page with status 200 instead. I can't seem to place the JSON into the assets folder, despite it being an asset and so load from same level of the JS as that seems to be where it sits.

I need the face effects and image marker action to wait until the verification result is true then they can access them in order. Get verification from API -> open image marker -> found image -> trigger face effect

any help is very appreciated, I'm still new in this framework...

I have a phone with multiple rear cameras，and try with the demo it's use the wrong lens ，like a telescope lens，my phone is HUAWEI mate 20pro it‘’s use the 3x lens.
So is that possible to select the regular lens ?

Hey team,

I ran into a strange issue when deploying the tutorial found here.

Specifically I get the following issue when I go to serve:

`PS C:\Dev\Web\EightWallExampleProject\web-master> serve\bin\serve.bat -d gettingstarted\xraframe
8888888888888888888888888888888888888888888888888888888888888888
8
8 ""C:\Dev\Web\EightWallExampleProject\web-master\serve\bin\serve.bat"" [options]
8 -d DIR path to serve [required]
8 -p PORT default PORT=8080
8 -h hot reload on localhost
8 -r enable hot reload
8 -i IFACE choose network interface
8 -n don't print these instructions
8
8888888888888888888888888888888888888888888888888888888888888888
ECHO is off.
The filename, directory name, or volume label syntax is incorrect.
internal/modules/cjs/loader.js:895
throw err;
^

Error: Cannot find module 'C:\Dev\Web\EightWallExampleProject\web-master\src\index.js'
�[90m at Function.Module._resolveFilename (internal/modules/cjs/loader.js:892:15)�[39m
�[90m at Function.Module._load (internal/modules/cjs/loader.js:785:27)�[39m
�[90m at Function.Module.runMain (internal/modules/cjs/loader.js:1143:12)�[39m
�[90m at internal/main/run_main_module.js:16:11�[39m {
code: �[32m'MODULE_NOT_FOUND'�[39m,
requireStack: []
}`

It looks like it wants a .js file that isn't in the expected src/ folder? Sorry if this is a dumb question!

Hello,
I try since two weeks to add more than 5 image target automatic. I can't find any information or code example about it. The only line on the doc is this one
XR.XrController.configure({imageTargets: ['image-target1', 'image-target2', 'image-target3']})

Could you explain me how to make it work ? In fact I have 6 image to target... So only one that don't work for the moment.

Thanks a lot.

Testing 8th wall apps using aframe works properly on android, but the applications using directly ThreeJS are not working on android.
None of these examples work on Android, only on iPhone: https://github.com/8thwall/web/tree/master/examples/threejs
Aframe examples work properly on both Andriod and iPhone: https://github.com/8thwall/web/tree/master/examples/aframe

Hello!

Now I have a function that turns on the camera to capture the picture on the PC, but I don't want the picture to occupy the whole screen. How to achieve this? Thank you very much!

I'm not sure what the cause of the error is, but when try to load the 8i-hologram example I get an "Oops, something went wrong!" error message. This happens on both iOS (Safari) and Android (Chrome). I'm wondering if this is just happening for me (possibly some network issue) or if other people have also encountered this error.

Hi guys,

I'm considering implementing the video recording on a potential client web project, but before I go down that route I'd like to know more about this new feature.

It seems to encode the video client-side, which is great. However, with the lack of native MediaRecorder support on iOS mobile browsers, and even on Android it seems we can only encode .webm, i'm assuming you're using your own encoder packaged with the rest of your code, in web assembly or something similar. Is that correct?

My fear is that, if that's the case, then any project implementing it would have to register with MPEG-LA and be subjected to the usage terms of their AVC/H.264 patent portfolio license.
The license states that the each downloaded encoder would be counted, with the first 100k downloads/video encodes being free, and each consecutive video costing $0.20, which is not a small figure!

Have you considered how we can use this feature without incurring massive costs if the video recording part of a project is mildly successful?

Thanks in advance for any help you can give me.

Leo

Hello, I'm trying to augment an image by playing a video on it. The aim is to make the video size dynamic according to the image to be augmented. How do I achieve this, as I cannot seem to set the value of geometry dimension via assets. Thank you!

Hi,

I have an image recognization and would like to change the position of 3D model relative to the image. But the following code with attribute position does not work:

<a-entity xrextras-named-image-target="name: fox">
    <!-- Add a child entity that can be rotated independently of the image target. -->
    <a-entity xrextras-one-finger-rotate gltf-model="#mech_drone_glb" position="-100 100 0"></a-entity>
</a-entity>

Could you please help?
Thank you

I downloaded this project a few weeks ago and installed the serve script. That is currently still working on my local computer. However, if I reclone this repo, and npm install the serve script now, it causes a loop in the browser's privacy menus when I hit my localhost on mobile.

https://github.com/8thwall/web/tree/master/serve

The only difference is the node_modules folder. It works when I use the node_modules folder fro a few weeks ago. But not when I install a fresh copy. Any thoughts?

In these images, I hit "Show Details", then "visit this website".But it loops back around again to the first privacy page again and again.

I think it might be better to not move the canvas to be the direct child of the body? or at least offer an option?

https://github.com/8thwall/web/blob/master/xrextras/src/fullwindowcanvasmodule/full-window-canvas-module.js#L132

I'm using the following configuration for the MediaRecorder:

XR8.MediaRecorder.configure({
    maxDurationMs: 5000,
    maxDimension : 1024,
    enableEndCard : false
 });

The settings for maxDurationMs and maxDimension are working, but the end card on the video is still being applied.

Hello,

First of all, thank you for 8th wall.
I have a project that displays video in AR mode without any image recognition.
The problem is that i managed to display mp4 videos and any type on android, but not an only video worked in iOS.
I tried different devices, different OS versions (even iOS 11 and 13), different videos formats, (mp4, mov, ogv ...) nothing works.
Here an example of what i'm doing :
<video id="video" loop crossOrigin="anonymous" webkit-playsinline style="display:none"> <source src="my_video.mp4" type='video/mp4'> </video>

I have no issues by images by the way (so the website is whitelisted and everything is great)
And i have no problem with CORS because the video is on my server,

I could send you a private message for the link to be tested by you, i really tried every solution and i have an agency subscription.

Any help is welcome,

Hi - I'm trying to implement the post processing stack of threejs. Do you have an example of this? I'm trying to port a working non-ar example of this into threejs. Normally what I would do is create a webGL renderer:

renderer = new THREE.WebGLRenderer({alpha: true});
renderer.setSize( ww,wh );
document.body.appendChild( renderer.domElement );

and then add all my passes:

composer = new THREE.EffectComposer( renderer );
composer.addPass( new THREE.RenderPass( scene, camera ) );

dotEffect = new THREE.ShaderPass( THREE.DotScreenShader );
dotEffect.uniforms[ 'scale' ].value = 4;
composer.addPass( dotEffect );

...

I noticed a few things:

• I'm not sure how to refer to my renderer in 8th wall, so I can't pass a reference to it to my effect composer.

• The post processing stack does not seem to be loaded by default so I have to load all the scripts individually.

Any idea how to get going with this? I'm just trying to incorporate it into the 8thwall / web / gettingstarted / xr3js example.

Hi, I'm trying to get the quick start app working so that I can serve it locally, using the quick start guide https://console.8thwall.com/quick-start-web. I've got the project building and have tried using en0 and en4 as the network interface. I went into my phone's Safari browser and it says that the device is authorized (I authorized it via qr code as well as I logged into my 8thwall console via my phone's Safari browser). But every time I go to the address with the port (https://192.168.0.203:8082) it shows the popup saying "Device Not Authorized to View https://192.168.0.203.

Not sure what else to do? Am I missing something?

Thanks

Once a video has been detected and paused while playing, the video automatically resumes in the background when restarting the server. How do I fix this? Thank you!

When I tried to run server with hot-reload enable, I got this error

Become brighter color when screenshot on android (Pixel 3).
Become psychedelic color when screenshot on iPhone.

Also, its state is maintained on canvas.

For example, when

const fs = 'void main() { gl_FragColor = vec4(0.5) }'

AFRAME.registerShader('sample', {
  fragmentShader: fs
})

const el = document.createElement('a-plane')
el.setAttribute('material', 'shader: sample; transparent: true;')

Hi, it is my first time developing a web AR app using 8thWall and A-Frame. I start using Flyer example and edit its model, video target, and content. Then I found two issues, that is:

• Video keep playing in the background even though its marker is not scanned
• Video still can be played (by tap) on its last scanned marker location (without a scanned marker in camera)

I wonder how to fix those, thank you very much and have a nice day!

Hello, I tried to create a green screen & SLAM project, using 8th Wall's example.

However, the video isn't playing on neither the example (alpaca) nor my project.

It just shows the 1st frame of the video as a static image.

I didn't change anything from the example except replacing the video with my own (but even the default one doesn't work).

Does anyone have any suggestions?

Thank you

Regarding this example project: Reflections [https://www.8thwall.com/8thwall/cubemap-aframe/master/app.js](Realtime & Static Cubemap)

On https://github.com/8thwall/web/blob/master/examples/threejs/flyer/index.html

line 18, there is

That link leads to a 404 page.

That issue may not just be on the three.js/flyer example page, but on others as well.

The current URL should be https://github.com/8thwall/web/tree/master/xrextras