pixijs / pixi-gl-core

A set of tidy little pixi objects that make working with WebGL simpler

PIXI GL Core

A set of tidy little pixi objects that make working with WebGL simpler.

They are used under the hood in Pixi v4. They should also give more users the ability to do more advanced stuff with WebGL in v4 too.

See the components in action here.

Installing

Installing using NPM:

npm install pixi-gl-core --save

Usage

Including using Node:

var gl = require('pixi-gl-core');

Including in the Browser:

<canvas id="stage"></canvas>
<script src="node_modules/pixi-gl-core/bin/pixi-gl-core.min.js"></script>
<script>
    try 
    {
        var context = pixi.gl.createContext(document.getElementById('stage'));
    }
    catch(e)
    {
        console.error("Unable to create WebGL context");
    }
</script>

Rebuilding

After install NPM module with npm install, build using:

npm run build

To run a watch, development command.

npm run watch

To generate the documention.

npm run doc

To deploy the documention to the gh-pages branch:

npm run deploy

Documentation

The API documentation can be found here.

License

This content is released under the MIT License.

pixi-gl-core's Issues

ContentSecurityPolicy unsafe-eval error

I've introduced ContentSecurityPolicy (https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)
as the last frontend defense for my company's website.

And there's a line (

pixi-gl-core/src/shader/generateUniformAccessObject.js

Line 45 in bae92f4

return new Function(template); // jshint ignore:line

) using:

Function(someString)

to generate a function, which generates a Content Security Policy unsafe-eval error.

Gnarly WebGL issues, started around august 9th I think

Not sure which pixi-gl-core commit i'm having trouble with, but I suddenly started getting some gnarly WebGL errors and image artifacts:

I'm not sure if the problem is on my end, is there anything i should be aware of, like a big change -- i'll read through the commit log when i have more time, but if anyone knows it would be much appreciated.

Issue goes away when i revert to commit hash before August 9th, currently works fine with "pixi-gl-core": "git://github.com/pixijs/pixi-gl-core.git#05e3c268fb1a1f9c1181d564af856284ba5705e8"

Wish I could help more, but i'm not as familiar with low level web gl coding.

There is a Typo in GLShader.js

At https://github.com/pixijs/pixi-gl-core/blob/master/src/GLShader.js#L16

There is a needless ].

missing var in 4.0

when lib/shader/compileProgram.js is bundled into pixi4, a var ends up being missed off.

E.g. from https://raw.githubusercontent.com/pixijs/pixi.js/df8a46d3e00dcc0199f5adce6354b68951175ca5/bin/pixi.js

compileProgram = function(gl, vertexSrc, fragmentSrc)

^^ see missing var.

a function named error in 'mapType.js'

hi~

there is a named error occur at mapType

var mapSize =function(
...

the 'mapSize' has been named in mapSize

Use of Buffer identifier

Hello all,

I was just looking at pixi repos and noticed this one. While browsing the sources, I saw a Buffer class. The Buffer identifier is pretty common and is a global in Node.js. Although pixi.js target browsers, the Buffer object can exist in global namespace if using this module or with some libs/transpilers polyfills.

This can create confusing bugs if you do not import pixi's Buffer and another global Buffer class is used instead. I suggest to prefix like GLBuffer (and maybe do the same for other classes in this module).

float texture can't use on mobile

hi mobile can't use float

so i couldn't test 'http://dev.goodboydigital.com/client/goodboy/million/' this too

Transparent WebM videos do not clear previous alpha (Fix included!)

Please see pixijs/pixijs#3526

It's urgent for our project to have this fix implemented into the latest Pixi.js release, we don't want to have to modify ourselves.

Thanks.

[ERROR] `gl` is not defined

pixi-gl-core/src/shader/extractAttributes.js

Line 38 in 911ca17

gl.vertexAttribPointer(this.location,this.size, type || gl.FLOAT, normalized || false, stride || 0, start || 0);

[BUG] Can't set data when create a framebuffer via `Framebuffer.createRGBA`

The data always be null

Framebuffer.createRGBA = function(gl, width, height, data)
{
    var texture = Texture.fromData(gl, null, width, height);
    texture.enableNearestScaling();
    texture.enableWrapClamp();

    //now create the framebuffer object and attach the texture to it.
    var fbo = new Framebuffer(gl, width, height);
    fbo.enableTexture(texture);
    //fbo.enableStencil(); // get this back on soon!

    //fbo.enableStencil(); // get this back on soon!

    fbo.unbind();

    return fbo;
};

[REQUEST]Add `Framebuffer.createHalfFloat`

Most browsers have support gl.getExtension('OES_texture_half_float')

And in some cases , it's useful.
e.g. : on iOS , it supports OES_texture_float, but doesn't support render sth. on it.
it only supports render sth. on OES_texture_half_float.

texSubImage2D seems way slower than texImage2D

Hello,

On the project I'm working on I use a sprite with a video as a texture. When this element is added to the stage the performance drops dramatically... checking the dev tools seems like texSubImage2D was taking too long to execute (15ms, the video source is 1920x1080).

I checked a project a made some months ago with a similar element and there were no performance problems whatsoever. After some inspection I noticed the previous version of PIXI used texImage2D instead of texSubImage2D.

I commented some lines on GLTexture.js to force the use texImage2D and the performance is good again. We are talking 0.4ms with texImage2D vs 15ms with texSubImage2D.

My system is a 2016 MBP with latest sierra.

The pointer methods

Hi!

In the file extractAttributes.js, the pointer function references the gl variable that is not defined in the scope. I think it works because gl is mostly defined as a global variable but it makes the code fragile anyway. For example, it fails when used with webpack.
An easy fix for it would be to create to create the pointer function in the scope of extractAttributes. Another solution that would not require creating multiple functions would be to add gl to the attribute object and using this.gl in pointer.

What do you think ?

Cheers

Buffer upload size check wrong?

In the Buffer upload method it checks if the new data uploaded size is smaller than the current buffer data, than it will use bufferSubData and update current buffer instead creating a new buffer with bufferData. But, if an offset is given, then the buffer size check is wrong, as the function might try to use bufferSubData outside of the buffer bounds.

pixi-gl-core/src/GLBuffer.js

Lines 75 to 82 in 4982ea0

	if(this.data.byteLength >= data.byteLength)
	{
	gl.bufferSubData(this.type, offset, data);
	}
	else
	{
	gl.bufferData(this.type, data, this.drawType);
	}

Example:
this.data.byteLength = data.byteLength = 1000 bytes
offset = 100 bytes.

Orig buffer: [------------] 1000bytes
Because sizes are the same, bufferSubData will be used, leading to a buffer update like

Old data: [------------] 1000bytes
            | 100B     |
            | offset   |
New data:   [------------] 1000bytes
                       |....] <--- This part is out of bounds

I think the correct check would be:

if(this.data.byteLength >= data.byteLength + offset)

Or is it fine that bufferSubData writes data in the buffer more than the initial buffer size?