Bare-bones Vue component wrapping a Phenomenon renderer. Example:
<template>
<vue-phenomenon :instances="[cube]">
<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>
<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>
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. |