three.js - 每个实例具有唯一纹理的 InstancedMesh-6ren

three.js - 每个实例具有唯一纹理的 InstancedMesh

转载作者：行者123 更新时间：2023-12-04 12:23:06

我正在寻找一种方法来绘制具有独特纹理的多个对象。我遇到了这个 old question关于 instancedMesh，有人获得了多个具有不同纹理的实例，但在桌面上，纹理有奇怪的伪影。最初我认为那个演示一定有问题，但对我来说一切都很好，我也尝试使用混合函数代替条件，但纹理仍然有伪影。
我一直在寻找不同的方法来绘制多个独特的几何图形，因此合并几何图形不是一种选择，但我得到的大多数结果都是针对具有合并几何图形的多个对象。如果有人可以提供一些指导，那就太好了。

    var camera, scene, renderer, stats;

    var mesh;
    var amount = parseInt( window.location.search.substr( 1 ) ) || 10;
    var count = Math.pow( amount, 3 );

    var raycaster = new THREE.Raycaster();
    var mouse = new THREE.Vector2( 1, 1 );

    var rotationTheta = 0.1;
    var rotationMatrix = new THREE.Matrix4().makeRotationY( rotationTheta );
    var instanceMatrix = new THREE.Matrix4();
    var matrix = new THREE.Matrix4();

    init();
    animate();

    function init() {

        camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
        camera.position.set( amount, amount, amount );
        camera.lookAt( 0, 0, 0 );

        scene = new THREE.Scene();

        var light = new THREE.HemisphereLight( 0xffffff, 0x000088 );
        light.position.set( - 1, 1.5, 1 );
        scene.add( light );

        var light = new THREE.HemisphereLight( 0xffffff, 0x880000, 0.5 );
        light.position.set( - 1, - 1.5, - 1 );
        scene.add( light );

        var geometry = new THREE.BoxBufferGeometry( .5, .5, .5, 1, 1, 1 );

        var material = [
            new THREE.MeshStandardMaterial( { map: new THREE.TextureLoader().load( 'https://threejs.org/examples/textures/square-outline-textured.png' ) } ),
            new THREE.MeshStandardMaterial( { map: new THREE.TextureLoader().load( 'https://threejs.org/examples/textures/golfball.jpg' ) } ),
            new THREE.MeshStandardMaterial( { map: new THREE.TextureLoader().load( 'https://threejs.org/examples/textures/metal.jpg' ) } ),
            new THREE.MeshStandardMaterial( { map: new THREE.TextureLoader().load( 'https://threejs.org/examples/textures/roughness_map.jpg' ) } ),
            new THREE.MeshStandardMaterial( { map: new THREE.TextureLoader().load( 'https://threejs.org/examples/textures/tri_pattern.jpg' ) } ),
            new THREE.MeshStandardMaterial( { map: new THREE.TextureLoader().load( 'https://threejs.org/examples/textures/water.jpg' ) } ),
        ];

        material.forEach((m,side)=>{
            if ( side!=2 ) return;

            m.onBeforeCompile = ( shader ) => {

                shader.uniforms.textures = { 'type': 'tv', value: [
                    new THREE.TextureLoader().load( 'https://threejs.org/examples/textures/crate.gif' ),
                    new THREE.TextureLoader().load( 'https://threejs.org/examples/textures/equirectangular.png' ),
                    new THREE.TextureLoader().load( 'https://threejs.org/examples/textures/colors.png' )
                 ] };


                shader.vertexShader = shader.vertexShader.replace(
                        '#define STANDARD',
                        `#define STANDARD
                        varying vec3 vTint;
                        varying float vTextureIndex;`
                ).replace(
                    '#include <common>',
                    `#include <common>
                    attribute vec3 tint;
                    attribute float textureIndex;`
                ).replace(
                    '#include <project_vertex>',
                    `#include <project_vertex>
                    vTint = tint;
                    vTextureIndex=textureIndex;`
                );

                shader.fragmentShader = shader.fragmentShader.replace(
                        '#define STANDARD',
                        `#define STANDARD
                        uniform sampler2D textures[3];
                        varying vec3 vTint;
                        varying float vTextureIndex;`
                )
                .replace(
                    '#include <fog_fragment>',
                    `#include <fog_fragment>
                    int texIdx = int(vTextureIndex);
                    vec4 col;
                    if (texIdx == 0) {
                            col = texture2D(textures[0], vUv );
                        } else if ( texIdx==1) {
                            col = texture2D(textures[1], vUv );
                        } else if ( texIdx==2) {
                                col = texture2D(textures[2], vUv );
                            }

                            gl_FragColor = col;
                    //      gl_FragColor.rgb *= vTint;`

                )
                ;
            }
        });

        mesh = new THREE.InstancedMesh( geometry, material, count );

        var i = 0;
        var offset = ( amount - 1 ) / 2;

        var transform = new THREE.Object3D();
        var textures = [];

        for ( var x = 0; x < amount; x ++ ) {

            for ( var y = 0; y < amount; y ++ ) {

                for ( var z = 0; z < amount; z ++ ) {

                    transform.position.set( offset - x, offset - y, offset - z );
                    transform.updateMatrix();

                    mesh.setMatrixAt( i ++, transform.matrix );


                    textures.push(Math.random()<0.3 ? 0 : (Math.random()<0.5 ? 1 : 2));
                }

            }

        }

        geometry.setAttribute( 'textureIndex',
              new THREE.InstancedBufferAttribute( new Float32Array(textures), 1 ) );

        scene.add( mesh );


        renderer = new THREE.WebGLRenderer( { antialias: false } );
        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );

        new THREE.OrbitControls( camera, renderer.domElement );

        stats = new Stats();
        document.body.appendChild( stats.dom );

        window.addEventListener( 'resize', onWindowResize, false );
        document.addEventListener( 'mousemove', onMouseMove, false );

    }

    function onWindowResize() {

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize( window.innerWidth, window.innerHeight );

    }

    function onMouseMove( event ) {

        event.preventDefault();

        mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
        mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

    }

    function animate() {

        requestAnimationFrame( animate );

        render();

    }

    function render() {

        raycaster.setFromCamera( mouse, camera );

        var intersection = raycaster.intersectObject( mesh );
// console.log('intersection', intersection.length);
        if ( intersection.length > 0 ) {

            mesh.getMatrixAt( intersection[ 0 ].instanceId, instanceMatrix );
            matrix.multiplyMatrices( instanceMatrix, rotationMatrix );

            mesh.setMatrixAt( intersection[ 0 ].instanceId, matrix );
            mesh.instanceMatrix.needsUpdate = true;

        }

        renderer.render( scene, camera );

        stats.update();

    }

