Textura personalizada Shader en Three.js

textures fragment-shader

Question

Solo busco crear un Fragment Shader muy simple que dibuje una textura específica para la malla. He visto un puñado de sombreadores de fragmentos personalizados que lograron lo mismo y construí mis propios sombreadores y soporté código JS a su alrededor. Sin embargo, simplemente no está funcionando. Aquí hay una abstracción de trabajo del código que estoy tratando de ejecutar:

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>

Fragment Shader

<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>

Código de escena

<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 existe y se muestra cuando se asigna a un MeshLambertMaterial . Al cambiar mi sombreador de fragmentos a un color simple (comentado en el código), muestra la bola correctamente.

Ejecutar esto no muestra nada en absoluto. No recibo ningún error, la pelota simplemente no aparece en absoluto.

Sé que debo estar haciendo algo fundamentalmente incorrecto, pero he estado revisando los mismos ejemplos en los que este código parece funcionar durante un par de días y siento que estoy golpeando mi cabeza contra una pared. ¡Cualquier ayuda sería apreciada!

Edición: Estoy usando Three.js Revisión 51

Answer 1

Todavía estás usando la sintaxis antigua para uniformes

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

Esta es la nueva sintaxis.

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