PIXI.RenderTexture를 사용하는 방법 및시기

Question

저는 자전거 바퀴를 시각화하는 도구를 만들고 있습니다. 약 100 개의 PIXI.Graphics를 사용하여 전체 휠을 구성합니다. 전체 휠은 PIXI.Container에 배치 된 다음 렌더링됩니다. 모든 프레임을 렌더링하는 것이 꽤 많은 것처럼 보였으므로 PIXI.RenderTexture 클래스를 조사하고이 경우이 메서드를 사용하는 것이 좋을 것이라고 생각했습니다. 그래서 질문 1, 좋은 유스 케이스인가? 질문 2, 문제 해결에 어려움을 겪고 있기 때문에 어떻게 사용할 수 있습니까? 다음과 같이

const options = { 
 
    transparent: true, 
 
    antialias: true, 
 
    backgroundColor: 0xffffff, 
 
    resolution: window.devicePixelRatio, 
 
    view: canvasEle, 
 
}; 
 

 
const app = new PIXI.Application(width, height, options); 
 

 
const wrapper = new PIXI.Container(); // Wrapper is used for zooming and panning the wheel 
 
app.stage.addChild(wrapper); 
 

 
const wheel = new Wheel(wheelOpts); // Returns PIXI.Container full of PIXI.Graphics 
 
wrapper.addChild(wheel);

그리고 renderTexture를 사용하여 내 시도이다. 내가 그것을 사용하는 방법을 근무하고 작은 jsfiddle을했다

Answer 1

그러나 나는 어떤 도움을 주셔서 감사를 해결

const options = { 
 
    transparent: true, 
 
    antialias: true, 
 
    backgroundColor: 0xffffff, 
 
    resolution: window.devicePixelRatio, 
 
    view: canvasEle, 
 
}; 
 

 
const app = new PIXI.Application(width, height, options); 
 

 
const wrapper = new PIXI.Container(); // Wrapper is used for zooming and panning the wheel 
 
app.stage.addChild(wrapper); 
 

 
const wheelRenderTexture = new PIXI.RenderTexture.create(width, height); 
 
const wheelSprite = new PIXI.Sprite(wheelRenderTexture) 
 
wrapper.addChild(wheelSprite) 
 

 
const wheel = new Wheel(wheelOpts); // Returns PIXI.Container full of PIXI.Graphics 
 

 
app.ticker.add(() => 
 
{ 
 
    app.renderer.render(wheel, wheelRenderTexture); 
 
})

수없는 것 https://jsfiddle.net/hp98ygz5/1/

const width = 600 
const height = 600 

var app = new PIXI.Application(width, height, {backgroundColor : 0xffffff}); 
document.body.appendChild(app.view); 

const wheelRenderTexture = PIXI.RenderTexture.create(width, height); 
const wheelRenderSprite = new PIXI.Sprite(wheelRenderTexture); 
app.stage.addChild(wheelRenderSprite) 

const wheelContainer = new PIXI.Container() 
//app.stage.addChild(wheelContainer) 
wheelContainer.addChild(drawCircle(100,100,50,0xfec3dc,2,0Xfe68a4)) 
wheelContainer.addChild(drawCircle(100,100,20,0xFFCC66,2,0X55ff77)) 

app.renderer.render(wheelContainer,wheelRenderTexture) 

위의 예에서 무엇이 잘못되었지만 지금은 작동하는지 모르겠습니다.