Untitled

<html>
    <head>
        <title> Complex Shader </title>
        <style> canvas { width:100%; height:100%; background-color: black;} </style>
    </head>
    <body>
        <h1 align= "center" style="color:red"> Complex Shader </h1>
        <script src="../Three.js-master/build/three.min.js"></script>
        <script type="x-shader/x-vertex" id="vertexShader">

        attribute vec4 color;
        varying vec4 outColor;

        void main()
        {
            outColor= color;
            gl_Position= projectionMatrix * modelViewMatrix * vec4(position,1.0);
        }

        </script>
        <script type="x-shader/x-fragment" id="fragmentShader">

        varying vec4 outColor;

        void main() {
            gl_FragColor = outColor;
        }

        </script>
        <script>
            // Creazione scena, camera e renderer:
            var scene= new THREE.Scene();
            var camera= new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);
            var renderer= new THREE.WebGLRenderer();
            renderer.setSize(window.innerWidth,window.innerHeight);
            document.body.appendChild(renderer.domElement);
            camera.position.z=5;

            // Geometria, materiale
            var geometry= new THREE.CubeGeometry(2,2,2);

            var uniforms= {
            };
            var colors= [];
            for(var i=0; i<geometry.vertices.length; i++) {
                colors.push(new THREE.Vector4(0.0,1.0,0.0,1.0));
            }
            var attributes = {
                color: {type:"v4", value: colors}
            };

            var material= new THREE.ShaderMaterial({
                uniforms: uniforms,
                attributes: {},
                vertexShader: document.getElementById("vertexShader").textContent,
                fragmentShader: document.getElementById("fragmentShader").textContent
            });
            var cube= new THREE.Mesh(geometry,material);
            scene.add(cube);

            // Creazione della  funzione di rendering:
            var render= function() {
                requestAnimationFrame(render);
                cube.rotation.x+= 0.025;
                cube.rotation.y+= 0.025;
                renderer.render(scene,camera);
            }
            render();
        </script>
    </body>
</html>