<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/libs/stats.min.js"></script>
<script src="https://threejs.org/examples/js/libs/dat.gui.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

最佳答案

我相信您的问题来自转换 float到 int ，然后使用它来创建分支。此错误仅出现在少数 GPU 中，而不是所有 GPU 中。我通过保持 vTextureIndex 让它开始工作如 float ，如果 textureIndex 对所有 3 个纹理进行采样并将每个纹理乘以 1匹配，或者如果 textureIndex 乘以 0不匹配。
我基本上替换了这些行:

int texIdx = int(vTextureIndex);
vec4 col;
if (texIdx == 0) {
    col = texture2D(textures[0], vUv );
} else if ( texIdx==1) {
    col = texture2D(textures[1], vUv );
} else if ( texIdx==2) {
    col = texture2D(textures[2], vUv );
}

用这种方法:

float x = vTextureIndex;
vec4 col;
col = texture2D(textures[0], vUv ) * step(-0.1, x) * step(x, 0.1);
col += texture2D(textures[1], vUv ) * step(0.9, x) * step(x, 1.1);
col += texture2D(textures[2], vUv ) * step(1.9, x) * step(x, 2.1);

如 textureIndex为 0，第一个纹理乘以 1，其他纹理乘以 0

如 textureIndex为 1，第二个纹理乘以 1，其他纹理乘以 0

