CODEWITHSUNDEEP
javascriptaframechromakey8thwall-xr
SurinderBhomra
SurinderBhomra

Reputation: 2199

8thWall - Thumbnail Image Black When Using Chromakey Shader

I'm new to using 8thWall and been adapting the Image Targets Flyer from the 8thWall library as a starting point for my own project.

I'm noticing that when I add a Chromakey shader to the a-entity tag, the initial thumbnail image is always rendered black and not showing the intended image. When Chromakey is not used, I can see the thumbnail correctly.

Here is my code so far:

<!-- Copyright (c) 2021 8th Wall, Inc. -->
<!-- body.html is optional; elements will be added to your html body after app.js is loaded. -->
 
<a-scene
  xrextras-gesture-detector
  xrextras-almost-there
  xrextras-loading
  xrextras-runtime-error
  renderer="colorManagement:true"
  xrweb="disableWorldTracking: true">

  <a-assets>
    <img id="jelly-thumb" src="assets/video-thumbnail.png">
    <video
      id="jelly-video"
      crossorigin="anonymous"
      src="assets/jellyfish-video.mp4">
    </video>
  </a-assets>

  <a-camera
    position="0 4 10"
    raycaster="objects: .cantap"
    cursor="fuse: false; rayOrigin: mouse;">
  </a-camera>

  <a-light type="directional" intensity="0.5" position="1 1 1"></a-light>

  <a-light type="ambient" intensity="0.7"></a-light>

  <!-- Note: "name:" must be set to the name of the image target uploaded to the 8th Wall Console -->
  <xrextras-named-image-target name="video-target">
    <a-entity 
      xrextras-play-video="video: #jelly-video; thumb: #jelly-thumb; canstop: true"
      geometry="primitive: plane; height: 1; width: 0.79;"
      material="shader: chromakey; src: #jelly-video; color: 0.1 0.9 0.2">
    </a-entity>
  </xrextras-named-image-target>
</a-scene>

I have ensured my project is referencing the aframe-chromakey-material.min.js JavaScript plugin within the head.html.

Any help appreciated!

Upvotes: 2

Views: 616

Answers (1)

Ambriel.AR
Ambriel.AR

Reputation: 31

https://www.8thwall.com/playground/alpha-video-slam-aframe/code/body.html

One of the things to keep in mind is if the video is at t=0 it can render black. I have found that changing src=“./assets/alpaca.mp4#t=0.001” fixes this problem. Basically you skip the initiation frame and start the video.

Upvotes: 1

Related Questions