shader-park
diff --git a/‎es6-vite-prebuild-three-template/README.md
+28 b/‎es6-vite-prebuild-three-template/README.md
+28
diff --git a/‎es6-vite-prebuild-three-template/index.html
+14 b/‎es6-vite-prebuild-three-template/index.html
+14
diff --git a/‎es6-vite-prebuild-three-template/index.js
+60 b/‎es6-vite-prebuild-three-template/index.js
+60
@@ -0,0 +1,28 @@
+# Shader Park Vite Prebuild Plugin Template 🎉
+=================
+
+To setup run:
+```
+npm i
+```
+
+To start the server:
+```
+npm run dev
+```
+
+To build:
+```
+npm run build
+```
+
+Write your Shader Park code in the spCode.sp file
+You can simply paste in code from the ShaderPark web editor.
+
+This setup uses a Vite plugin to generate the GLSL shaders at build time, so the shader-park-core library does not need to be bundled into your app. This has several benefits:
+- Smaller bundle size. shader-park-core is heavy because it depends on large libraries like esprima.
+- Faster initial render. Shaders are generated ahead of time.
+- No need to use eval in the browser. This is more secure and follows best practices.
+- Clear isolation between shaderpark code and the rest of your javascript code. 
+
+Find out more about [Shader Park](https://shaderpark.com/).
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Shader Park Template</title>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!-- import the webpage's stylesheet -->
+    <link rel="stylesheet" href="/style.css">
+  </head>  
+  <body>
+    <script src="./index.js" type="module"></script>
+  </body>
+</html>
@@ -0,0 +1,60 @@
+import { 
+  Scene, PerspectiveCamera, WebGLRenderer, Mesh, 
+  Vector2, Vector3, Vector4, Color, 
+  SphereGeometry, ShaderMaterial, BackSide
+} from 'three';
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
+import generatedShader from './spCode.sp';
+
+let scene = new Scene();
+
+let camera = new PerspectiveCamera( 70, window.innerWidth/window.innerHeight, 0.1, 100 );
+camera.position.z = 2;
+
+let renderer = new WebGLRenderer({ antialias: true });
+renderer.setSize( window.innerWidth, window.innerHeight );
+renderer.setPixelRatio( window.devicePixelRatio );
+
+renderer.setClearColor( new Color(1, 1, 1), 1 );
+document.body.appendChild( renderer.domElement );
+
+function uniformDescriptionToThreeJSFormat(rawUniforms) {
+  const vectorConstructors = {
+    float: v => v,
+    vec2: v => new Vector2(v.x, v.y),
+    vec3: v => new Vector3(v.x, v.y, v.z),
+    vec4: v => new Vector4(v.x, v.y, v.z, v.w)
+  };
+
+  return rawUniforms.reduce((acc, {name, type, value}) => {
+    acc[name] = { value: vectorConstructors[type](value) };
+    return acc;
+  }, {});
+}
+
+const material = new ShaderMaterial({
+  uniforms: uniformDescriptionToThreeJSFormat(generatedShader.uniforms),
+  vertexShader: generatedShader.vert,
+  fragmentShader: generatedShader.frag,
+  transparent: true,
+  side: BackSide,
+});
+
+const mesh = new Mesh(new SphereGeometry(2, 32, 16), material);
+scene.add(mesh);
+
+let controls = new OrbitControls( camera, renderer.domElement, {
+  enableDamping : true,
+  dampingFactor : 0.25,
+  zoomSpeed : 0.5,
+  rotateSpeed : 0.5
+} );
+
+let render = () => {
+  requestAnimationFrame( render );
+  material.uniforms.time.value += 0.015;
+  controls.update();
+  renderer.render( scene, camera );
+};
+
+render();