shader01_texture単純応用

3442 ワード

shader shader学習

电子书籍あるいはソースコードQ群:820202939みんなと一绪に勉强して、一绪に进歩することを望みます!!
もし誤字や理解が不十分なところがあれば、伝言や微信152509699798を加えることができ、ブロガーはすぐに修正します!!!
最近ブログ主がshaderを勉強しているので、手当たり次第に覚えておきました!!
このブログは頂点、チップシェーダの基礎をある程度理解するのに適しています.理解しない場合はブロガーのWebGLシリーズのブログを見てください.
公式ドキュメントShaderMaterialです!
今日はshaderのtextureの簡単な応用を勉強します
効果図:
コードは次のとおりです.





    
    shader01_texture 
    
    
    
        // 
        uniform sampler2D texture1;
        // 
        varying vec2 vUv;

        void main(void){
        //texture2D() 
            gl_FragColor = texture2D(texture1, vUv);
        }

    
    
        varying vec2 vUv;
        void main()
            {
                vUv = uv;
                vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
                //projectionMatrix * mvPosition;  MVP 
                gl_Position = projectionMatrix * mvPosition;

            }


    
        var scene, camera, renderer,controls;
        var mesh;
        scene = new THREE.Scene();
        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
        camera.position.set(0, 0, 10);
        camera.lookAt(scene.position);

        renderer = new THREE.WebGLRenderer({
            antialias: true
        });
        renderer.setClearColor(0xffffff);
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
        window.addEventListener('resize', onResize, false);

        var controls = new THREE.OrbitControls(camera);
        var textureLoader = new THREE.TextureLoader();

        // shaderMaterial uniforms 
        var uniforms = {
            texture1: {
                value: textureLoader.load('../../textures/cube/Bridge2/negz.jpg')
            }
        };
        // 
        uniforms.texture1.value.warpS = uniforms.texture1.value.warpT = THREE.RepeatWrapping;

        // BoxGeometry( width, height, depth, widthSegments, heightSegments, depthSegments )
        var geometry = new THREE.BoxGeometry(5, 5, 5, 3, 3, 3);
        var Material = new THREE.ShaderMaterial({
            uniforms: uniforms,
            vertexShader: document.getElementById('vertexShader').textContent,
            fragmentShader: document.getElementById('fragmentShader').textContent,
            side: THREE.DoubleSide
        });
         mesh = new THREE.Mesh(geometry, Material);
        scene.add(mesh);

        function onResize() {
            renderer.setSize(window.innerWidth, window.innerHeight);
            camera.aspect = (window.innerWidth / window.innerHeight);
            camera.updateProjectionMatrix();
        }

        function render() {
            requestAnimationFrame(render);
            if (controls) controls.update();
            mesh.rotation.y += 0.005;
            renderer.render(scene, camera);
        }

        render();

継承とGeneric Programming

iterator