Pixi.js: Render three.js di dalam pixi.js?

Mungkin saja, contoh threejs telah diposting beberapa kali di Masalah untuk v4, tetapi saya belum membuatnya untuk v5.
Pada dasarnya, Anda harus mengatur ulang status pixi dan threejs setiap kali Anda mengubah perpustakaan.

Saya tidak dapat memberikan demo lama sekarang, tetapi Anda dapat mencarinya di sini dan di http://www.html5gamedevs.com/forum/15-pixijs/ . Berbagi tekstur juga dibahas di suatu tempat.

Yang harus Anda lakukan adalah mencari dan kemudian port ke v5, semoga berhasil! Saya dapat membantu dengan kedua hal tersebut jika Anda gagal di suatu tempat.

Saya bahkan membuat demo di mana objek 2d dan 3d disortir satu sama lain, tetapi yang itu tidak saya bagikan di depan umum.

Apakah ini menyelesaikan masalah Anda? https://github.com/pixijs/pixi.js/pull/5430 Fix sudah ada di 5.0.0-rc2

@ivanpopelyshev terima kasih atas tanggapannya! Saya pikir Anda mengacu pada diskusi ini dan cuplikan kode ini lebih tepatnya:

    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)
    }

Namun saya tidak mengerti di mana harus memasukkan kode ini, dan apa variabel session , saya membayangkan gl adalah glcontext dari tiga kanvas. Di mana saya meletakkannya dalam contoh ini?

https://codepen.io/marco_fugaro/pen/QYgJQY?editors=0010

(Masalah mulai terjadi pada pengubahan ukuran jendela)

Saya memiliki 5.0.0-rc.2 dalam contoh, haruskah saya mengubah sesuatu?

Saya tidak tahu contoh lama ini, tetapi semua yang Anda sebutkan termasuk dalam renderer.reset()

const threeTexture = PIXI.Texture.from(threeApp.renderer.domElement)

ini ide yang buruk.

Apakah Anda melihat # 5430?

@marcofugaro Ada tindak lanjut lain tentang ini?

@ivanpopelyshev @bigtimebuddy maaf membuat Anda menunggu, akhirnya saya mencoba lagi.

@ivanpopelyshev Terima kasih untuk tiga demo pixi lama yang Anda posting di PR, itu benar-benar berguna, saya mencoba menerapkan metode 2 di contoh berikutnya (juga peduli untuk menjelaskan apa ide buruknya dengan PIXI.Texture.from(threeApp.renderer.domElement) ? Maaf saya tidak tahu banyak tentang webgl tingkat lanjut)

Berikut adalah contoh yang dikonversi ke pixi v5

https://codepen.io/marco_fugaro/pen/wOGpwv?editors=0010

Beberapa masalah yang saya temukan:

1. PIXI.Application tidak menerima lagi parameter context , dalam contoh v4 ada:

var renderer = new PIXI.WebGLRenderer(canvas.width, canvas.height, {
  context: context, // shared context with threejs

Saya melakukan ini di v5

 return new PIXI.Application({
    context: context, // shared context with threejs

tapi jelas itu diabaikan, saya tidak tahu cara kerja demo

1. tekstur three.js dibalik pada Y (saya tahu, webgl)

2. saat mengubah ukuran jendela, teksturnya akan meregang dengan cara yang berlawanan? mungkin saya melakukan sesuatu yang salah

Sekali lagi, terima kasih telah memeriksa ini!

Saya memperbaiki masalah itu di proyek lain, saya akan membuat demo kode itu nanti. Ada tambalan untuk v4 yang membalikkan cara pixi menggunakan renderT Target (v5 renderTextures).

@ivanpopelyshev dapatkah Anda memperbaiki contoh sekarang setelah v5 keluar? 🙏

Masalah ini secara otomatis ditandai sebagai usang karena tidak ada aktivitas terbaru. Ini akan ditutup jika tidak ada aktivitas lebih lanjut. Terima kasih atas kontribusi Anda.

Bot basi tidak

Ada pembaruan sejauh ini? Codepen tampaknya berfungsi tetapi saya tidak yakin apakah itu hacky atau tidak.