matrix-engine-wgpu 1.3.13 → 1.3.16

package/src/engine/mesh.js

@@ -1,475 +0,0 @@
-import {mat4, vec3} from 'wgpu-matrix';
-import {Position, Rotation} from "./matrix-class";
-import {createInputHandler} from "./engine";
-import {vertexShadowWGSL} from '../shaders/vertexShadow.wgsl';
-import {fragmentWGSL} from '../shaders/fragment.wgsl';
-import {vertexWGSL} from '../shaders/vertex.wgsl';
-import {downloadMeshes} from './loader-obj';
-
-export default class MEMesh {
-
-  constructor(canvas, device, context, o) {
-
-    this.done = false;
-    this.device = device;
-    this.context = context;
-    this.entityArgPass = o.entityArgPass;
-
-    this.mesh = o.mesh;
-    this.inputHandler = createInputHandler(window, canvas);
-    this.cameras = o.cameras;
-    this.mainCameraParams = {
-      type: o.mainCameraParams.type,
-      responseCoef: o.mainCameraParams.responseCoef
-    }
-    this.lastFrameMS = 0;
-    this.texturesPaths = [];
-    o.texturesPaths.forEach((t) => {this.texturesPaths.push(t)})
-    this.presentationFormat = navigator.gpu.getPreferredCanvasFormat();
-    this.position = new Position(o.position.x, o.position.y, o.position.z);
-    // console.log('cube added on pos : ', this.position)
-    this.rotation = new Rotation(o.rotation.x, o.rotation.y, o.rotation.z);
-    this.rotation.rotationSpeed.x = o.rotationSpeed.x;
-    this.rotation.rotationSpeed.y = o.rotationSpeed.y;
-    this.rotation.rotationSpeed.z = o.rotationSpeed.z;
-    this.scale = o.scale;
-
-    // new
-    this.runProgram = () => {
-      return new Promise(async (resolve) => {
-        this.shadowDepthTextureSize = 1024;
-        const aspect = canvas.width / canvas.height;
-        this.projectionMatrix = mat4.perspective((2 * Math.PI) / 5, aspect, 1, 2000.0);
-        this.modelViewProjectionMatrix = mat4.create();
-
-        this.loadTex0(this.texturesPaths, device).then(() => {
-          resolve()
-          console.log('load tex for mesh', this.texture0)
-        })
-      })
-    }
-
-    this.runProgram().then(() => {
-      const aspect = canvas.width / canvas.height;
-      const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
-      this.context.configure({
-        device: this.device,
-        format: presentationFormat,
-        alphaMode: 'premultiplied',
-      });
-
-      // Create the model vertex buffer.
-      this.vertexBuffer = this.device.createBuffer({
-        size: this.mesh.positions.length * 3 * 2 * Float32Array.BYTES_PER_ELEMENT,
-        usage: GPUBufferUsage.VERTEX,
-        mappedAtCreation: true,
-      });
-      {
-        const mapping = new Float32Array(this.vertexBuffer.getMappedRange());
-        for(let i = 0;i < this.mesh.positions.length;++i) {
-          mapping.set(this.mesh.positions[i], 6 * i);
-          mapping.set(this.mesh.normals[i], 6 * i + 3);
-        }
-        this.vertexBuffer.unmap();
-      }
-
-      // Create the model index buffer.
-      this.indexCount = this.mesh.triangles.length * 3;
-      this.indexBuffer = this.device.createBuffer({
-        size: this.indexCount * Uint16Array.BYTES_PER_ELEMENT,
-        usage: GPUBufferUsage.INDEX,
-        mappedAtCreation: true,
-      });
-      {
-        const mapping = new Uint16Array(this.indexBuffer.getMappedRange());
-        for(let i = 0;i < this.mesh.triangles.length;++i) {
-          mapping.set(this.mesh.triangles[i], 3 * i);
-        }
-        this.indexBuffer.unmap();
-      }
-
-      // Create the depth texture for rendering/sampling the shadow map.
-      this.shadowDepthTexture = this.device.createTexture({
-        size: [this.shadowDepthTextureSize, this.shadowDepthTextureSize, 1],
-        usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
-        format: 'depth32float',
-      });
-      this.shadowDepthTextureView = this.shadowDepthTexture.createView();
-
-      // Create some common descriptors used for both the shadow pipeline
-      // and the color rendering pipeline.
-      this.vertexBuffers = [
-        {
-          arrayStride: Float32Array.BYTES_PER_ELEMENT * 6,
-          attributes: [
-            {
-              // position
-              shaderLocation: 0,
-              offset: 0,
-              format: 'float32x3',
-            },
-            {
-              // normal
-              shaderLocation: 1,
-              offset: Float32Array.BYTES_PER_ELEMENT * 3,
-              format: 'float32x3',
-            },
-          ],
-        },
-      ];
-
-      const primitive = {
-        topology: 'triangle-list',
-        cullMode: 'back',
-      };
-
-      this.uniformBufferBindGroupLayout = this.device.createBindGroupLayout({
-        entries: [
-          {
-            binding: 0,
-            visibility: GPUShaderStage.VERTEX,
-            buffer: {
-              type: 'uniform',
-            },
-          },
-        ],
-      });
-
-      this.shadowPipeline = this.device.createRenderPipeline({
-        layout: this.device.createPipelineLayout({
-          bindGroupLayouts: [
-            this.uniformBufferBindGroupLayout,
-            this.uniformBufferBindGroupLayout,
-          ],
-        }),
-        vertex: {
-          module: this.device.createShaderModule({
-            code: vertexShadowWGSL,
-          }),
-          buffers: this.vertexBuffers,
-        },
-        depthStencil: {
-          depthWriteEnabled: true,
-          depthCompare: 'less',
-          format: 'depth32float',
-        },
-        primitive,
-      });
-
-      // Create a bind group layout which holds the scene uniforms and
-      // the texture+sampler for depth. We create it manually because the WebPU
-      // implementation doesn't infer this from the shader (yet).
-      this.bglForRender = this.device.createBindGroupLayout({
-        entries: [
-          {
-            binding: 0,
-            visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
-            buffer: {
-              type: 'uniform',
-            },
-          },
-          {
-            binding: 1,
-            visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
-            texture: {
-              sampleType: 'depth',
-            },
-          },
-          {
-            binding: 2,
-            visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
-            sampler: {
-              type: 'comparison',
-            },
-          },
-          {
-            binding: 3,
-            visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
-            texture: {
-              sampleType: 'float',
-            },
-          },
-          {
-            binding: 4,
-            visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
-            sampler: {
-              type: 'filtering',
-            },
-          }
-        ],
-      });
-
-      this.pipeline = this.device.createRenderPipeline({
-        layout: this.device.createPipelineLayout({
-          bindGroupLayouts: [this.bglForRender, this.uniformBufferBindGroupLayout],
-        }),
-        vertex: {
-          module: this.device.createShaderModule({
-            code: vertexWGSL,
-          }),
-          buffers: this.vertexBuffers,
-        },
-        fragment: {
-          module: this.device.createShaderModule({
-            code: fragmentWGSL,
-          }),
-          targets: [
-            {
-              format: presentationFormat,
-            },
-          ],
-          constants: {
-            shadowDepthTextureSize: this.shadowDepthTextureSize,
-          },
-        },
-        depthStencil: {
-          depthWriteEnabled: true,
-          depthCompare: 'less',
-          format: 'depth24plus-stencil8',
-        },
-        primitive,
-      });
-
-      const depthTexture = this.device.createTexture({
-        size: [canvas.width, canvas.height],
-        format: 'depth24plus-stencil8',
-        usage: GPUTextureUsage.RENDER_ATTACHMENT,
-      });
-
-      this.renderPassDescriptor = {
-        colorAttachments: [
-          {
-            // view is acquired and set in render loop.
-            view: undefined,
-            clearValue: {r: 0.5, g: 0.5, b: 0.5, a: 1.0},
-            loadOp: 'load',
-            storeOp: 'store',
-          },
-        ],
-        depthStencilAttachment: {
-          view: depthTexture.createView(),
-
-          depthClearValue: 1.0,
-          depthLoadOp: 'clear',
-          depthStoreOp: 'store',
-          stencilClearValue: 0,
-          stencilLoadOp: 'clear',
-          stencilStoreOp: 'store',
-        },
-      };
-
-      this.modelUniformBuffer = this.device.createBuffer({
-        size: 4 * 16, // 4x4 matrix
-        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
-      });
-
-      this.sceneUniformBuffer = this.device.createBuffer({
-        // Two 4x4 viewProj matrices,
-        // one for the camera and one for the light.
-        // Then a vec3 for the light position.
-        // Rounded to the nearest multiple of 16.
-        size: 2 * 4 * 16 + 4 * 4,
-        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
-      });
-
-      this.sceneBindGroupForShadow = this.device.createBindGroup({
-        layout: this.uniformBufferBindGroupLayout,
-        entries: [
-          {
-            binding: 0,
-            resource: {
-              buffer: this.sceneUniformBuffer,
-            },
-          },
-        ],
-      });
-
-      this.sceneBindGroupForRender = this.device.createBindGroup({
-        layout: this.bglForRender,
-        entries: [
-          {
-            binding: 0,
-            resource: {
-              buffer: this.sceneUniformBuffer,
-            },
-          },
-          {
-            binding: 1,
-            resource: this.shadowDepthTextureView,
-          },
-          {
-            binding: 2,
-            resource: this.device.createSampler({
-              compare: 'less',
-            }),
-          },
-          {
-            binding: 3,
-            resource: this.texture0.createView(),
-          },
-          {
-            binding: 4,
-            resource: this.sampler,
-          },
-        ],
-      });
-
-      this.modelBindGroup = this.device.createBindGroup({
-        layout: this.uniformBufferBindGroupLayout,
-        entries: [
-          {
-            binding: 0,
-            resource: {
-              buffer: this.modelUniformBuffer,
-            },
-          },
-        ],
-      });
-
-      // Rotates the camera around the origin based on time.
-      this.getTransformationMatrix = (pos) => {
-        const now = Date.now();
-        const deltaTime = (now - this.lastFrameMS) / this.mainCameraParams.responseCoef;
-        this.lastFrameMS = now;
-
-        const camera = this.cameras[this.mainCameraParams.type];
-        this.viewMatrix = camera.update(deltaTime, this.inputHandler());
-
-        mat4.translate(this.viewMatrix, vec3.fromValues(pos.x, pos.y, pos.z), this.viewMatrix);
-        mat4.rotateX(this.viewMatrix, Math.PI * this.rotation.getRotX(), this.viewMatrix);
-        mat4.rotateY(this.viewMatrix, Math.PI * this.rotation.getRotY(), this.viewMatrix);
-        mat4.rotateZ(this.viewMatrix, Math.PI * this.rotation.getRotZ(), this.viewMatrix);
-        mat4.multiply(this.projectionMatrix, this.viewMatrix, this.modelViewProjectionMatrix);
-
-        return this.modelViewProjectionMatrix;
-      }
-
-      this.upVector = vec3.fromValues(0, 1, 0);
-      this.origin = vec3.fromValues(0, 0, 0);
-
-      const lightPosition = vec3.fromValues(50, 100, -100);
-      const lightViewMatrix = mat4.lookAt(lightPosition, this.origin, this.upVector);
-      const lightProjectionMatrix = mat4.create();
-      {
-        const left = -80;
-        const right = 80;
-        const bottom = -80;
-        const top = 80;
-        const near = -200;
-        const far = 300;
-        mat4.ortho(left, right, bottom, top, near, far, lightProjectionMatrix);
-      }
-
-      const lightViewProjMatrix = mat4.multiply(
-        lightProjectionMatrix,
-        lightViewMatrix
-      );
-
-      // looks like affect on transformations for now const 0
-      const modelMatrix = mat4.translation([0, 0, 0]);
-      // The camera/light aren't moving, so write them into buffers now.
-      {
-        const lightMatrixData = lightViewProjMatrix; // as Float32Array;
-        this.device.queue.writeBuffer(
-          this.sceneUniformBuffer,
-          0,
-          lightMatrixData.buffer,
-          lightMatrixData.byteOffset,
-          lightMatrixData.byteLength
-        );
-
-        const lightData = lightPosition;
-        this.device.queue.writeBuffer(
-          this.sceneUniformBuffer,
-          128,
-          lightData.buffer,
-          lightData.byteOffset,
-          lightData.byteLength
-        );
-
-        const modelData = modelMatrix;
-        this.device.queue.writeBuffer(
-          this.modelUniformBuffer,
-          0,
-          modelData.buffer,
-          modelData.byteOffset,
-          modelData.byteLength
-        );
-      }
-
-      this.shadowPassDescriptor = {
-        colorAttachments: [],
-        depthStencilAttachment: {
-          view: this.shadowDepthTextureView,
-          depthClearValue: 1.0,
-          depthLoadOp: 'clear',
-          depthStoreOp: 'store',
-        },
-      };
-
-      this.done = true;
-    })
-  }
-
-  async loadTex0(texturesPaths, device) {
-    this.sampler = device.createSampler({
-      magFilter: 'linear',
-      minFilter: 'linear',
-    });
-
-    return new Promise(async (resolve) => {
-      const response = await fetch(texturesPaths[0]);
-      const imageBitmap = await createImageBitmap(await response.blob());
-      this.texture0 = device.createTexture({
-        size: [imageBitmap.width, imageBitmap.height, 1],
-        format: 'rgba8unorm',
-        usage:
-          GPUTextureUsage.TEXTURE_BINDING |
-          GPUTextureUsage.COPY_DST |
-          GPUTextureUsage.RENDER_ATTACHMENT,
-      });
-
-      device.queue.copyExternalImageToTexture(
-        {source: imageBitmap},
-        {texture: this.texture0},
-        [imageBitmap.width, imageBitmap.height]
-      );
-      resolve()
-    })
-  }
-
-  draw = (commandEncoder) => {
-    if(this.done == false) return;
-    const transformationMatrix = this.getTransformationMatrix(this.position);
-    this.device.queue.writeBuffer(
-      this.sceneUniformBuffer,
-      64,
-      transformationMatrix.buffer,
-      transformationMatrix.byteOffset,
-      transformationMatrix.byteLength
-    );
-    this.renderPassDescriptor.colorAttachments[0].view = this.context
-      .getCurrentTexture()
-      .createView();
-    {
-      const shadowPass = commandEncoder.beginRenderPass(this.shadowPassDescriptor);
-      shadowPass.setPipeline(this.shadowPipeline);
-      shadowPass.setBindGroup(0, this.sceneBindGroupForShadow);
-      shadowPass.setBindGroup(1, this.modelBindGroup);
-      shadowPass.setVertexBuffer(0, this.vertexBuffer);
-      shadowPass.setIndexBuffer(this.indexBuffer, 'uint16');
-      shadowPass.drawIndexed(this.indexCount);
-      shadowPass.end();
-    }
-    {
-      const renderPass = commandEncoder.beginRenderPass(this.renderPassDescriptor);
-      renderPass.setPipeline(this.pipeline);
-      renderPass.setBindGroup(0, this.sceneBindGroupForRender);
-      renderPass.setBindGroup(1, this.modelBindGroup);
-      renderPass.setVertexBuffer(0, this.vertexBuffer);
-      renderPass.setIndexBuffer(this.indexBuffer, 'uint16');
-      renderPass.drawIndexed(this.indexCount);
-      renderPass.end();
-    }
-  }
-}

