VueGL

# <vgl-renderer>

# Example Usage

<template>
  <div>
    <vgl-renderer
      :antialias="antialias"
      :alpha="alpha"
      :disable-premultiplied-alpha="!premultipliedAlpha"
      :disable-depth="!depth"
      :precision="precision"
      :disable-stencil="!stencil"
      :preserve-drawing-buffer="preserveDrawingBuffer"
      :shadow-map-enabled="shadowMapEnabled"
      :logarithmic-depth-buffer="logarithmicDepthBuffer"
      :class="orientation"
    >
      <template #scene>
        <vgl-scene>
          <vgl-mesh
            :position-y="-1.5"
            receive-shadow
          >
            <template #geometry>
              <vgl-box-geometry />
            </template>
            <template #material>
              <vgl-mesh-standard-material />
            </template>
          </vgl-mesh>
          <vgl-mesh
            cast-shadow
            receive-shadow
          >
            <template #geometry>
              <vgl-sphere-geometry />
            </template>
            <template #material>
              <vgl-mesh-standard-material />
            </template>
          </vgl-mesh>
          <vgl-ambient-light color="#ffeecc" />
          <vgl-directional-light
            :position-y="1"
            :position-z="1"
            cast-shadow
          />
        </vgl-scene>
      </template>
      <template #camera>
        <vgl-perspective-camera
          position="spherical"
          :position-radius="5"
          :position-phi="1"
          :position-theta="1"
          rotation="lookAt"
        />
      </template>
    </vgl-renderer>

    <aside class="control-panel">
      <label><input
        v-model="antialias"
        type="checkbox"
      >Antialias</label>
      <label><input
        v-model="alpha"
        type="checkbox"
      >Alpha</label>
      <label><input
        v-model="premultipliedAlpha"
        type="checkbox"
      >Premultiplied alpha</label>
      <label><input
        v-model="depth"
        type="checkbox"
      >Depth buffer</label>
      <label><input
        v-model="stencil"
        type="checkbox"
      >Stencil buffer</label>
      <label><input
        v-model="preserveDrawingBuffer"
        type="checkbox"
      >Preserve drawing buffer</label>
      <label><input
        v-model="logarithmicDepthBuffer"
        type="checkbox"
      >Logarithmic depth buffer</label>
      <label><input
        v-model="shadowMapEnabled"
        type="checkbox"
      >Shadow map</label>
      <label>Precision
        <select v-model="precision">
          <option value="highp">High</option>
          <option value="mediump">Medium</option>
          <option value="lowp">Low</option>
        </select>
      </label>
      <label>Canvas orientation
        <select v-model="orientation">
          <option value="landscape">Landscape</option>
          <option value="square">Square</option>
          <option value="portrait">Portrait</option>
        </select>
      </label>
    </aside>
  </div>
</template>

<script>
import * as components from 'vue-gl';

export default {
  components,
  data: () => ({
    antialias: true,
    alpha: false,
    premultipliedAlpha: true,
    depth: true,
    precision: 'highp',
    stencil: true,
    preserveDrawingBuffer: false,
    shadowMapEnabled: false,
    logarithmicDepthBuffer: false,
    orientation: 'landscape',
  }),
};
</script>

<style scoped>
.landscape {
  width: 300px;
  height: 150px;
}
.square {
  width: 150px;
  height: 150px;
}
.portrait {
  width: 150px;
  height: 300px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143

# Props

  • alpha : boolean
    Whether the canvas contains an alpha (transparency) buffer or not.
  • noPremultipliedAlpha : boolean
    Whether the renderer will assume that colors have premultiplied alpha.
  • antialias : boolean
    Whether to perform antialiasing.
  • noStencil : boolean
    Whether the drawing buffer has a stencil buffer of at least 8 bits.
  • preserveDrawingBuffer : boolean
    Whether to preserve the buffers until manually cleared or overwritten.
  • noDepth : boolean
    Whether the drawing buffer has a depth buffer of at least 16 bits.
  • logarithmicDepthBuffer : boolean
    Whether to use a logarithmic depth buffer.
  • shadowMapEnabled : boolean
    If set, use shadow maps in the scene.
  • precision : highp | mediump | lowp
    The shader precision.
  • powerPreference : highPerformance | lowPower | default
    A hint to the user agent indicating what configuration of GPU is suitable for this WebGL context.
    Defaults to [object Object]

# Slots

  • camera
    The camera to project scene objects.
  • scene
    The scene to be rendered.
  • default
    The default slot can contain any components but they won't be rendered directly. One of relevant case is putting <vgl-def> components and use them in (as) the scene.

← <vgl-fog> →