import * as THREE from 'three';
import { GlslPipeline } from 'glsl-pipeline';

function main() {

	const canvas = document.querySelector( '#c' );
	const renderer = new THREE.WebGLRenderer( { antialias: true, canvas } );

	// glsl
	const shader_f = /* glsl */`

		uniform vec2 u_resolution;
		uniform vec2 u_res;

		void main()	{

			// vec2 st = vec2(0.0, 0.0);
			// st.x = u_resolution.x;			
			vec2 st = gl_FragCoord.xy/u_res;
			gl_FragColor = vec4(st.x, st.y, 0.0, 1.0);
		}
	`;

	const gl_sandbox = new GlslPipeline(renderer, {
		// define uniforms
		u_color: { value: new THREE.Vector3(1.0, 1.0, 1.0) },
		u_speed: { value: 0.5 },
		u_res: {value: new THREE.Vector2(window.innerWidth/4, window.innerHeight/4)},
	})

	gl_sandbox.load(shader_f);


	// Create your scene and use the main material shader
	const cam = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 100);
	const mesh = new THREE.Mesh(new THREE.IcosahedronGeometry(1, 10), gl_sandbox.material);
	const scene = new THREE.Scene();
	scene.add(mesh);

	const draw = () => {
		gl_sandbox.renderMain();
		requestAnimationFrame(draw);
	};

	const resize = () => {
		console.log("OK");
		gl_sandbox.setSize(window.innerWidth, window.innerHeight);
	};

	console.log(window.innerWidth);

	window.addEventListener("resize", resize);
	resize();

	draw();

}



main();