package/src/engine/raycast.js

@@ -1,219 +0,0 @@
-/**
- * @author Nikola Lukic
- * @email zlatnaspirala@gmail.com
- * @site https://maximumroulette.com
- * @Licence GPL v3
- * @credits chatgpt used for this script adaptation.
- * @Note matrix-engine-wgpu adaptation test
- * default for now:
- * app.cameras['WASD']
- * Only tested for WASD type of camera.
- * app is global - will be fixed in future
- */
-import {mat4, vec3, vec4} from "wgpu-matrix";
-let rayHitEvent;
-
-export let touchCoordinate = {
-  enabled: false,
-  x: 0,
-  y: 0,
-  stopOnFirstDetectedHit: false
-};
-
-function multiplyMatrixVector(matrix, vector) {
-  return vec4.transformMat4(vector, matrix);
-}
-
-export function getRayFromMouse(event, canvas, camera) {
-  const rect = canvas.getBoundingClientRect();
-  let x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
-  let y = ((event.clientY - rect.top) / rect.height) * 2 - 1;
-  // simple invert
-  x = -x;
-  y = -y;
-  const fov = Math.PI / 4;
-  const aspect = canvas.width / canvas.height;
-  const near = 0.1;
-  const far = 1000;
-  camera.projectionMatrix = mat4.perspective((2 * Math.PI) / 5, aspect, 1, 1000.0);
-  const invProjection = mat4.inverse(camera.projectionMatrix);
-  const invView = mat4.inverse(camera.view);
-  const ndc = [x, y, 1, 1];
-  let worldPos = multiplyMatrixVector(invProjection, ndc);
-  worldPos = multiplyMatrixVector(invView, worldPos);
-  let world;
-  if(worldPos[3] !== 0) {
-    world = [
-      worldPos[0] / worldPos[3],
-      worldPos[2] / worldPos[3],
-      worldPos[1] / worldPos[3]
-    ];
-  } else {
-    console.log("[raycaster]special case 0.");
-    world = [
-      worldPos[0],
-      worldPos[1],
-      worldPos[2]
-    ];
-  }
-  const rayOrigin = [camera.position[0], camera.position[1], camera.position[2]];
-  const rayDirection = vec3.normalize(vec3.subtract(world, rayOrigin));
-  rayDirection[2] = -rayDirection[2];
-  return {rayOrigin, rayDirection};
-}
-
-export function getRayFromMouse2(event, canvas, camera) {
-  const rect = canvas.getBoundingClientRect();
-  let x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
-  let y = ((event.clientY - rect.top) / rect.height) * 2 - 1;
-  // simple invert
-  y = -y;
-  const fov = Math.PI / 4;
-  const aspect = canvas.width / canvas.height;
-  const near = 0.1;
-  const far = 1000;
-  camera.projectionMatrix = mat4.perspective((2 * Math.PI) / 5, aspect, 1, 1000.0);
-  const invProjection = mat4.inverse(camera.projectionMatrix);
-  console.log("camera.view:" + camera.view)
-  const invView = mat4.inverse(camera.view);
-  const ndc = [x, y, 1, 1];
-  let worldPos = multiplyMatrixVector(invProjection, ndc);
-  worldPos = multiplyMatrixVector(invView, worldPos);
-  let world;
-  if(worldPos[3] !== 0) {
-    world = [
-      worldPos[0] / worldPos[3],
-      worldPos[1] / worldPos[3],
-      worldPos[2] / worldPos[3]
-    ];
-  } else {
-    console.log("[raycaster]special case 0.");
-    world = [
-      worldPos[0],
-      worldPos[1],
-      worldPos[2]
-    ];
-  }
-  const rayOrigin = [camera.position[0], camera.position[1], camera.position[2]];
-  const rayDirection = vec3.normalize(vec3.subtract(world, rayOrigin));
-  return {rayOrigin, rayDirection};
-}
-
-export function rayIntersectsSphere(rayOrigin, rayDirection, sphereCenter, sphereRadius) {
-  const pos = [sphereCenter.x, sphereCenter.y, sphereCenter.z];
-  const oc = vec3.subtract(rayOrigin, pos);
-  const a = vec3.dot(rayDirection, rayDirection);
-  const b = 2.0 * vec3.dot(oc, rayDirection);
-  const c = vec3.dot(oc, oc) - sphereRadius * sphereRadius;
-  const discriminant = b * b - 4 * a * c;
-  return discriminant > 0;
-}
-
-export function addRaycastListener(canvasId = "canvas1") {
-  let canvasDom = document.getElementById(canvasId);
-  canvasDom.addEventListener('click', (event) => {
-    let camera = app.cameras.WASD;
-    const {rayOrigin, rayDirection} = getRayFromMouse(event, canvasDom, camera);
-    for(const object of app.mainRenderBundle) {
-      if(object.raycast.enabled == false) return;
-      if(rayIntersectsSphere(rayOrigin, rayDirection, object.position, object.raycast.radius)) {
-        console.log('Object clicked:', object.name);
-        // Just like in matrix-engine webGL version "ray.hit.event"
-        dispatchEvent(new CustomEvent('ray.hit.event', {
-          detail: {
-            hitObject: object,
-            rayOrigin: rayOrigin,
-            rayDirection: rayDirection
-          }
-        }))
-      }
-    }
-  });
-}
-
-// Compute AABB from flat vertices array [x,y,z, x,y,z, ...]
-export function computeAABB(vertices) {
-  const min = [Infinity, Infinity, Infinity];
-  const max = [-Infinity, -Infinity, -Infinity];
-
-  for(let i = 0;i < vertices.length;i += 3) {
-    min[0] = Math.min(min[0], vertices[i]);
-    min[1] = Math.min(min[1], vertices[i + 1]);
-    min[2] = Math.min(min[2], vertices[i + 2]);
-
-    max[0] = Math.max(max[0], vertices[i]);
-    max[1] = Math.max(max[1], vertices[i + 1]);
-    max[2] = Math.max(max[2], vertices[i + 2]);
-  }
-
-  return [min, max];
-}
-
-// Ray-AABB intersection using slabs method
-export function rayIntersectsAABB(rayOrigin, rayDirection, boxMin, boxMax) {
-  let tmin = (boxMin[0] - rayOrigin[0]) / rayDirection[0];
-  let tmax = (boxMax[0] - rayOrigin[0]) / rayDirection[0];
-  if(tmin > tmax) [tmin, tmax] = [tmax, tmin];
-
-  let tymin = (boxMin[1] - rayOrigin[1]) / rayDirection[1];
-  let tymax = (boxMax[1] - rayOrigin[1]) / rayDirection[1];
-  if(tymin > tymax) [tymin, tymax] = [tymax, tymin];
-
-  if((tmin > tymax) || (tymin > tmax)) return false;
-  if(tymin > tmin) tmin = tymin;
-  if(tymax < tmax) tmax = tymax;
-
-  let tzmin = (boxMin[2] - rayOrigin[2]) / rayDirection[2];
-  let tzmax = (boxMax[2] - rayOrigin[2]) / rayDirection[2];
-  if(tzmin > tzmax) [tzmin, tzmax] = [tzmax, tzmin];
-
-  if((tmin > tzmax) || (tzmin > tmax)) return false;
-
-  return true;
-}
-
-export function computeWorldVertsAndAABB(object) {
-  const modelMatrix = object.getModelMatrix(object.position);
-  const worldVerts = [];
-  for(let i = 0;i < object.mesh.vertices.length;i += 3) {
-    const local = vec3.fromValues(
-      object.mesh.vertices[i],
-      object.mesh.vertices[i + 1],
-      object.mesh.vertices[i + 2]
-    );
-    const world = vec3.transformMat4(local, modelMatrix); // OK
-    worldVerts.push(world[0], world[1], world[2]);
-  }
-  const [boxMin, boxMax] = computeAABB(worldVerts);
-  return {
-    modelMatrix,
-    worldVerts,
-    boxMin,
-    boxMax,
-  };
-}
-
-export function addRaycastsAABBListener(canvasId = "canvas1") {
-  const canvasDom = document.getElementById(canvasId);
-  if(!canvasDom) {
-    console.warn(`Canvas with id ${canvasId} not found`);
-    return;
-  }
-
-  canvasDom.addEventListener('click', (event) => {
-    const camera = app.cameras.WASD;
-    const {rayOrigin, rayDirection} = getRayFromMouse2(event, canvasDom, camera);
-    for(const object of app.mainRenderBundle) {
-      const {boxMin, boxMax} = computeWorldVertsAndAABB(object);
-      if(object.raycast.enabled == false) return;
-      if(rayIntersectsAABB(rayOrigin, rayDirection, boxMin, boxMax)) {
-        // console.log('AABB hit:', object.name);
-        canvasDom.dispatchEvent(new CustomEvent('ray.hit.event', {
-          detail: {hitObject: object},
-          rayOrigin: rayOrigin,
-          rayDirection: rayDirection
-        }));
-      }
-    }
-  });
-}