This repository was archived by the owner on Feb 10, 2023. It is now read-only.
This repository was archived by the owner on Feb 10, 2023. It is now read-only.
GL_INVALID_FRAMEBUFFER_OPERATION when trying to add bloom effect #78
Description
Getting hundreds of the following two warnings and a huge performance drop when trying to add bloom effect with ng-effect-composer. The bloom effect never takes effect.
I have tried with different objects but got the same warning.
- [.WebGL-000066BA002AE900] GL_INVALID_FRAMEBUFFER_OPERATION: Framebuffer is incomplete: Attachment has zero size.
- [.WebGL-000066BA002AE900] GL_INVALID_FRAMEBUFFER_OPERATION: Draw framebuffer is incomplete
I have a queen component holding a primitive object below which I am trying to display on a landing-page.html.
queen.component.ts
import {
ChangeDetectionStrategy,
Component,
Input,
} from '@angular/core';
import { NgtVector3 } from '@angular-three/core';
import { NgtGLTFLoader } from '@angular-three/soba/loaders'
import { NgtSobaOrbitControls } from '@angular-three/soba/controls';
import { Mesh, MeshStandardMaterial, Object3D, PerspectiveCamera } from 'three';
@Component({
selector: 'queen',
templateUrl: './queen.component.html',
styleUrls: ['./queen.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class QueenComponent {
@Input() public position?: NgtVector3; // imported from @angular-three/core
public hover = false;
public active = false;
public queen = this._ngtGLTFLoader.load('assets/threed/queen.glb');
public queenMaterial: MeshStandardMaterial | undefined;
#color = '#5323ff';
constructor(private _ngtGLTFLoader: NgtGLTFLoader) { }
queenLoaded(object: Object3D) {
this.queenMaterial = <MeshStandardMaterial>(<Mesh>object.getObjectByName('Queen')).material;
this.applyColorToMaterial(this.#color);
console.log(object);
}
setInitial(controls: NgtSobaOrbitControls) {
const orbitControl = controls.controls;
const camera = orbitControl.object as PerspectiveCamera;
camera.zoom = 2;
camera.position.setX(0);
camera.position.setY(50);
camera.position.setZ(200);
}
applyColorToMaterial(color: string) {
if (this.queenMaterial) {
this.queenMaterial.color.setHex(parseInt(color.substring(1), 16));
}
}
onAnimate(mesh: THREE.Object3D) {
mesh.rotation.y = mesh.rotation.x += 0.01;
}
}
queen.component.html
<ngt-canvas>
<ngt-spot-light [position]="[50, 50, 50]"></ngt-spot-light>
<ngt-spot-light [position]="[-50, -50, -50]"></ngt-spot-light>
<ngt-directional-light
[position]="[0, 1, 2]"
color="white"
></ngt-directional-light>
<ngt-primitive
(animateReady)="onAnimate($event.object)"
(ready)="queenLoaded($event)"
*ngIf="queen | async as queen"
[object]="queen.scene">
</ngt-primitive>
<ngt-soba-orbit-controls
#controls="ngtSobaOrbitControls"
(ready)="setInitial(controls)"
[target]="[0, 0, 0]"
>
</ngt-soba-orbit-controls>
<ngt-effect-composer>
<ngt-bloom></ngt-bloom>
</ngt-effect-composer>
</ngt-canvas>
landing-page.html
<queen></queen>