commit d1e775310d991ddf5e7876ef5a1c3668639a5de4
parent ae576de0b775398eaed8d38b6dd5f02b1316b7f6
Author: mpizzzle <m@michaelpercival.xyz>
Date: Sat, 7 Nov 2020 14:16:57 +0000
Merge branch 'master' of michaelpercival.xyz:/var/www/git/mpercivalxyz
Diffstat:
5 files changed, 87 insertions(+), 79 deletions(-)
diff --git a/js/shader-container.js b/js/shader-container.js
@@ -0,0 +1,61 @@
+var container;
+var camera, scene, renderer;
+var uniforms;
+
+init();
+animate();
+
+function init() {
+ container = document.getElementById( 'container' );
+
+ camera = new THREE.Camera();
+ camera.position.z = 1;
+
+ scene = new THREE.Scene();
+
+ var geometry = new THREE.PlaneBufferGeometry( 2, 2 );
+
+ uniforms = {
+ u_time: { type: "f", value: 1.0 },
+ u_resolution: { type: "v2", value: new THREE.Vector2() },
+ u_mouse: { type: "v2", value: new THREE.Vector2() }
+ };
+
+ var material = new THREE.ShaderMaterial( {
+ uniforms: uniforms,
+ vertexShader: document.getElementById( 'vertexShader' ).textContent,
+ fragmentShader: document.getElementById( 'fragmentShader' ).textContent
+ } );
+
+ var mesh = new THREE.Mesh( geometry, material );
+ scene.add( mesh );
+
+ renderer = new THREE.WebGLRenderer();
+ renderer.setPixelRatio( window.devicePixelRatio );
+
+ container.appendChild( renderer.domElement );
+
+ onWindowResize();
+ window.addEventListener( 'resize', onWindowResize, false );
+
+ document.onmousemove = function(e){
+ uniforms.u_mouse.value.x = e.pageX
+ uniforms.u_mouse.value.y = e.pageY
+ }
+}
+
+function onWindowResize( event ) {
+ renderer.setSize(400, 400);
+ uniforms.u_resolution.value.x = renderer.domElement.width;
+ uniforms.u_resolution.value.y = renderer.domElement.height;
+}
+
+function animate() {
+ requestAnimationFrame( animate );
+ render();
+}
+
+function render() {
+ uniforms.u_time.value += 0.05;
+ renderer.render( scene, camera );
+}
diff --git a/library.html b/library.html
@@ -25,6 +25,7 @@
</div>
</nav>
<div class="main">
-Coming soon.
+Fiction
+Non-Fiction
</div>
</body>
diff --git a/shaders.html b/shaders.html
@@ -1,5 +1,5 @@
<head>
-<title>Software</title>
+<title>Shaders</title>
<meta charset="utf-8">
<meta name="author" content="mpizzzle">
<link href="style.css" rel="stylesheet">
@@ -27,81 +27,7 @@
<div class="main" id="container">
</div>
<script src="js/three.min.js"></script>
-<script id="vertexShader" type="x-shader/x-vertex">
- void main() {
- gl_Position = vec4( position, 1.0 );
- }
-</script>
-<script id="fragmentShader" type="x-shader/x-fragment">
- uniform vec2 u_resolution;
- uniform float u_time;
-
- void main() {
- vec2 st = gl_FragCoord.xy/ u_resolution.xy;
- gl_FragColor=vec4(st.x, st.y, 0.5, 1.0);
- }
-</script>
-<script>
- var container;
- var camera, scene, renderer;
- var uniforms;
-
- init();
- animate();
-
- function init() {
- container = document.getElementById( 'container' );
-
- camera = new THREE.Camera();
- camera.position.z = 1;
-
- scene = new THREE.Scene();
-
- var geometry = new THREE.PlaneBufferGeometry( 2, 2 );
-
- uniforms = {
- u_time: { type: "f", value: 1.0 },
- u_resolution: { type: "v2", value: new THREE.Vector2() },
- u_mouse: { type: "v2", value: new THREE.Vector2() }
- };
-
- var material = new THREE.ShaderMaterial( {
- uniforms: uniforms,
- vertexShader: document.getElementById( 'vertexShader' ).textContent,
- fragmentShader: document.getElementById( 'fragmentShader' ).textContent
- } );
-
- var mesh = new THREE.Mesh( geometry, material );
- scene.add( mesh );
-
- renderer = new THREE.WebGLRenderer();
- renderer.setPixelRatio( window.devicePixelRatio );
-
- container.appendChild( renderer.domElement );
-
- onWindowResize();
- window.addEventListener( 'resize', onWindowResize, false );
-
- document.onmousemove = function(e){
- uniforms.u_mouse.value.x = e.pageX
- uniforms.u_mouse.value.y = e.pageY
- }
- }
-
- function onWindowResize( event ) {
- renderer.setSize(400, 400);
- uniforms.u_resolution.value.x = renderer.domElement.width;
- uniforms.u_resolution.value.y = renderer.domElement.height;
- }
-
- function animate() {
- requestAnimationFrame( animate );
- render();
- }
-
- function render() {
- uniforms.u_time.value += 0.05;
- renderer.render( scene, camera );
- }
-</script>
+<script src="shaders/test.vert" id="vertexShader" type="x-shader/x-vertex"></script>
+<script src="shaders/test.frag" id="fragmentShader" type="x-shader/x-fragment"></script>
+<script src="js/shader-container.js"></script>
</body>
diff --git a/shaders/test.frag b/shaders/test.frag
@@ -0,0 +1,12 @@
+#version 120
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+uniform vec2 u_resolution;
+uniform float u_time;
+
+void main() {
+ vec2 st = gl_FragCoord.xy/ u_resolution.xy;
+ gl_FragColor=vec4(st.x, st.y, 0.5, 1.0);
+}
diff --git a/shaders/test.vert b/shaders/test.vert
@@ -0,0 +1,8 @@
+#version 120
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+void main() {
+ gl_Position = vec4( position, 1.0 );
+}