如 textureIndex为 2，第三个纹理乘以 1，其他纹理乘以 0

var camera, scene, renderer, stats;

    var mesh;
    var amount = parseInt( window.location.search.substr( 1 ) ) || 10;
    var count = Math.pow( amount, 3 );

    var raycaster = new THREE.Raycaster();
    var mouse = new THREE.Vector2( 1, 1 );

    var rotationTheta = 0.1;
    var rotationMatrix = new THREE.Matrix4().makeRotationY( rotationTheta );
    var instanceMatrix = new THREE.Matrix4();
    var matrix = new THREE.Matrix4();

    init();
    animate();

    function init() {

        camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
        camera.position.set( amount, amount, amount );
        camera.lookAt( 0, 0, 0 );

        scene = new THREE.Scene();

        var light = new THREE.HemisphereLight( 0xffffff, 0x000088 );
        light.position.set( - 1, 1.5, 1 );
        scene.add( light );

        var light = new THREE.HemisphereLight( 0xffffff, 0x880000, 0.5 );
        light.position.set( - 1, - 1.5, - 1 );
        scene.add( light );

        var geometry = new THREE.BoxBufferGeometry( .5, .5, .5, 1, 1, 1 );

        var material = [
            new THREE.MeshStandardMaterial( { map: new THREE.TextureLoader().load( 'https://threejs.org/examples/textures/square-outline-textured.png' ) } ),
            new THREE.MeshStandardMaterial( { map: new THREE.TextureLoader().load( 'https://threejs.org/examples/textures/golfball.jpg' ) } ),
            new THREE.MeshStandardMaterial( { map: new THREE.TextureLoader().load( 'https://threejs.org/examples/textures/metal.jpg' ) } ),
            new THREE.MeshStandardMaterial( { map: new THREE.TextureLoader().load( 'https://threejs.org/examples/textures/roughness_map.jpg' ) } ),
            new THREE.MeshStandardMaterial( { map: new THREE.TextureLoader().load( 'https://threejs.org/examples/textures/tri_pattern.jpg' ) } ),
            new THREE.MeshStandardMaterial( { map: new THREE.TextureLoader().load( 'https://threejs.org/examples/textures/water.jpg' ) } ),
        ];

        material.forEach((m,side)=>{
            if ( side!=2 ) return;

            m.onBeforeCompile = ( shader ) => {

                shader.uniforms.textures = { 'type': 'tv', value: [
                    new THREE.TextureLoader().load( 'https://threejs.org/examples/textures/crate.gif' ),
                    new THREE.TextureLoader().load( 'https://threejs.org/examples/textures/equirectangular.png' ),
                    new THREE.TextureLoader().load( 'https://threejs.org/examples/textures/colors.png' )
                 ] };


                shader.vertexShader = shader.vertexShader.replace(
                        '#define STANDARD',
                        `#define STANDARD
                        varying vec3 vTint;
                        varying float vTextureIndex;`
                ).replace(
                    '#include <common>',
                    `#include <common>
                    attribute vec3 tint;
                    attribute float textureIndex;`
                ).replace(
                    '#include <project_vertex>',
                    `#include <project_vertex>
                    vTint = tint;
                    vTextureIndex=textureIndex;`
                );

                shader.fragmentShader = shader.fragmentShader.replace(
                        '#define STANDARD',
                        `#define STANDARD
                        uniform sampler2D textures[3];
                        varying vec3 vTint;
                        varying float vTextureIndex;`
                )
                .replace(
                    '#include <fog_fragment>',
                    `#include <fog_fragment>
                    float x = vTextureIndex;
                    vec4 col;
                    col = texture2D(textures[0], vUv ) * step(-0.1, x) * step(x, 0.1);
                    col += texture2D(textures[1], vUv ) * step(0.9, x) * step(x, 1.1);
                    col += texture2D(textures[2], vUv ) * step(1.9, x) * step(x, 2.1);

                    gl_FragColor = col;
                    `

                )
                ;
            }
        });

        mesh = new THREE.InstancedMesh( geometry, material, count );

        var i = 0;
        var offset = ( amount - 1 ) / 2;

        var transform = new THREE.Object3D();
        var textures = [];

        for ( var x = 0; x < amount; x ++ ) {

            for ( var y = 0; y < amount; y ++ ) {

                for ( var z = 0; z < amount; z ++ ) {

                    transform.position.set( offset - x, offset - y, offset - z );
                    transform.updateMatrix();

                    mesh.setMatrixAt( i ++, transform.matrix );


                    textures.push(Math.random()<0.3 ? 0 : (Math.random()<0.5 ? 1 : 2));
                }

            }

        }

        geometry.setAttribute( 'textureIndex',
              new THREE.InstancedBufferAttribute( new Float32Array(textures), 1 ) );

        scene.add( mesh );


        renderer = new THREE.WebGLRenderer( { antialias: false } );
        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );

        new THREE.OrbitControls( camera, renderer.domElement );

        stats = new Stats();
        document.body.appendChild( stats.dom );

        window.addEventListener( 'resize', onWindowResize, false );
        document.addEventListener( 'mousemove', onMouseMove, false );

    }

    function onWindowResize() {

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize( window.innerWidth, window.innerHeight );

    }

    function onMouseMove( event ) {

        event.preventDefault();

        mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
        mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

    }

    function animate() {

        requestAnimationFrame( animate );

        render();

    }

    function render() {

        raycaster.setFromCamera( mouse, camera );

        var intersection = raycaster.intersectObject( mesh );
// console.log('intersection', intersection.length);
        if ( intersection.length > 0 ) {

            mesh.getMatrixAt( intersection[ 0 ].instanceId, instanceMatrix );
            matrix.multiplyMatrices( instanceMatrix, rotationMatrix );

            mesh.setMatrixAt( intersection[ 0 ].instanceId, matrix );
            mesh.instanceMatrix.needsUpdate = true;

        }

        renderer.render( scene, camera );

        stats.update();

    }

