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中的自定义纹理着色器

回答

相关问题