vue-phenomenon/example/node_modules/.cache/vue-loader/f4e020cfc014c0cd462bb26d7206ad17.json

Vue component wrapping a Phenomenon renderer.

{"remainingRequest":"/Users/sandermoolin/.nvm/versions/node/v10.19.0/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/index.js??vue-loader-options!/Users/sandermoolin/misc/vue-phenomenon/example/App.vue?vue&type=style&index=0&lang=scss&","dependencies":[{"path":"/Users/sandermoolin/misc/vue-phenomenon/example/App.vue","mtime":1601066988884},{"path":"/Users/sandermoolin/.nvm/versions/node/v10.19.0/lib/node_modules/@vue/cli-service-global/node_modules/css-loader/dist/cjs.js","mtime":499162500000},{"path":"/Users/sandermoolin/.nvm/versions/node/v10.19.0/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/loaders/stylePostLoader.js","mtime":499162500000},{"path":"/Users/sandermoolin/.nvm/versions/node/v10.19.0/lib/node_modules/@vue/cli-service-global/node_modules/postcss-loader/src/index.js","mtime":499162500000},{"path":"/Users/sandermoolin/misc/vue-phenomenon/node_modules/sass-loader/lib/loader.js","mtime":1533139052000},{"path":"/Users/sandermoolin/.nvm/versions/node/v10.19.0/lib/node_modules/@vue/cli-service-global/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/Users/sandermoolin/.nvm/versions/node/v10.19.0/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:CgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCi5leGFtcGxlIHsKICAgIGRpc3BsYXk6IGdyaWQ7CiAgICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IHJlcGVhdCgzLCAyNTBweCk7CiAgICBncmlkLWdhcDogMjBweDsKICAgIGp1c3RpZnktY29udGVudDogY2VudGVyOwogICAgZ3JpZC1hdXRvLXJvd3M6IDI1MHB4OwoKICAgIC5zaW5nbGUgewogICAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTsKICAgICAgICBib3JkZXI6IDFweCBzb2xpZCBibGFjazsKICAgIH0KfQo="},{"version":3,"sources":["App.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiGA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA","file":"App.vue","sourceRoot":".","sourcesContent":["<template>\n    <section class=\"example\">\n        <div class=\"single\">\n            <min-example />\n        </div>\n\n        <div class=\"single\">\n            <vue-phenomenon :instances=\"[{ key: 'cube', settings: cube }]\">\n                <!-- vert -->\n                <template v-slot:vertex>\n                    <script type=\"x-shader/vertex\">\n                        attribute vec3 aPosition;\n                        attribute vec3 aOffset;\n\n                        uniform mat4 uProjectionMatrix;\n                        uniform mat4 uModelMatrix;\n                        uniform mat4 uViewMatrix;\n                        uniform float uTime;\n                        varying vec4 vColor;\n\n                        void main(){\n                            vec3 finalPos = aPosition + aOffset + vec3(0., 0., cos(aOffset.x + uTime) * 0.5);\n                            gl_Position = uProjectionMatrix * uModelMatrix * uViewMatrix * vec4(finalPos, 1.0);\n                            gl_PointSize = 5.;\n                            vColor = mix(vec4(0., 0., 0., 1.), vec4(1.), 0.35 - finalPos.z);\n                        }\n                    </script>\n                </template>\n\n                <!-- frag -->\n                <template v-slot:fragment>\n                    <script type=\"x-shader/fragment\">\n                        precision highp float;\n                        varying vec4 vColor;\n\n                        void main(){\n                            gl_FragColor = vColor;\n                        }\n                    </script>\n                </template>\n            </vue-phenomenon>\n        </div>\n\n        <div class=\"single\">\n            <uv-example />\n        </div>\n    </section>\n</template>\n\n<script>\n/* eslint-disable */\nimport VuePhenomenon from '../src/VuePhenomenon'\nimport MinExample from './MinExample'\nimport UvExample from './UvExample'\n\nlet lastTime = Date.now()\nexport default {\n    components: {\n        'vue-phenomenon': VuePhenomenon,\n        'min-example': MinExample,\n        'uv-example': UvExample,\n    },\n    data() {\n        return {\n            radius: 3,\n            cube: {\n                multiplier: 5000,\n                attributes: [\n                    {\n                        name: 'aOffset',\n                        data: () => [this.rand(), this.rand(), 0],\n                        size: 3,\n                    },\n                ],\n                uniforms: {\n                    uTime: {\n                        value: 0.0,\n                        type: 'float',\n                    },\n                },\n                onRender: (instance) => {\n                    instance.uniforms.uTime.value +=\n                        (Date.now() - lastTime) / 500\n                    lastTime = Date.now()\n                },\n            },\n        }\n    },\n    methods: {\n        rand() {\n            return Math.random() * this.radius - this.radius / 2\n        },\n    },\n}\n</script>\n\n<style lang=\"scss\">\n.example {\n    display: grid;\n    grid-template-columns: repeat(3, 250px);\n    grid-gap: 20px;\n    justify-content: center;\n    grid-auto-rows: 250px;\n\n    .single {\n        position: relative;\n        border: 1px solid black;\n    }\n}\n</style>\n"]}]}