Pixi.js: Визуализировать three.js внутри pixi.js?

Созданный на 6 февр. 2019  ·  11Комментарии  ·  Источник: pixijs/pixi.js

Привет! Я пытаюсь отобразить сцену 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 ломается.

screenshot 2019-02-06 at 02 00 02

Как сообщить pixi.js об обновлении размеров текстуры?

Окружающая обстановка

🤔 Question

Самый полезный комментарий

Я исправил эти проблемы в другом проекте, позже сделаю демонстрацию этого кода. Есть патч для v4, который меняет способ использования pixi renderTargets (v5 renderTextures).

Все 11 Комментарий

Возможно, примеры 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

Я обнаружил некоторые проблемы:

  1. PIXI.Application больше не принимает параметр 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

но, очевидно, это игнорируется, я не знаю, как работает демо

  1. текстура three.js переворачивается на Y (я знаю, webgl)

  2. при изменении размера окна текстура растягивается в обратную сторону? наверное я что то делаю не так

Еще раз спасибо, что изучили это!

Я исправил эти проблемы в другом проекте, позже сделаю демонстрацию этого кода. Есть патч для v4, который меняет способ использования pixi renderTargets (v5 renderTextures).

@ivanpopelyshev, не могли бы вы исправить пример теперь, когда v5 вышла? 🙏

Эта проблема была автоматически помечена как устаревшая, поскольку в последнее время не было активности. Он будет закрыт, если больше не будет активности. Спасибо за ваш вклад.

Устаревший бот не

Есть какие-нибудь обновления? Кодовый код работает, но я не уверен, взломан он или нет.

Была ли эта страница полезной?
0 / 5 - 0 рейтинги