Logging in ECS Studio

🧑‍💻 Technical Support
1

Hello,
I am new, but I need a starter tip, how do you handle debugging in studio? I am writing a video shader, and some other custom components for the experience I am building.

But I have a hard time setting properties. and wanted to log. but console.log() is not working. please help.

import * as ecs from '@8thwall/ecs'

const {THREE, XR8} = window as any

let material = null

ecs.registerComponent({
  name: 'video-shader',
  schema: {
    videoUrl: ecs.string,
  },
  schemaDefaults: {
    videoUrl: 'what_is_on_the_edge.mp3',
  },
  data: {
    time: ecs.f32,
  },
  add: (world, component) => {
    ecs.Material.remove(world, component.eid)
    const object = world.three.entityToObject.get(component.eid)

    const videoUrl = 'blank'

    // Create video element and texture
    const video = document.createElement('video')

    video.src = 'what_is_on_the_edge.mp3'  // Replace with your video path
    video.loop = true
    video.muted = true
    video.play()

    const videoTexture = new THREE.VideoTexture(video)
    videoTexture.minFilter = THREE.LinearFilter
    videoTexture.magFilter = THREE.LinearFilter
    videoTexture.format = THREE.RGBFormat

    material = new THREE.ShaderMaterial({
      uniforms: {
        time: {value: 0},
        videoTexture: {value: videoTexture},
      },
      vertexShader: `
        varying vec2 vUv;
        void main() {
          vUv = uv;
          vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
          gl_Position = projectionMatrix * mvPosition;
        }
      `,
      fragmentShader: `
        uniform float time;
        uniform sampler2D videoTexture;
        varying vec2 vUv;

        void main(void) {
          vec4 videoColor = texture2D(videoTexture, vUv);
          float brightness = 0.5 + 0.5 * sin(time);
          gl_FragColor = vec4(videoColor.rgb * brightness, videoColor.a);
        }
      `,
    })

    object.material = material
    object.traverse((node) => {
      if (node.isMesh) {
        node.material = material
      }
    })

    window.addEventListener('click', XR8.XrController.recenter)
    window.addEventListener('touchstart', XR8.XrController.recenter)
  },
  tick: (world, component) => {
    material.uniforms.time.value = world.time.elapsed * 0.001
  },
  remove: (world, component) => {
    // Cleanup logic if needed
  },
})
2

You handle logging the same way you do when developing a standard webpage – using console.log(). I don’t see any logs in the code provided.

I would reccomend adding a simple log just inside the add function, to verify the component is being registered and attached to an entity:

add: (world, component) => {
  console.log('add')
}

If you don’t see this log in the streamed console, be sure you’re attaching your custom component to an entity in the properties panel.

2 Likes
3

thanks. was a noob mistake as I said. IDE gave me errors but it was actually working.

4

This topic was automatically closed 4 days after the last reply. New replies are no longer allowed.