diff --git a/libs/core/attributes/src/lib/color-attribute/color-attribute.ts b/libs/core/attributes/src/lib/color-attribute/color-attribute.ts
index 7c0db6bcf..e68ceb34d 100644
--- a/libs/core/attributes/src/lib/color-attribute/color-attribute.ts
+++ b/libs/core/attributes/src/lib/color-attribute/color-attribute.ts
@@ -19,6 +19,7 @@ import {
     SkipSelf,
 } from '@angular/core';
 import * as THREE from 'three';
+import type { Subscription } from 'rxjs';
 
 @Component({
     selector: 'ngt-color[color]',
@@ -29,11 +30,28 @@ import * as THREE from 'three';
 export class NgtColorAttribute extends NgtInstance<THREE.Color> {
     @Input() set color(color: NgtColor) {
         this.zone.runOutsideAngular(() => {
-            const instance = this.prepareInstance(makeColor(color));
-            this.set({ instance });
+            if (this.initSubscription) {
+                this.initSubscription.unsubscribe();
+            }
+
+            this.initSubscription = this.onCanvasReady(
+                this.store.ready$,
+                () => {
+                    this.set({
+                        instance: this.prepareInstance(makeColor(color)),
+                    });
+
+                    return () => {
+                        this.initSubscription?.unsubscribe();
+                    };
+                },
+                true
+            );
         });
     }
 
+    private initSubscription?: Subscription;
+
     constructor(
         zone: NgZone,
         store: NgtStore,
diff --git a/libs/core/attributes/src/lib/fog-attribute/fog-attribute.ts b/libs/core/attributes/src/lib/fog-attribute/fog-attribute.ts
index 5d5fa5898..9e140c308 100644
--- a/libs/core/attributes/src/lib/fog-attribute/fog-attribute.ts
+++ b/libs/core/attributes/src/lib/fog-attribute/fog-attribute.ts
@@ -19,6 +19,7 @@ import {
     SkipSelf,
 } from '@angular/core';
 import * as THREE from 'three';
+import type { Subscription } from 'rxjs';
 
 @Component({
     selector: 'ngt-fog[fog]',
@@ -29,11 +30,28 @@ import * as THREE from 'three';
 export class NgtFogAttribute extends NgtInstance<THREE.Fog> {
     @Input() set fog(fog: NgtFog) {
         this.zone.runOutsideAngular(() => {
-            const instance = this.prepareInstance(make(THREE.Fog, fog));
-            this.set({ instance });
+            if (this.initSubscription) {
+                this.initSubscription.unsubscribe();
+            }
+
+            this.initSubscription = this.onCanvasReady(
+                this.store.ready$,
+                () => {
+                    this.set({
+                        instance: this.prepareInstance(make(THREE.Fog, fog)),
+                    });
+
+                    return () => {
+                        this.initSubscription?.unsubscribe();
+                    };
+                },
+                true
+            );
         });
     }
 
+    private initSubscription?: Subscription;
+
     constructor(
         zone: NgZone,
         store: NgtStore,
diff --git a/libs/core/attributes/src/lib/fog-exp2-attribute/fog-exp2-attribute.ts b/libs/core/attributes/src/lib/fog-exp2-attribute/fog-exp2-attribute.ts
index 7a6e2d8f1..24a89460c 100644
--- a/libs/core/attributes/src/lib/fog-exp2-attribute/fog-exp2-attribute.ts
+++ b/libs/core/attributes/src/lib/fog-exp2-attribute/fog-exp2-attribute.ts
@@ -19,6 +19,7 @@ import {
     SkipSelf,
 } from '@angular/core';
 import * as THREE from 'three';
+import type { Subscription } from 'rxjs';
 
 @Component({
     selector: 'ngt-fog-exp2[fogExp2]',
@@ -29,11 +30,30 @@ import * as THREE from 'three';
 export class NgtFogExp2Attribute extends NgtInstance<THREE.FogExp2> {
     @Input() set fogExp2(fogExp2: NgtFogExp2) {
         this.zone.runOutsideAngular(() => {
-            const instance = this.prepareInstance(make(THREE.FogExp2, fogExp2));
-            this.set({ instance });
+            if (this.initSubscription) {
+                this.initSubscription.unsubscribe();
+            }
+
+            this.initSubscription = this.onCanvasReady(
+                this.store.ready$,
+                () => {
+                    this.set({
+                        instance: this.prepareInstance(
+                            make(THREE.FogExp2, fogExp2)
+                        ),
+                    });
+
+                    return () => {
+                        this.initSubscription?.unsubscribe();
+                    };
+                },
+                true
+            );
         });
     }
 
+    private initSubscription?: Subscription;
+
     constructor(
         zone: NgZone,
         store: NgtStore,
diff --git a/libs/core/attributes/src/lib/matrix3-attribute/matrix3-attribute.ts b/libs/core/attributes/src/lib/matrix3-attribute/matrix3-attribute.ts
index adaa3419e..c45212d5e 100644
--- a/libs/core/attributes/src/lib/matrix3-attribute/matrix3-attribute.ts
+++ b/libs/core/attributes/src/lib/matrix3-attribute/matrix3-attribute.ts
@@ -19,6 +19,7 @@ import {
     SkipSelf,
 } from '@angular/core';
 import * as THREE from 'three';
+import type { Subscription } from 'rxjs';
 
 @Component({
     selector: 'ngt-matrix3[matrix3]',
@@ -29,11 +30,30 @@ import * as THREE from 'three';
 export class NgtMatrix3Attribute extends NgtInstance<THREE.Matrix3> {
     @Input() set matrix3(matrix3: NgtMatrix3) {
         this.zone.runOutsideAngular(() => {
-            const instance = this.prepareInstance(make(THREE.Matrix3, matrix3));
-            this.set({ instance });
+            if (this.initSubscription) {
+                this.initSubscription.unsubscribe();
+            }
+
+            this.initSubscription = this.onCanvasReady(
+                this.store.ready$,
+                () => {
+                    this.set({
+                        instance: this.prepareInstance(
+                            make(THREE.Matrix3, matrix3)
+                        ),
+                    });
+
+                    return () => {
+                        this.initSubscription?.unsubscribe();
+                    };
+                },
+                true
+            );
         });
     }
 
+    private initSubscription?: Subscription;
+
     constructor(
         zone: NgZone,
         store: NgtStore,
diff --git a/libs/core/attributes/src/lib/matrix4-attribute/matrix4-attribute.ts b/libs/core/attributes/src/lib/matrix4-attribute/matrix4-attribute.ts
index 8960921d5..013531fc8 100644
--- a/libs/core/attributes/src/lib/matrix4-attribute/matrix4-attribute.ts
+++ b/libs/core/attributes/src/lib/matrix4-attribute/matrix4-attribute.ts
@@ -19,6 +19,7 @@ import {
     SkipSelf,
 } from '@angular/core';
 import * as THREE from 'three';
+import type { Subscription } from 'rxjs';
 
 @Component({
     selector: 'ngt-matrix4[matrix4]',
@@ -29,11 +30,30 @@ import * as THREE from 'three';
 export class NgtMatrix4Attribute extends NgtInstance<THREE.Matrix4> {
     @Input() set matrix4(matrix4: NgtMatrix4) {
         this.zone.runOutsideAngular(() => {
-            const instance = this.prepareInstance(make(THREE.Matrix4, matrix4));
-            this.set({ instance });
+            if (this.initSubscription) {
+                this.initSubscription.unsubscribe();
+            }
+
+            this.initSubscription = this.onCanvasReady(
+                this.store.ready$,
+                () => {
+                    this.set({
+                        instance: this.prepareInstance(
+                            make(THREE.Matrix4, matrix4)
+                        ),
+                    });
+
+                    return () => {
+                        this.initSubscription?.unsubscribe();
+                    };
+                },
+                true
+            );
         });
     }
 
+    private initSubscription?: Subscription;
+
     constructor(
         zone: NgZone,
         store: NgtStore,
diff --git a/libs/core/attributes/src/lib/vector2-attribute/vector2-attribute.ts b/libs/core/attributes/src/lib/vector2-attribute/vector2-attribute.ts
index db8aa3db1..bf6fe7166 100644
--- a/libs/core/attributes/src/lib/vector2-attribute/vector2-attribute.ts
+++ b/libs/core/attributes/src/lib/vector2-attribute/vector2-attribute.ts
@@ -19,6 +19,7 @@ import {
     SkipSelf,
 } from '@angular/core';
 import * as THREE from 'three';
+import type { Subscription } from 'rxjs';
 
 @Component({
     selector: 'ngt-vector2[vector2]',
@@ -29,11 +30,28 @@ import * as THREE from 'three';
 export class NgtVector2Attribute extends NgtInstance<THREE.Vector2> {
     @Input() set vector2(vector2: NgtVector2) {
         this.zone.runOutsideAngular(() => {
-            const instance = this.prepareInstance(makeVector2(vector2));
-            this.set({ instance });
+            if (this.initSubscription) {
+                this.initSubscription.unsubscribe();
+            }
+
+            this.initSubscription = this.onCanvasReady(
+                this.store.ready$,
+                () => {
+                    this.set({
+                        instance: this.prepareInstance(makeVector2(vector2)),
+                    });
+
+                    return () => {
+                        this.initSubscription?.unsubscribe();
+                    };
+                },
+                true
+            );
         });
     }
 
+    private initSubscription?: Subscription;
+
     constructor(
         zone: NgZone,
         store: NgtStore,
diff --git a/libs/core/attributes/src/lib/vector3-attribute/vector3-attribute.ts b/libs/core/attributes/src/lib/vector3-attribute/vector3-attribute.ts
index 6a61b498a..0032a7666 100644
--- a/libs/core/attributes/src/lib/vector3-attribute/vector3-attribute.ts
+++ b/libs/core/attributes/src/lib/vector3-attribute/vector3-attribute.ts
@@ -19,6 +19,7 @@ import {
     SkipSelf,
 } from '@angular/core';
 import * as THREE from 'three';
+import type { Subscription } from 'rxjs';
 
 @Component({
     selector: 'ngt-vector3[vector3]',
@@ -29,11 +30,28 @@ import * as THREE from 'three';
 export class NgtVector3Attribute extends NgtInstance<THREE.Vector3> {
     @Input() set vector3(vector3: NgtVector3) {
         this.zone.runOutsideAngular(() => {
-            const instance = this.prepareInstance(makeVector3(vector3));
-            this.set({ instance });
+            if (this.initSubscription) {
+                this.initSubscription.unsubscribe();
+            }
+
+            this.initSubscription = this.onCanvasReady(
+                this.store.ready$,
+                () => {
+                    this.set({
+                        instance: this.prepareInstance(makeVector3(vector3)),
+                    });
+
+                    return () => {
+                        this.initSubscription?.unsubscribe();
+                    };
+                },
+                true
+            );
         });
     }
 
+    private initSubscription?: Subscription;
+
     constructor(
         zone: NgZone,
         store: NgtStore,
diff --git a/libs/core/attributes/src/lib/vector4-attribute/vector4-attribute.ts b/libs/core/attributes/src/lib/vector4-attribute/vector4-attribute.ts
index db1528bb0..4bb4bc687 100644
--- a/libs/core/attributes/src/lib/vector4-attribute/vector4-attribute.ts
+++ b/libs/core/attributes/src/lib/vector4-attribute/vector4-attribute.ts
@@ -19,6 +19,7 @@ import {
     SkipSelf,
 } from '@angular/core';
 import * as THREE from 'three';
+import type { Subscription } from 'rxjs';
 
 @Component({
     selector: 'ngt-vector4[vector4]',
@@ -29,11 +30,28 @@ import * as THREE from 'three';
 export class NgtVector4Attribute extends NgtInstance<THREE.Vector4> {
     @Input() set vector4(vector4: NgtVector4) {
         this.zone.runOutsideAngular(() => {
-            const instance = this.prepareInstance(makeVector4(vector4));
-            this.set({ instance });
+            if (this.initSubscription) {
+                this.initSubscription.unsubscribe();
+            }
+
+            this.initSubscription = this.onCanvasReady(
+                this.store.ready$,
+                () => {
+                    this.set({
+                        instance: this.prepareInstance(makeVector4(vector4)),
+                    });
+
+                    return () => {
+                        this.initSubscription?.unsubscribe();
+                    };
+                },
+                true
+            );
         });
     }
 
+    private initSubscription?: Subscription;
+
     constructor(
         zone: NgZone,
         store: NgtStore,