Bare-bones Vue component wrapping a Phenomenon renderer. Example:

<template>
    <vue-phenomenon :instances="[cube]">
        <!-- vertex shader -->
        <template v-slot:vertex>
            <script type="x-shader/vertex">
                attribute vec3 aLocation;

                uniform mat4 uProjectionMatrix;
                uniform mat4 uModelMatrix;
                uniform mat4 uViewMatrix;

                void main(){
                    gl_Position = uProjectionMatrix * uModelMatrix * uViewMatrix * vec4(aLocation, 1.0);
                    gl_PointSize = 2.;
                }
            </script>
        </template>

        <!-- fragment shader -->
        <template v-slot:fragment>
            <script type="x-shader/fragment">
                precision highp float;

                void main(){
                    gl_FragColor = vec4(1., 0., 0., 1.);
                }
            </script>
        </template>
    </vue-phenomenon>
</template>

<script>
    // assuming you've already registered `vue-phenomenon` component
    export default {
        data() {
            return {
                cube: {
                    key: 'cube',
                    settings: {
                        multiplier: 5000,
                        attributes: [
                            {
                                name: 'aLocation',
                                data: () => [
                                    Math.random() - 0.5,
                                    Math.random() - 0.5,
                                    Math.random() - 0.5,
                                ],
                                size: 3,
                            },
                        ],
                    },
                },
            }
        },
    }
</script>

Props

| Name | Type | Default | Notes | | ---------- | ------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | options | Object | {} | Options to pass to Phenomenon constructor (see docs). | | instances | Array | [] | Instances for Phenomenon to create. Each instance should be in the form { key: 'unique-key', settings: {} }. Each instanc will be passed to Phenomenon.add. | | allowAlpha | Boolean | true | Whether or not alpha should be respected in the created scene. If false, alpha values in the fragment shader other than 0 or 1 will be ignored. |

Events

| Name | Params | Notes | | ------------- | -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | | initialized | (phenomenon) | Fired when Phenomenon initialized. Passes the created Phenomenon object. Useful for accessing the webgl context of the created scene, for example. |