相关疑难解决方法(0)

我正在WebGL中构建一个桌面游戏.电路板可以旋转/缩放.我需要一种方法将画布元素(x,y)上的点击转换为3D空间(x,y,z)中的相关点.最终结果是我想知道包含触及最靠近用户的对象的点的(x,y,z)坐标.例如,用户点击一块,你想象一条穿过3D空间的光线穿过这件作品和游戏板,但是我希望这件作品的(x,y,z)坐在它的位置.感动.

我觉得这一定是一个非常普遍的问题,但我似乎无法在谷歌中找到解决方案.必须有某种方法将3D空间的当前视图投影到2D中,这样您就可以将2D空间中的每个点映射到3D空间中的相关点.我希望用户能够将鼠标悬停在板上的空间上,并使点变色.

对于后期处理着色器,我需要我的帧缓冲区的颜色和深度缓冲区.访问colorbuffer工作正常,但我在创建deepbuffer时遇到问题.尝试将texImage2D用于深度纹理时,我总是会收到INVALID_ENUM错误:

WebGL error INVALID_ENUM in texImage2D(TEXTURE_2D, 0, DEPTH_COMPONENT16, 1536, 502, 0, DEPTH_COMPONENT, UNSIGNED_BYTE, null)

使用渲染缓冲而不是纹理工作,但我想要纹理深度,所以我可以将它传递给着色器.

帧缓冲与深度纹理代码:

Framebuffer.prototype.initBufferStuffTexture = function(width, height){
    if(this.width == width && this.height == height){
        return;
    }

    this.width = width;
    this.height = height;

    // remove existing buffers
    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
    if(this.texture != null){
        gl.deleteTexture(this.texture.glid);
        this.texture = null;
    }
    if(this.renderbuffer != null){
        gl.deleteRenderbuffer(this.renderbuffer);
        this.renderbuffer = null;
    }
    if(this.framebuffer != null){
        gl.deleteFramebuffer(this.framebuffer);
        this.framebuffer = null;
    }

    // create new buffers
    this.framebuffer = gl.createFramebuffer();
    this.texture = new Texture();
    this.texture.glid = gl.createTexture();
    this.depth …