Three.js中的自定義紋理着色器

我只是想創建一個非常簡單的Fragment Shader，它可以爲網格繪製指定的紋理。我已經看過一些完成相同的自定義片段着色器，並構建了自己的着色器並支持它周圍的JS代碼。但是，它只是不起作用。下面是我試圖運行的代碼的工作抽象：Three.js中的自定義紋理着色器

的Vertex Shader

<script id="vertexShader" type="x-shader/x-vertex"> 
    varying vec2 vUv; 

    void main() { 
     vUv = uv; 

     gl_Position = projectionMatrix * 
         modelViewMatrix * 
         vec4(position,1.0); 
    } 
</script>

片段着色器

<script id="fragmentShader" type="x-shader/x-fragment"> 
    uniform sampler2D texture1; 

    varying vec2 vUv; 

    void main() { 
     gl_FragColor = texture2D(texture1, vUv); // Displays Nothing 
     //gl_FragColor = vec4(0.5, 0.2, 1.0, 1.0); // Works; Displays Flat Color 
    } 
</script>

景色代碼

<script> 
    // Initialize WebGL Renderer 
    var renderer = new THREE.WebGLRenderer(); 
    renderer.setSize(window.innerWidth, window.innerHeight); 
    var canvas = document.getElementById('canvas').appendChild(renderer.domElement); 

    // Initialize Scenes 
    var scene = new THREE.Scene(); 

    // Initialize Camera 
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 100); 
    camera.position.z = 10; 

    // Create Light 
    var light = new THREE.PointLight(0xFFFFFF); 
    light.position.set(0, 0, 500); 
    scene.add(light); 

    // Create Ball 
    var vertShader = document.getElementById('vertexShader').innerHTML; 
    var fragShader = document.getElementById('fragmentShader').innerHTML; 

    var uniforms = { 
     texture1: { type: 't', value: 0, texture: THREE.ImageUtils.loadTexture('texture.jpg') } 
    }; 

    var material = new THREE.ShaderMaterial({ 
     uniforms: uniforms, 
     vertexShader: vertShader, 
     fragmentShader: fragShader 
    }); 

    var ball = new THREE.Mesh(new THREE.SphereGeometry(1, 50, 50), material); 
    scene.add(ball); 

    // Render the Scene 
    renderer.render(scene, camera); 
</script>

texture.jpg存在，並在映射到MeshLambertMaterial時顯示。當我將片段着色器切換爲簡單的顏色（在代碼中註釋掉）時，它會正確顯示球。

運行這個顯示什麼都沒有。我沒有得到任何錯誤，球根本沒有出現。

我知道我必須做一些根本性的錯誤，但我一直在查看相同的例子，其中這段代碼似乎現在工作了幾天，我覺得我正在對着牆壁猛撞我的頭。任何幫助，將不勝感激！

編輯：我使用three.js所修訂51

來源

2012-09-27 rrowland

三個什麼revsion。你是用js嗎？ – Gero3

我正在使用修訂版本51 – rrowland

您還在使用舊的語法制服

var uniforms = { 
     texture1: { type: "t", value: 0, texture: THREE.ImageUtils.loadTexture("texture.jpg") } 
    };

這是新的語法

var uniforms = { 
    texture1: { type: "t", value: THREE.ImageUtils.loadTexture("texture.jpg") } 
};

來源

2012-09-27 19:38:54 Gero3

哇，我覺得很愚蠢。謝謝！這是問題。使用有限的文檔和大多數運行較早版本的示例很難跟蹤甚至意識到所有相關的語法變化。 – rrowland

這很正常。不需要打擊你的自我。但是，當你需要更新時，這可以是一個很大的幫助。 https://github.com/mrdoob/three.js/wiki/Migration – Gero3

此外，始終使用作爲參考回購的例子。這些總是更新和工作。 – mrdoob

Three.js中的自定義紋理着色器

回答

相關問題