Pixi.js: Tidak ada cara untuk membuat bentuk tanpa grafik

Pasti sesuatu yang bisa kita lihat :)

Nah, Anda bisa menggunakan pendekatan "Graphics._renderSpriteRect". Grafik menggunakan renderTexture dan sprite untuk persegi panjang sipmle, Anda dapat melakukan hal yang sama: buat renderTexture, lalu gunakan sprite.

var rect = this.graphicsData[0].shape;
    if(!this._spriteRect)
    {
        if(!Graphics._SPRITE_TEXTURE)
        {
            Graphics._SPRITE_TEXTURE = RenderTexture.create(10, 10);

            var currentRenderTarget = renderer._activeRenderTarget;
            renderer.bindRenderTexture(Graphics._SPRITE_TEXTURE);
            renderer.clear([1,1,1,1]);
            renderer.bindRenderTarget(currentRenderTarget);
        }

        this._spriteRect = new Sprite(Graphics._SPRITE_TEXTURE);
    }
    if (this.tint === 0xffffff) {
        this._spriteRect.tint = this.graphicsData[0].fillColor;
    } else {
        var t1 = tempColor1;
        var t2 = tempColor2;
        utils.hex2rgb(this.graphicsData[0].fillColor, t1);
        utils.hex2rgb(this.tint, t2);
        t1[0] *= t2[0];
        t1[1] *= t2[1];
        t1[2] *= t2[2];
        this._spriteRect.tint = utils.rgb2hex(t1);
    }
    this._spriteRect.alpha = this.graphicsData[0].fillAlpha;
    this._spriteRect.worldAlpha = this.worldAlpha * this._spriteRect.alpha;

    Graphics._SPRITE_TEXTURE._frame.width = rect.width;
    Graphics._SPRITE_TEXTURE._frame.height = rect.height;

    this._spriteRect.transform.worldTransform = this.transform.worldTransform;

    this._spriteRect.anchor.set(-rect.x / rect.width, -rect.y / rect.height);
    this._spriteRect.onAnchorUpdate();

    this._spriteRect._renderWebGL(renderer);

Kami merender persegi panjang, segitiga, dan lingkaran hanya menggunakan shader khusus. Ini jauh lebih cepat daripada menggunakan objek Pixi Graphics dan semua tepi sepenuhnya anti-alias karena menggunakan perhitungan bidang jarak di shader.

Menambahkan garis luar, kilau, bayangan, dan efek lain ke bentuk ini adalah hal yang sepele. Kami hanya menyesuaikan warna, strokeWidth, strokeColor dan berbagai seragam efek untuk shader.

Saya akan menyarankan untuk melihat ke rendering bentuk/primitif berbasis shader untuk versi Pixi yang akan datang, karena jauh lebih unggul dari pendekatan saat ini.

Ya, tetapi masalahnya adalah tekstur render jauh lebih berat cpu daripada primitif sederhana (persegi panjang adalah quad tanpa tekstur dengan shader), dan jika saya harus banyak mengubah ukuran bentuk itu (yang biasanya saya lakukan) maka kinerja akan baik menerima pukulan atau itu akan membutuhkan lebih banyak kode.

Kedengarannya sangat menarik @GordoRank ! Akan senang melihat implementasi Anda!

@Dadibom - Graphics Rectangles sangat dioptimalkan dalam pixi saat ini karena digabungkan ke dalam sistem sprite. Ini semua dilakukan di belakang layar :)

Saya kira apa yang Anda minta adalah cara tangan pendek untuk membuat persegi panjang?

Ya tapi saya masih harus menghapus tekstur dan menggambar ulang setiap frame, bukan hanya memindahkan persegi panjang individu

Kenapa Anda perlu menghapusnya setiap frame?

@Dadibom menggunakan banyak grafik, ubah posisi setiap saat.

Adapun primitif Anda, jika Anda memiliki sesuatu yang diatur khusus, harap jadikan itu sebuah plugin. Apalagi jika barang-barang Anda terikat dengan plot. https://github.com/pixijs/pixi-plugin-example . Ini akan membantu orang lain juga.

