时间戳

首页 > 解决方案 > 使用 InstancedMesh、InstancedBufferGeometry、自定义着色器进行光线投射

three.js - 使用 InstancedMesh、InstancedBufferGeometry、自定义着色器进行光线投射

问题描述

基本，我无法让光线投射与他们一起工作。我的猜测是我的矩阵坐标计算方法是错误的。不知道怎么做才对。

我在 vertexShader 中设置了顶点位置和偏移量，在 InstancedMesh 中，我设置了相同的偏移量，期望光线投射可以获得一个 instanceID，但没有任何相交。你可以在这里找到我的全部代码。

我试图在这里改编一个官方的光线投射示例，但不知道我在哪里做错了。我的大杂烩使用：InstancedMesh、InstancedBufferGeometry、自定义着色器。我的目标是了解它是如何工作的。

我的问题是我哪里做错了？

我的顶点着色器：

    precision highp float;

    uniform mat4 modelViewMatrix;
    uniform mat4 projectionMatrix;


    attribute vec3 position;
    attribute vec4 color;
    attribute vec3 offset;

    varying vec3 vPosition;
    varying vec4 vColor;



    void main() {
        vColor = vec4(color);
        vPosition = offset*1.0 + position;
        gl_Position = projectionMatrix * modelViewMatrix * vec4( vPosition, 1.0 );
        // if gl_Position not set, nothing is shown

    }

我的 InstancedMesh 矩阵设置：

        for(let i = 0; i < SQUARE_COUNT; i++)  {

            transform.position.set(offsets[i], offsets[i+1], offsets[i+2] )
            transform.updateMatrix()


            mesh.setMatrixAt(i, transform.matrix)
        }

偏移量在之前设置如下：

        for(let i = 0; i < SQUARE_COUNT; i++ ) {

            offsets.push( 0 + i*0.05, 0 + i*0.05, 0 + i*0.05); // same is set in InstancedMesh
            colors.push( Math.random(), Math.random(), Math.random(), Math.random() );
        }

标签： three.js

解决方案

光线投射器不知道您在顶点着色器中所做的任何非标准转换。这就是它的工作方式。它无法知道你在做什么： vPosition = offset*1.0 + position; 在你的着色器中。

它的工作原理是假设您正在运行没有额外转换的 bog 标准顶点着色器。它假定您要投射的每个对象也都有一个定义良好/计算好的边界框。

如果您要使用光线投射，您可能必须制作一个非渲染场景来表示您的对象处于其最终渲染位置，并对其进行投射。

推荐阅读