nicwands · nicwands · Aug 23, 2021 · Aug 23, 2021 · Aug 23, 2021 · Aug 24, 2021
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# Rumfoords
+# Code Study Boilerplate
 
 **Local Development**
 

diff --git a/app.html b/app.html
@@ -1,10 +1,3 @@
-<!--
-    /* WEBSITE CREDITS */
-
-    Website Design / Development: CTHDRL
-    Contact: build@cthdrl.co
-    Site: https://cthdrl.co
--->
 <!DOCTYPE html>
 <html {{ HTML_ATTRS }}>
     <head {{ HEAD_ATTRS }}>

diff --git a/assets/scss/_base.scss b/assets/scss/_base.scss
@@ -1,5 +1,5 @@
 @import 'vars';
-@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,700;1,400;1,700&family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
 
 html {
     font-size: 16px;
@@ -12,7 +12,7 @@ body {
     --black: #000000;
     --white: #ffffff;
 
-    --font-sans: 'Poppins', sans-serif;
+    --font-sans: 'IBM Plex Sans', sans-serif;
     --font-serif: 'EB Garamond', serif;
 
     @include fontSize(16px);
@@ -107,20 +107,15 @@ a {
     path {
         transition: fill 0.3s;
     }
-
-    @include hover {
-        color: var(--white);
-
-        path {
-            fill: var(--white);
-        }
+    &:hover {
+        text-decoration: underline;
     }
 }
 
 .contained {
     padding-right: var(--margin);
     padding-left: var(--margin);
-    // max-width: 1380px;
+    max-width: 1200px;
     margin-right: auto;
     margin-left: auto;
 }

diff --git a/components/StudyBody.vue b/components/StudyBody.vue
@@ -0,0 +1,20 @@
+<template>
+    <section class="study-body">
+        <!-- <face-morph /> -->
+        <three-boilerplate />
+    </section>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="scss">
+.study-body {
+    border: 1px solid var(--black);
+    padding: 20px;
+    box-sizing: border-box;
+    margin-top: 20px;
+    position: relative;
+}
+</style>
diff --git a/components/ThreeBoilerplate.vue b/components/ThreeBoilerplate.vue
@@ -1,16 +1,37 @@
 <template>
     <div ref="container" class="three-canvas-wrapper">
         <canvas ref="canvas" class="three-canvas" />
+        <a v-if="assetUrl" id="assetUrl" :href="assetUrl" download>video</a>
     </div>
 </template>
 
 <script>
-import { PerspectiveCamera, Scene, WebGLRenderer } from 'three'
+import {
+    PerspectiveCamera,
+    Scene,
+    WebGLRenderer,
+    PlaneGeometry,
+    MeshPhongMaterial,
+    TextureLoader,
+    Mesh,
+    AmbientLight,
+    PointLight,
+    DoubleSide,
+    Vector2,
+    ShaderMaterial,
+    ACESFilmicToneMapping,
+} from 'three'
+import { OrbitControls } from '~/libs/OrbitControls'
+import fragmentShader from '~/libs/shaders/fragment.glsl'
+import vertexShader from '~/libs/shaders/vertex.glsl'
+
 require('resize-observer-polyfill/dist/ResizeObserver.global')
 
 export default {
     data() {
         return {
+            assetUrl: null,
+
             resizeObserver: null,
 
             containerWidth: 0,
@@ -26,6 +47,18 @@ export default {
         // prep scene
         this.scene = new Scene()
 
+        // Lights
+        const ambient = new AmbientLight(0x404040)
+        this.scene.add(ambient)
+
+        const light = new PointLight(0xffffff, 1.5)
+        light.position.set(-2, 4, 3)
+        this.scene.add(light)
+
+        const light2 = new PointLight(0xffffff, 0.5)
+        light2.position.set(0, 4, -2)
+        this.scene.add(light2)
+
         // prep camera
         const fov = 15
         this.camera = new PerspectiveCamera(fov, 0.5625, 0.1, 1000)
@@ -35,7 +68,64 @@ export default {
             canvas: this.$refs.canvas,
             antialias: true,
             alpha: true,
+            toneMapping: ACESFilmicToneMapping,
         })
+        this.renderer.setClearColor(0x000000, 1)
+
+        this.orbitControls = new OrbitControls(
+            this.camera,
+            this.renderer.domElement
+        )
+
+        // Skin plane
+        const planeGeometry = new PlaneGeometry(1, 1)
+
+        const diffuseTexture = new TextureLoader().load(
+            '/images/skin-2-diffuse.png'
+        )
+        const normalTexture = new TextureLoader().load(
+            '/images/skin-2-normals.png'
+        )
+        const specTexture = new TextureLoader().load('/images/skin-2-spec.png')
+
+        const material = new MeshPhongMaterial({
+            map: diffuseTexture,
+            normalMap: normalTexture,
+            normalScale: new Vector2(1, 1),
+            specularMap: specTexture,
+            side: DoubleSide,
+        })
+
+        const plane = new Mesh(planeGeometry, material)
+        this.scene.add(plane)
+
+        this.camera.position.z = 5
+
+        // tattoo
+        const tattooGeometry = new PlaneGeometry()
+
+        const tattooTexture = new TextureLoader().load(
+            '/images/tribal-msdf.png'
+        )
+
+        this.tattooMaterial = new ShaderMaterial({
+            uniforms: {
+                time: { value: 0.0 },
+                tattooMap: { value: tattooTexture },
+                bgDiffuse: { value: diffuseTexture },
+                bgNormals: { value: normalTexture },
+                bgSpecular: { value: specTexture },
+            },
+            transparent: true,
+            vertexShader,
+            fragmentShader,
+        })
+
+        const tattooMesh = new Mesh(tattooGeometry, this.tattooMaterial)
+        tattooMesh.scale.setScalar(0.5)
+        tattooMesh.position.z = 0.001
+
+        this.scene.add(tattooMesh)
 
         // update canvas size
         this.updateSize()
@@ -51,6 +141,10 @@ export default {
             camera: this.camera,
         })
 
+        this.record()
+            .then((url) => (this.assetUrl = url))
+            .catch((err) => console.error(err))
+
         // update
         this.update()
     },
@@ -66,6 +160,8 @@ export default {
                 camera: this.camera,
             })
 
+            this.tattooMaterial.uniforms.time.value++
+
             this.renderer.render(this.scene, this.camera)
         },
         updateSize() {
@@ -80,6 +176,34 @@ export default {
             this.renderer.setSize(this.containerWidth, this.containerHeight)
             this.renderer.render(this.scene, this.camera)
         },
+        record() {
+            return new Promise(async (res, rej) => {
+                let chunks = []
+                const stream = this.$refs.canvas.captureStream(30)
+                this.mediaRecorder = new MediaRecorder(stream, {
+                    mimeType: 'video/webm; codecs=vp9',
+                    videoBitsPerSecond: 12000000,
+                })
+                this.mediaRecorder.start(4000)
+
+                this.mediaRecorder.ondataavailable = ({ data }) => {
+                    chunks.push(data)
+                }
+
+                this.mediaRecorder.onstop = () => {
+                    var blob = new Blob(chunks, { type: 'video/webm' })
+                    var url = URL.createObjectURL(blob)
+                    res(url)
+                }
+
+                this.mediaRecorder.onerror = (err) => {
+                    rej(err)
+                }
+
+                await new Promise((res) => setTimeout(res, 10000))
+                this.mediaRecorder.stop()
+            })
+        },
     },
 }
 </script>
@@ -95,4 +219,10 @@ export default {
     width: 100%;
     height: 100%;
 }
-</style>
+
+#assetUrl {
+    position: absolute;
+    z-index: 50;
+    color: var(--white);
+}
+</style>
diff --git a/components/svg/facebook-clipped.vue b/components/svg/facebook-clipped.vue
@@ -0,0 +1,47 @@
+<template>
+    <svg
+        ref="svgEl"
+        width="28"
+        height="29"
+        viewBox="0 0 28 29"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <defs>
+            <clipPath
+                id="facebookClip"
+                clipPathUnits="objectBoundingBox"
+                :transform="clipTransform"
+            >
+                <path
+                    d="M27.7134 14.5664C27.7134 6.91357 21.5096 0.709717 13.8567 0.709717C6.20386 0.709717 0 6.91357 0 14.5664C0 21.4826 5.06717 27.2153 11.6916 28.2548V18.5719H8.17329V14.5664H11.6916V11.5136C11.6916 8.04078 13.7604 6.12249 16.9255 6.12249C18.4411 6.12249 20.0273 6.39313 20.0273 6.39313V9.80318H18.28C16.5588 9.80318 16.0218 10.8714 16.0218 11.9683V14.5664H19.8649L19.2505 18.5719H16.0218V28.2548C22.6462 27.2153 27.7134 21.4826 27.7134 14.5664Z"
+                />
+            </clipPath>
+        </defs>
+    </svg>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            svg: {},
+        }
+    },
+    mounted() {
+        this.svg = this.$refs.svgEl
+    },
+    computed: {
+        xScale() {
+            return 1 / parseInt(this.svg.getAttribute('width'))
+        },
+        yScale() {
+            return 1 / parseInt(this.svg.getAttribute('height'))
+        },
+        clipTransform() {
+            if (!this.svg.getAttribute) return ''
+            return `scale(${this.xScale}, ${this.yScale})`
+        },
+    },
+}
+</script>
diff --git a/components/svg/social/social-facebook.vue b/components/svg/social/social-facebook.vue
@@ -1,5 +1,6 @@
 <template>
     <svg