<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/libs/stats.min.js"></script>
<script src="https://threejs.org/examples/js/libs/dat.gui.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

关于three.js - 每个实例具有唯一纹理的 InstancedMesh，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65974267/

文章推荐： Gatsby 动态样式在生产版本中不起作用

文章推荐： cross-domain - 使用 Tumblr 在子域上使用 Respond.js

文章推荐： .net - 为什么 SignHash 需要知道使用的是什么哈希算法？

文章推荐： javascript - Next.js 嵌套动态文件夹路由

具有多个显示上下文的 OpenGL 纹理
我有一个未定义数量的显示上下文，每个都将显示一个纹理。当我调用 glGenTextures 时，我会在所有显示上下文中返回相同的名称。这会起作用吗？即使它们具有相同的名称，它们仍会存储和显示不同的纹理
css - 在物理文本上使用背景图像/纹理？
我在 SVG 中看到过:文本填充是图像而不是颜色；我一直想知道使用 CSS3 是否可以实现这样的事情。我浏览了整个网络，到目前为止只找到了基本上将图像覆盖在文本上的解决方法(请参阅 this ，这对
Webgl:销毁或重用缓冲区/纹理？
我是 WebGL 的新手。 :)我知道顶点数据和纹理不应该经常更新，但是当它们确实发生变化时，首选哪个:- 通过调用 gl.deleteBuffer 销毁先前的缓冲区 (static_draw) 并创
iPhone， float 纹理
我需要将 GL_RGBA32F 作为内部格式，但我在 OpenGL ES 实现中没有得到它。相反，我只得到 GL_FLOAT 作为纹理数据类型。 OES_texture_float 规范没有说明里面的
javascript - Threejs 纹理
当我执行某些几何体的渲染时，我可以在控制台中看到此警告: THREE.WebGLRenderer: Texture is not power of two. Texture.minFilter sho
javascript - 无法渲染到帧缓冲区(纹理)
我正在尝试使用阴影贴图实现阴影，因此我需要将场景渲染到单独的帧缓冲区(纹理)。我无法让它正常工作，因此在剥离我的代码库后，我留下了一组相对简单的指令，这些指令应该将场景渲染到纹理，然后简单地渲染纹理。
XNA .Fbx 纹理
我在 XNA 中使用带有自定义着色器的标准 .fbx 导入器。当我使用 BasicEffect 时，.fbx 模型被 UV 正确包裹并且纹理正确。但是，当我使用我的自定义效果时，我必须将纹理作为参数加
android - Libgdx - 纹理
如果我创建一个 .PNG 1024 x 1024 的纹理并在中间画一个 124 x 124 的圆，它周围是空的，它使用的 RAM 量是否与我画一个 124 x 的圆一样124 x 124 空间上的 1
android - 纹理/顶点的不同索引数组
我试图在 Android 中绘制一个地球仪，为此我使用了 OpenGL。然而，为了让它更容易理解，我将从制作一个简单的 3D 立方体开始。我使用 Blender 创建我的 3D 对象(立方体)，并在我
javascript - 文本的前景图像/纹理
文本本身的背景图像层是否有任何 JS/CSS 解决方案？示例最佳答案检查这个http://lea.verou.me/2012/05/text-masking-the-standards-way/
Swift SpriteKit 纹理
非功能代码: if sprite.texture == "texture" { (code) } 当 Sprite 具有特定纹理时，我正在尝试访问 Sprite 的纹理以运行代码。目前纹理仅在我的
ios - SceneKit 纹理
我正在尝试学习适用于 iOS 的 SceneKit 并超越基本形状。我对纹理的工作原理有点困惑。在示例项目中，平面是一个网格，并对其应用了平面 png 纹理。你如何“告诉”纹理如何包裹到物体上？在 3
three.js - 无法克隆()纹理
基本上，这有效: var expl1 = new THREE.ImageUtils.loadTexture( 'images/explodes/expl1.png' ); this.material
opengl - 如何从帧缓冲区取消绑定(bind)纹理
我正在尝试将各种场景渲染为一组纹理，每个场景都有自己的纹理到应该绘制的位置...... 问题: 创建 512 个 FBO，每个 FBO 绑定(bind)了 512 个纹理，这有多糟糕。只使用一个 FB
configuration - 纹理 protobuf 中的评论？
我正在使用文本 protobuf 文件进行系统配置。我遇到的一个问题是序列化的 protobuf 格式不支持注释。有没有办法解决？我说的是文本序列化数据格式，而不是方案定义。这个问题是有人在某
opengl - 计算着色器不修改 3d 纹理
我想将我的 3D 纹理的初始化从 CPU 移到 GPU。作为测试，我编写了一个着色器将所有体素设置为一个常数值，但纹理根本没有修改。我如何使它工作？计算着色器: #version 430 layou
java - 如何创建 JavaFX 纹理
我可以像这样用 JavFX 制作一个矩形: Rectangle node2 = RectangleBuilder.create() .x(-100) .
iPhone OpenGLES 纹理 - 色带
我在 iPhone 上遇到了 openGL 问题，我确信一定有一个简单的解决方案! 当我加载纹理并显示它时，我得到了很多我认为所谓的“色带”，其中颜色，特别是渐变上的颜色，似乎会自动“优化”。只是为
caching - GORM(纹理)-缓存Blob图片或其他内容
假设我有一个域类 class Profile{ String name byte[] logo } 和一个 Controller : class ImageController {
c++ - 缓存 OpenGL 纹理
我正在开发一款使用 SDL 的 2D 游戏。由于某些系统的 CPU 较弱而 GPU 较强，因此除了普通的 SDL/软件之外，我还有一个使用 OpenGL 的渲染器后端。渲染器界面的简化版本如下所示:

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

three.js - 每个实例具有唯一纹理的 InstancedMesh