Question

<html lang="en">
    <head>
        <title>Three.js </title>
        <meta charset="utf-8">
        <script src="resources/three.min.js"></script>
        <script src="resources/stats.min.js"></script>
        <script src="resources/Detector.js"></script>
        <script id="vshader" type="x-shader/x-vertex" >
            #ifdef GL_ES                                
                precision highp float;                      
            #endif

            uniform mat4 worldviewproj;

            attribute vec4 vPosition;
            attribute vec4 vNormal;
            attribute vec2 vTexCoord1;

            varying vec2 v_texCoord;

            void main() {
                gl_Position = worldviewproj * vPosition;
                v_texCoord = vTexCoord1.st;
            }
        </script>
        <script id="fshader" type="x-shader/x-fragment">
            #ifdef GL_ES
                precision highp float;
            #endif

            uniform sampler2D uSampler;

            varying vec2 v_texCoord;

            varying vec3 vLightWeighting;

            void main() {
                vec4 textureColor = texture2D(uSampler, vec2(v_texCoord.s, v_texCoord.t));
                gl_FragColor = textureColor;
            }   
        </script>
    <script>
            if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
            var container, stats;
            var camera, scene, renderer;
            var scale = 100, N=1000;
            var arr= [];
            var width = 720, height = 405;
            var uniforms, material;
            start =function()
            {
            init();
            animate();
            };      

            function init() 
            {

                container = document.createElement( 'div' );
                document.body.appendChild( container );

                camera = new THREE.PerspectiveCamera( 45, width / height, 0.1, 10000 );
                camera.position.x = 0;
                camera.position.y = 0;
                camera.position.z = 80;
                //camera.lookAt( new THREE.Vector3( scale/2, scale/2, scale/2 ) );

                scene = new THREE.Scene();

                renderer = new THREE.CanvasRenderer();
                renderer.setClearColor(new THREE.Color(0x000000));
                renderer.setSize( width, height );

                container.appendChild( renderer.domElement );

                uniforms = {
                        uSampler: { type: "t", value: THREE.ImageUtils.loadTexture( "resources/crate.jpg" ) }
                };

                var geometry = new THREE.CubeGeometry( 1, 1, 1 );

                //material = new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture("resources/crate.jpg")} );

                material = new THREE.ShaderMaterial( {

                    uniforms: uniforms,
                    vertexShader: document.getElementById( 'vshader' ).innerHTML,
                    fragmentShader: document.getElementById( 'fshader' ).innerHTML

                } );

                for ( var i = 0; i <= N; i++)
                {
                    arr.push(new THREE.Mesh( geometry, material ));
                    arr[i].position.set( (Math.random()-0.5) * scale, (Math.random()-0.5) * scale, (Math.random()-0.5) * scale ); 
                    scene.add( arr[i] );

                }


                stats = new Stats();
                stats.domElement.style.position = 'absolute';
                stats.domElement.style.bottom = '1px';
                container.appendChild( stats.domElement );              

                document.getElementById('3dobjects').innerHTML = "The number of Cube Objects: " +N;


            }

            function animate() 
            {
                requestAnimationFrame( animate );
                render();
                stats.update();

            }

            function render() 
            {               
                renderer.render( scene, camera );

            }

        </script>
    </head>    
<body onload="start()">
    <label id="3dobjects">test</label>
</body>
</html>

在自定义着色器程序之前，我使用默认的THREE.MeshBasicMaterial（{Texture Source}），我的输出。但在我使用这个自定义着色器程序后，我无法得到我的结果。我不知道上面代码中我的问题到底在哪里。我一直在尝试各种各样的方式。但没有理想的结果。任何想法或帮助请...

Answer 1

您正在使用THREE.CanvasRenderer，其中不支持自定义着色器。试试THREE.WebGLRenderer。

此外，您没有设置worldviewproj制服，也没有设置那些不使用标准Three.js名称的属性。

Answer 2

    varying vec2 v_texCoord;

    void main() {
        vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
        gl_Position = projectionMatrix * mvPosition;
        v_texCoord = uv;
    }

这应该是你的顶点着色器。

自定义着色器程序使用Three.js在画布上渲染“N”个多维数据集？

2 个答案: