自定義着色器程序使用Three.js渲染「N」個畫布上的立方體？

<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}），我有我的輸出。但是在我使用這個自定義着色器程序之後，我無法得到我的結果。我不知道我的問題在上面的代碼中究竟存在。我一直在嘗試各種各樣的方式，我可以。但沒有期望的結果。任何想法或幫助請..自定義着色器程序使用Three.js渲染「N」個畫布上的立方體？

來源

2012-11-12 three.jsaddict

我是新來的Stackoverflow，我不知道我應該接受提供給我的回覆。對不起，我從現在開始。你能幫我嗎？請.. –

WestLangley，我想知道，我如何才能訪問直方圖中顯示的fps文本，以便我可以將其用於進一步的目的。我想框架工作生成FPS，雖然我們可以寫我們自己的片段。提前致謝。 –

您正在使用THREE.CanvasRenderer，其中不支持自定義着色器等。嘗試THREE.WebGLRenderer。

此外，您不是設置worldviewproj統一，也不是那些不使用標準Three.js名稱的屬性。

來源

2012-11-12 18:14:59 Tapio

好吧..我以爲我可以使用相同的着色器程序爲不同的框架。但是現在我意識到它是一個錯誤。謝謝你讓我知道這件事。 –

Tapio，我想知道，我怎樣才能訪問直方圖中顯示的fps文本，以便我可以將其用於進一步的目的。我想框架工作生成FPS，雖然我們可以寫我們自己的片段。提前致謝。對不起，在這裏再次問，我的動機是讓你也知道我的問題，以便獲得我期待的機會將很高。 –

varying vec2 v_texCoord; 

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

這應該是你的vertexshader。

來源

2012-11-12 18:52:48 Gero3

自定義着色器程序使用Three.js渲染「N」個畫布上的立方體？

回答

相關問題