Пользовательский шейдер текстуры в Three.js

Я просто хочу создать очень простой фрагментный шейдер, который рисует заданную текстуру на сетке. Я просмотрел несколько пользовательских шейдеров фрагментов, которые сделали то же самое, и построили мои собственные шейдеры и поддерживали JS-код на их основе. Однако это просто не работает. Вот рабочая абстракция кода, который я пытаюсь запустить:

Вершинный шейдер

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


three.js textures fragment-shader shader
person rrowland    schedule 27.09.2012    source источник
comment
Какую версию three.js вы используете ??   -  person Gero3    schedule 27.09.2012

Ответы (1)


arrow_upward
36
arrow_downward

Вы все еще используете старый синтаксис для униформы

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

Это новый синтаксис

var uniforms = {
    texture1: { type: "t", value: THREE.ImageUtils.loadTexture( "texture.jpg" ) }
};
person Gero3    schedule 27.09.2012
comment
Вау, я чувствую себя такой глупой. Спасибо! Это была проблема. Трудно отслеживать или даже осознавать все соответствующие изменения синтаксиса с ограниченной доступной документацией и большинством примеров, использующих более старые версии. - person rrowland; 28.09.2012
comment
Это нормально. Не нужно критиковать себя. Но это может быть большим подспорьем, когда вам когда-либо понадобится обновление. github.com/mrdoob/three.js/wiki/Migration - person Gero3; 28.09.2012
comment
Кроме того, всегда используйте в качестве ссылки примеры в репо. Они всегда обновляются и работают. - person mrdoob; 28.09.2012
comment
К вашему сведению, loadTexture util устарел в пользу объекта TextureLoader, который вы можете использовать следующим образом: var texture = new THREE.TextureLoader().load( 'textures/land_ocean_ice_cloud_2048.jpg' ); Дополнительная информация: threejs.org/docs/#api/en/loaders/TextureLoader - person paascal; 21.09.2019