+        id="facebook"
         width="28"
         height="29"
         viewBox="0 0 28 29"
@@ -11,4 +12,4 @@
             fill="white"
         />
     </svg>
-</template>
+</template>
diff --git a/components/svg/social/social-instagram.vue b/components/svg/social/social-instagram.vue
@@ -1,5 +1,6 @@
 <template functional>
     <svg
+        id="instagram"
         width="29"
         height="29"
         viewBox="0 0 29 29"

diff --git a/components/svg/social/social-linkedin.vue b/components/svg/social/social-linkedin.vue
@@ -1,5 +1,6 @@
 <template functional>
     <svg
+        id="linkedIn"
         class="svg-social-linkedin"
         xmlns="http://www.w3.org/2000/svg"
         width="21.639"

diff --git a/components/svg/social/social-mail.vue b/components/svg/social/social-mail.vue
@@ -1,5 +1,6 @@
 <template functional>
     <svg
+        id="mail"
         class="svg-social-mail"
         xmlns="http://www.w3.org/2000/svg"
         width="22.475"

diff --git a/components/svg/social/social-spotify.vue b/components/svg/social/social-spotify.vue
@@ -1,5 +1,6 @@
 <template functional>
     <svg
+        id="spotify"
         class="svg-social-spotify"
         xmlns="http://www.w3.org/2000/svg"
         width="21.622"

diff --git a/components/svg/social/social-twitter.vue b/components/svg/social/social-twitter.vue
@@ -1,5 +1,6 @@
 <template functional>
     <svg
+        id="twitter"
         width="29"
         height="23"
         viewBox="0 0 29 23"