Привет! Я пытаюсь отобразить сцену three.js внутри pixi.js, чтобы применить к ней некоторые фильтры в режиме постобработки, как сделать это более эффективно?
У меня есть рабочий пример , вот в основном то, что я делаю, я запускаю three.js на внеэкранном холсте, а затем:
const threeTexture = PIXI.Texture.from(threeApp.renderer.domElement)
const threeSprite = new PIXI.Sprite(threeTexture)
// divide by pixelratio to make it the correct size, on retinas it's 2
threeSprite.scale.x /= window.devicePixelRatio
threeSprite.scale.y /= window.devicePixelRatio
pixiApp.stage.addChild(threeSprite)
а затем в цикле рендеринга у меня есть
threeApp.draw()
threeSprite.texture.update() // tell pixi that threejs has changed
pixiApp.render()
что-нибудь еще мне не хватает? какая-нибудь лучшая оптимизация?
В любом случае настоящая проблема в том, что когда я изменяю размер экрана, у меня запускается этот код в three.js:
renderer.setSize(window.innerWidth, window.innerHeight)
который в основном изменяет размеры отображаемой области three.js, и, конечно же, pixi.js ломается.
Как сообщить pixi.js об обновлении размеров текстуры?
pixi.js
версия : 5.0.0-rcthree.js
версия : 0.101.1Возможно, примеры threejs были опубликованы несколько раз в выпусках для v4, но я еще не сделал этого для v5.
По сути, вам нужно сбрасывать состояние pixi и threejs каждый раз, когда вы меняете библиотеки.
Я не могу предоставить старые демоверсии прямо сейчас, но вы можете найти их здесь и на http://www.html5gamedevs.com/forum/15-pixijs/ . Совместное использование текстур тоже где-то обсуждалось.
Все, что вам нужно сделать, это поискать и затем портировать на v5, удачи! Я могу помочь с обоими вещами, если у вас что-то не получится.
Я даже сделал демонстрацию, в которой 2d и 3d объекты СОРТИРУЮТСЯ друг через друга, но я не поделился публично.
Решает ли это ваши проблемы? https://github.com/pixijs/pixi.js/pull/5430 Исправление уже есть в 5.0.0-rc2
@ivanpopelyshev спасибо за ответ! Я думаю, вы имеете в виду это обсуждение и этот фрагмент кода более точно:
gl.disable(gl.DEPTH_TEST)
gl.enable(gl.BLEND)
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA)
gl.disable(gl.STENCIL_TEST)
gl.disable(gl.CULL_FACE)
gl.frontFace( gl.CCW )
gl.cullFace( gl.FRONT )
gl.colorMask(true, true, true, true)
gl.activeTexture(gl.TEXTURE0)
var shaderManager = session.shaderManager
shaderManager._currentId = undefined
for (var i=0; i<shaderManager.attribState.length; i++)
shaderManager.attribState[i] = false
shaderManager.setShader(shaderManager.currentShader)
var blend = session.blendModeManager.currentBlendMode
if (blend in PIXI.blendModesWebGL) {
session.blendModeManager.currentBlendMode = undefined
session.blendModeManager.setBlendMode(blend)
}
однако я не понимаю, куда вставить этот код и что такое переменная session
, я полагаю, что gl - это glcontext трех холстов. Где я могу поместить это в этот пример?
https://codepen.io/marco_fugaro/pen/QYgJQY?editors=0010
(Проблемы начинают возникать при изменении размера окна)
У меня в примере есть 5.0.0-rc.2
, мне что-то изменить?
Я не знаю этого старого примера, но все, что вы упомянули, включено в renderer.reset()
const threeTexture = PIXI.Texture.from(threeApp.renderer.domElement)
Это плохая идея.
Вы смотрели №5430?
@marcofugaro Что- нибудь еще по этому
@ivanpopelyshev @bigtimebuddy извини, что заставил тебя ждать, я наконец-то сделал еще один удар.
@ivanpopelyshev Спасибо за старую демонстрацию three in pixi, которую вы разместили в PR, это было действительно полезно, я попытался реализовать метод 2 в следующем примере (также не забудьте объяснить, в чем была плохая идея с PIXI.Texture.from(threeApp.renderer.domElement)
? Извините, я не знаю много продвинутых webgl)
Вот пример, преобразованный в pixi v5
https://codepen.io/marco_fugaro/pen/wOGpwv?editors=0010
Я обнаружил некоторые проблемы:
context
, в примере v4 это:var renderer = new PIXI.WebGLRenderer(canvas.width, canvas.height, {
context: context, // shared context with threejs
Я делаю это в версии 5
return new PIXI.Application({
context: context, // shared context with threejs
но, очевидно, это игнорируется, я не знаю, как работает демо
текстура three.js переворачивается на Y (я знаю, webgl)
при изменении размера окна текстура растягивается в обратную сторону? наверное я что то делаю не так
Еще раз спасибо, что изучили это!
Я исправил эти проблемы в другом проекте, позже сделаю демонстрацию этого кода. Есть патч для v4, который меняет способ использования pixi renderTargets (v5 renderTextures).
@ivanpopelyshev, не могли бы вы исправить пример теперь, когда v5 вышла? 🙏
Эта проблема была автоматически помечена как устаревшая, поскольку в последнее время не было активности. Он будет закрыт, если больше не будет активности. Спасибо за ваш вклад.
Устаревший бот не
Есть какие-нибудь обновления? Кодовый код работает, но я не уверен, взломан он или нет.
Самый полезный комментарий
Я исправил эти проблемы в другом проекте, позже сделаю демонстрацию этого кода. Есть патч для v4, который меняет способ использования pixi renderTargets (v5 renderTextures).