init commit

9 months ago · 0b61cc9749
8 changed files with 1335 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1 @@
+node_modules
--- a/README.md
+++ b/README.md
@ -0,0 +1,3 @@
+## ThreeJS Templated ##
+
+run using ```npm install``` & ```npx vite```
--- a/index.html
+++ b/index.html
@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>Hello World</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <script type="importmap">
+	{
+		"imports": {
+			"three": "./node_modules/three/build/three.module.js",
+      		"three/": "./node_modules/three/",
+			"glsl-pipeline/": "./node_modules/glsl-pipeline/"
+		}
+	}
+  </script>
+  <script type="module" src="./main.js"></script>
+  <style>
+	html, body {
+	   margin: 0;
+	   height: 100%;
+	}
+	#c {
+	   width: 100%;
+	   height: 100%;
+	   display: block;
+	}
+	</style>
+</head>
+<body>
+	<canvas id="c"></canvas>
+</body>
--- a/main.js
+++ b/main.js
@ -0,0 +1,61 @@
+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();
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,9 @@
+{
+  "dependencies": {
+    "glsl-pipeline": "^2.0.6",
+    "three": "^0.159.0"
+  },
+  "devDependencies": {
+    "vite": "^5.0.4"
+  }
+}
--- a/public/shaders/00_mt.frag
+++ b/public/shaders/00_mt.frag
@ -0,0 +1,7 @@
+uniform float time;
+uniform vec2 resolution;
+
+void main()	{
+	vec3 color = vec3(1.0, 1.0, 1.0);
+	gl_FragColor(color, 1.0);
+}
--- a/public/shaders/00_mt.vert
+++ b/public/shaders/00_mt.vert
@ -0,0 +1,7 @@
+uniform vec3 u_color;
+uniform float u_speed;
+
+
+void main()	{
+	gl_Position = vec4( position, 1.0 );
+}