Tidak berfungsi jika saya ingin mengubah ukuran :(

Tentu, saya bisa menggunakan skala. Tapi itu lebih banyak kode daripada yang seharusnya

Kami pada dasarnya memiliki aplikasi penerbitan desktop bertenaga PIXI yang lengkap (pemformatan / rendering teks SDF berbasis shader, pengeditan foto, tata letak halaman, gambar, kurva bezier, dll.) Kami hanya memperluas PIXI banyak untuk memenuhi kebutuhan kami.

Ini adalah versi lama PIXI 3.0 dari shader lingkaran / elips yang memungkinkan Anda mengatur lebar, tinggi, opacity, strokeWidth, fillColor dan strokeColor.

Ini agak berantakan dan dapat ditingkatkan tetapi itu bekerja dengan sempurna untuk kami. Kami memiliki shader serupa untuk persegi panjang, segitiga dan bintang runcing.

Shader ini diterapkan ke perender Pixi khusus yang hanya menerapkan shader ke quad tanpa tekstur.

PIXI.filters.CircleShader = function(shaderManager) {


    PIXI.Shader.call(this,
        shaderManager,
        // vertex shader
        [
            'precision lowp float;',
            'attribute vec2 aVertexPosition;',
            'attribute vec2 aTextureCoord;',
            'attribute vec4 aColor;',

            'uniform mat3 projectionMatrix;',

            'varying vec2 vTextureCoord;',
            'varying vec4 vColor;',

            'void main(void){',
            '   gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);',
            '   vTextureCoord = aTextureCoord;',
            '   vColor = vec4(aColor.rgb * aColor.a, aColor.a);',
            '}'
        ].join('\n'),
        // fragment shader
        [
            '#extension GL_OES_standard_derivatives : enable',
            'precision mediump float;',

            'varying vec2 vTextureCoord;',

            'uniform float width;',
            'uniform float height;',
            'uniform float opacity;',
            'uniform vec4 fillColor;', 
            'uniform vec4 strokeColor;', 
            'uniform float strokeWidth;',

            'float texelSizeX = 1.0 / width;',
            'float texelSizeY = 1.0 / height;',

            'vec2 px = vec2(texelSizeX, texelSizeY);',
            'vec2 ab = vec2(width, height) / 2.0;',
            'vec2 center = vec2(0.5, 0.5);',


            'void main(void){',

            'vec2 pos = (vTextureCoord - center) / px;',
            'pos *= pos;',

            'float outerDist = dot(pos, 1.0 / (ab * ab));',

            'ab -= strokeWidth;',
            'float innerDist = dot(pos, 1.0 / (ab * ab));',

            'float outerDelta = length(vec2(dFdx(outerDist), dFdy(outerDist))) * 0.70710678118654757;',

            'float innerDelta = length(vec2(dFdx(innerDist), dFdy(innerDist))) * 0.70710678118654757;',

            'float innerAlpha = smoothstep(1.0 - innerDelta, 1.0 + innerDelta, innerDist);',
            'float outerAlpha = smoothstep(1.0 - outerDelta, 1.0 + outerDelta, outerDist);',


            'vec4 stroke = mix(strokeColor, vec4(0, 0, 0, 0), outerAlpha);',
            'vec4 fill = mix(fillColor, vec4(0, 0, 0, 0), innerAlpha);',

            'gl_FragColor = mix(vec4(0.0, 0.0, 0.0, 0.0), mix(fill, stroke, innerAlpha), opacity);',

            '}'
        ].join('\n'),
        // custom uniforms
        {
            dimensions: {
                type: '4fv',
                value: new Float32Array([0, 0, 0, 0])
            },
            projectionMatrix: { type: 'mat3', value: new Float32Array(9) },
            strokeWidth: {
                type: '1f',
                value: 0.0
            },
            strokeColor : { type: '4fv', value: new Float32Array([0, 0, 0, 0]) },
            fillColor : { type: '4fv', value: new Float32Array([0, 0, 0, 0]) },
            width : { type : '1f', value: 1.0},
            height : { type : '1f', value: 1.0},
            opacity : { type : '1f', value: 1.0}
        },
        // custom attributes
        {
            aTextureCoord:0,
            aVertexPosition:0,
            aColor:0
        }

    );


    this.strokeWidth = 0.0;
    this.strokeColor = new Float32Array([0, 0, 0, 0]);
    this.fillColor = new Float32Array([0, 0, 0, 0]);
    this.opacity = 1.0;


};

PIXI.filters.CircleShader.prototype = Object.create(PIXI.Shader.prototype);
PIXI.filters.CircleShader.prototype.constructor = PIXI.filters.CircleShader;

PIXI.ShaderManager.registerPlugin('circleShader', PIXI.filters.CircleShader);

Saya telah menghapus definisi properti agar komentar ini tetap ringkas.

@GoodBoyDigital karena saya harus menyingkirkan persegi panjang lama

@Dadibom bagus. Anda berada di setengah jalan untuk menjadi plugin pixi resmi.

Untuk v4 Anda dapat menghapus parameter "args" dari shader, argumen akan diekstraksi secara otomatis. Juga, Anda tidak dapat mengatur apa pun ke seragam kecuali shader terikat . Ketika penyaji menetapkan nilai untuk seragam, itu harus seperti itu:

myShader.bind();
myShader.uniforms.strokeWidth = ...;

Lihat contoh penyaji.

Juga, kode shader dapat dipisahkan menjadi file "frag" dan "vert", menggunakan glsify, contohnya juga.

@GordoRank Ini benar-benar hal yang menarik! Maukah Anda mempertimbangkan untuk membagikan apa yang Anda miliki - Saya pikir banyak pengguna pixi akan menemukan apa yang telah Anda buat benar-benar luar biasa :)

@GoodBoyDigital Tentu saja. Tim saat ini terikat untuk membangun jaringan sosial dan infrastruktur pengiriman pesan waktu nyata untuk aspek kolaborasi/komunitas/sosial dari aplikasi kami, dan karena itu kami tidak akan keluar dari versi beta paling cepat hingga Desember, jadi saya tidak bisa membiarkannya ada yang main sekarang. Tetapi segera setelah kami melakukannya, kami akan membuat blog pengembang yang menjelaskan perjalanan, tantangan, dan teknik kami, dll. Segera setelah itu, saya akan berbagi dengan kalian.

Dan setelah kami bermigrasi ke PIXI versi 4, kami akan mulai melihat apa yang berpotensi kami masukkan kembali ke PIXI dalam hal plugin dll. Saya pikir tata letak teks dan rendering font SDF akan menjadi keuntungan besar bagi kalian sebagai permulaan.

Luar biasa! Saya (dan saya yakin komunitas pixi lainnya) menantikan Desember :)
Semoga berhasil dengan rilis beta Anda!

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

Menendang kehidupan ke utas lama ini karena saya tertarik pada dua aspek yang disebutkan @GordoRank .

1. rendering teks SDF berbasis shader
2. rendering bentuk berbasis shader

Apakah Anda pernah mempublikasikan karya Anda ke publik?