diff --git a/bundles/pixi.js/src/index.js b/bundles/pixi.js/src/index.js index fb839a0..a879872 100644 --- a/bundles/pixi.js/src/index.js +++ b/bundles/pixi.js/src/index.js @@ -9,7 +9,7 @@ import * as loaders from '@pixi/loaders'; import * as math from '@pixi/math'; import * as mesh from '@pixi/mesh'; -import * as particles from '@pixi/particles'; +// import * as particles from '@pixi/particles'; import * as prepare from '@pixi/prepare'; import * as sprite from '@pixi/sprite'; import * as spriteAnimated from '@pixi/sprite-animated'; @@ -38,7 +38,7 @@ core.Renderer.registerPlugin('graphics', graphics.GraphicsRenderer); core.Renderer.registerPlugin('interaction', interaction.InteractionManager); core.Renderer.registerPlugin('mesh', mesh.MeshRenderer); -core.Renderer.registerPlugin('particle', particles.ParticleRenderer); +// core.Renderer.registerPlugin('particle', particles.ParticleRenderer); core.Renderer.registerPlugin('prepare', prepare.Prepare); core.Renderer.registerPlugin('sprite', sprite.SpriteRenderer); core.Renderer.registerPlugin('tilingSprite', spriteTiling.TilingSpriteRenderer); @@ -120,7 +120,7 @@ loaders, math, mesh, - particles, + // particles, sprite, spriteAnimated, spritesheet, diff --git a/bundles/pixi.js/src/index.js b/bundles/pixi.js/src/index.js index fb839a0..a879872 100644 --- a/bundles/pixi.js/src/index.js +++ b/bundles/pixi.js/src/index.js @@ -9,7 +9,7 @@ import * as loaders from '@pixi/loaders'; import * as math from '@pixi/math'; import * as mesh from '@pixi/mesh'; -import * as particles from '@pixi/particles'; +// import * as particles from '@pixi/particles'; import * as prepare from '@pixi/prepare'; import * as sprite from '@pixi/sprite'; import * as spriteAnimated from '@pixi/sprite-animated'; @@ -38,7 +38,7 @@ core.Renderer.registerPlugin('graphics', graphics.GraphicsRenderer); core.Renderer.registerPlugin('interaction', interaction.InteractionManager); core.Renderer.registerPlugin('mesh', mesh.MeshRenderer); -core.Renderer.registerPlugin('particle', particles.ParticleRenderer); +// core.Renderer.registerPlugin('particle', particles.ParticleRenderer); core.Renderer.registerPlugin('prepare', prepare.Prepare); core.Renderer.registerPlugin('sprite', sprite.SpriteRenderer); core.Renderer.registerPlugin('tilingSprite', spriteTiling.TilingSpriteRenderer); @@ -120,7 +120,7 @@ loaders, math, mesh, - particles, + // particles, sprite, spriteAnimated, spritesheet, diff --git a/packages/core/package.json b/packages/core/package.json index 30e2e83..7d01377 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -29,7 +29,6 @@ "earcut": "^2.0.7", "eventemitter3": "^2.0.0", "ismobilejs": "^0.4.0", - "pixi-gl-core": "^2.0.0-alpha", "mini-runner": "^1.0.1", "@pixi/math": "^5.0.0-alpha", "@pixi/constants": "^5.0.0-alpha", diff --git a/bundles/pixi.js/src/index.js b/bundles/pixi.js/src/index.js index fb839a0..a879872 100644 --- a/bundles/pixi.js/src/index.js +++ b/bundles/pixi.js/src/index.js @@ -9,7 +9,7 @@ import * as loaders from '@pixi/loaders'; import * as math from '@pixi/math'; import * as mesh from '@pixi/mesh'; -import * as particles from '@pixi/particles'; +// import * as particles from '@pixi/particles'; import * as prepare from '@pixi/prepare'; import * as sprite from '@pixi/sprite'; import * as spriteAnimated from '@pixi/sprite-animated'; @@ -38,7 +38,7 @@ core.Renderer.registerPlugin('graphics', graphics.GraphicsRenderer); core.Renderer.registerPlugin('interaction', interaction.InteractionManager); core.Renderer.registerPlugin('mesh', mesh.MeshRenderer); -core.Renderer.registerPlugin('particle', particles.ParticleRenderer); +// core.Renderer.registerPlugin('particle', particles.ParticleRenderer); core.Renderer.registerPlugin('prepare', prepare.Prepare); core.Renderer.registerPlugin('sprite', sprite.SpriteRenderer); core.Renderer.registerPlugin('tilingSprite', spriteTiling.TilingSpriteRenderer); @@ -120,7 +120,7 @@ loaders, math, mesh, - particles, + // particles, sprite, spriteAnimated, spritesheet, diff --git a/packages/core/package.json b/packages/core/package.json index 30e2e83..7d01377 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -29,7 +29,6 @@ "earcut": "^2.0.7", "eventemitter3": "^2.0.0", "ismobilejs": "^0.4.0", - "pixi-gl-core": "^2.0.0-alpha", "mini-runner": "^1.0.1", "@pixi/math": "^5.0.0-alpha", "@pixi/constants": "^5.0.0-alpha", diff --git a/packages/core/src/index.js b/packages/core/src/index.js index 0951de6..8b8e67c 100644 --- a/packages/core/src/index.js +++ b/packages/core/src/index.js @@ -14,7 +14,6 @@ export { default as WebGLSystem } from './renderers/systems/WebGLSystem'; export { default as State } from './renderers/State'; export { default as ObjectRenderer } from './renderers/utils/ObjectRenderer'; -export { default as RenderTarget } from './renderers/utils/RenderTarget'; export { default as Quad } from './renderers/utils/Quad'; export { default as checkMaxIfStatmentsInShader } from './renderers/utils/checkMaxIfStatmentsInShader'; export { default as Shader } from './shader/Shader'; diff --git a/bundles/pixi.js/src/index.js b/bundles/pixi.js/src/index.js index fb839a0..a879872 100644 --- a/bundles/pixi.js/src/index.js +++ b/bundles/pixi.js/src/index.js @@ -9,7 +9,7 @@ import * as loaders from '@pixi/loaders'; import * as math from '@pixi/math'; import * as mesh from '@pixi/mesh'; -import * as particles from '@pixi/particles'; +// import * as particles from '@pixi/particles'; import * as prepare from '@pixi/prepare'; import * as sprite from '@pixi/sprite'; import * as spriteAnimated from '@pixi/sprite-animated'; @@ -38,7 +38,7 @@ core.Renderer.registerPlugin('graphics', graphics.GraphicsRenderer); core.Renderer.registerPlugin('interaction', interaction.InteractionManager); core.Renderer.registerPlugin('mesh', mesh.MeshRenderer); -core.Renderer.registerPlugin('particle', particles.ParticleRenderer); +// core.Renderer.registerPlugin('particle', particles.ParticleRenderer); core.Renderer.registerPlugin('prepare', prepare.Prepare); core.Renderer.registerPlugin('sprite', sprite.SpriteRenderer); core.Renderer.registerPlugin('tilingSprite', spriteTiling.TilingSpriteRenderer); @@ -120,7 +120,7 @@ loaders, math, mesh, - particles, + // particles, sprite, spriteAnimated, spritesheet, diff --git a/packages/core/package.json b/packages/core/package.json index 30e2e83..7d01377 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -29,7 +29,6 @@ "earcut": "^2.0.7", "eventemitter3": "^2.0.0", "ismobilejs": "^0.4.0", - "pixi-gl-core": "^2.0.0-alpha", "mini-runner": "^1.0.1", "@pixi/math": "^5.0.0-alpha", "@pixi/constants": "^5.0.0-alpha", diff --git a/packages/core/src/index.js b/packages/core/src/index.js index 0951de6..8b8e67c 100644 --- a/packages/core/src/index.js +++ b/packages/core/src/index.js @@ -14,7 +14,6 @@ export { default as WebGLSystem } from './renderers/systems/WebGLSystem'; export { default as State } from './renderers/State'; export { default as ObjectRenderer } from './renderers/utils/ObjectRenderer'; -export { default as RenderTarget } from './renderers/utils/RenderTarget'; export { default as Quad } from './renderers/utils/Quad'; export { default as checkMaxIfStatmentsInShader } from './renderers/utils/checkMaxIfStatmentsInShader'; export { default as Shader } from './shader/Shader'; diff --git a/packages/core/src/renderers/Renderer.js b/packages/core/src/renderers/Renderer.js index 6967107..89ce25f 100644 --- a/packages/core/src/renderers/Renderer.js +++ b/packages/core/src/renderers/Renderer.js @@ -2,7 +2,7 @@ import { sayHello } from '@pixi/utils'; import MaskSystem from './systems/MaskSystem'; import StencilSystem from './systems/StencilSystem'; -import FilterSystem from './systems/FilterSystem'; +// import FilterSystem from './systems/FilterSystem'; import FramebufferSystem from './systems/FramebufferSystem'; import RenderTextureSystem from './systems/RenderTextureSystem'; import TextureSystem from './systems/textures/TextureSystem'; @@ -103,7 +103,7 @@ .addSystem(StencilSystem, 'stencil') .addSystem(ProjectionSystem, 'projection') // .addSystem(TextureGCSystem) - .addSystem(FilterSystem, 'filter') + // .addSystem(FilterSystem, 'filter') .addSystem(RenderTextureSystem, 'renderTexture') .addSystem(BatchSystem, 'batch'); diff --git a/bundles/pixi.js/src/index.js b/bundles/pixi.js/src/index.js index fb839a0..a879872 100644 --- a/bundles/pixi.js/src/index.js +++ b/bundles/pixi.js/src/index.js @@ -9,7 +9,7 @@ import * as loaders from '@pixi/loaders'; import * as math from '@pixi/math'; import * as mesh from '@pixi/mesh'; -import * as particles from '@pixi/particles'; +// import * as particles from '@pixi/particles'; import * as prepare from '@pixi/prepare'; import * as sprite from '@pixi/sprite'; import * as spriteAnimated from '@pixi/sprite-animated'; @@ -38,7 +38,7 @@ core.Renderer.registerPlugin('graphics', graphics.GraphicsRenderer); core.Renderer.registerPlugin('interaction', interaction.InteractionManager); core.Renderer.registerPlugin('mesh', mesh.MeshRenderer); -core.Renderer.registerPlugin('particle', particles.ParticleRenderer); +// core.Renderer.registerPlugin('particle', particles.ParticleRenderer); core.Renderer.registerPlugin('prepare', prepare.Prepare); core.Renderer.registerPlugin('sprite', sprite.SpriteRenderer); core.Renderer.registerPlugin('tilingSprite', spriteTiling.TilingSpriteRenderer); @@ -120,7 +120,7 @@ loaders, math, mesh, - particles, + // particles, sprite, spriteAnimated, spritesheet, diff --git a/packages/core/package.json b/packages/core/package.json index 30e2e83..7d01377 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -29,7 +29,6 @@ "earcut": "^2.0.7", "eventemitter3": "^2.0.0", "ismobilejs": "^0.4.0", - "pixi-gl-core": "^2.0.0-alpha", "mini-runner": "^1.0.1", "@pixi/math": "^5.0.0-alpha", "@pixi/constants": "^5.0.0-alpha", diff --git a/packages/core/src/index.js b/packages/core/src/index.js index 0951de6..8b8e67c 100644 --- a/packages/core/src/index.js +++ b/packages/core/src/index.js @@ -14,7 +14,6 @@ export { default as WebGLSystem } from './renderers/systems/WebGLSystem'; export { default as State } from './renderers/State'; export { default as ObjectRenderer } from './renderers/utils/ObjectRenderer'; -export { default as RenderTarget } from './renderers/utils/RenderTarget'; export { default as Quad } from './renderers/utils/Quad'; export { default as checkMaxIfStatmentsInShader } from './renderers/utils/checkMaxIfStatmentsInShader'; export { default as Shader } from './shader/Shader'; diff --git a/packages/core/src/renderers/Renderer.js b/packages/core/src/renderers/Renderer.js index 6967107..89ce25f 100644 --- a/packages/core/src/renderers/Renderer.js +++ b/packages/core/src/renderers/Renderer.js @@ -2,7 +2,7 @@ import { sayHello } from '@pixi/utils'; import MaskSystem from './systems/MaskSystem'; import StencilSystem from './systems/StencilSystem'; -import FilterSystem from './systems/FilterSystem'; +// import FilterSystem from './systems/FilterSystem'; import FramebufferSystem from './systems/FramebufferSystem'; import RenderTextureSystem from './systems/RenderTextureSystem'; import TextureSystem from './systems/textures/TextureSystem'; @@ -103,7 +103,7 @@ .addSystem(StencilSystem, 'stencil') .addSystem(ProjectionSystem, 'projection') // .addSystem(TextureGCSystem) - .addSystem(FilterSystem, 'filter') + // .addSystem(FilterSystem, 'filter') .addSystem(RenderTextureSystem, 'renderTexture') .addSystem(BatchSystem, 'batch'); diff --git a/packages/core/src/renderers/filters/Filter.js b/packages/core/src/renderers/filters/Filter.js index 06f1222..2d82c8e 100644 --- a/packages/core/src/renderers/filters/Filter.js +++ b/packages/core/src/renderers/filters/Filter.js @@ -3,7 +3,7 @@ import { BLEND_MODES } from '@pixi/constants'; import { settings } from '@pixi/settings'; import { uid } from '@pixi/utils'; -import extractUniformsFromSrc from './extractUniformsFromSrc'; +// import extractUniformsFromSrc from './extractUniformsFromSrc'; import defaultVertex from './defaultFilter.vert'; import defaultFragment from './defaultFilter.frag'; @@ -28,7 +28,8 @@ this._blendMode = BLEND_MODES.NORMAL; - this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms; + // || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); /** * An object containing the current values of custom uniforms. diff --git a/bundles/pixi.js/src/index.js b/bundles/pixi.js/src/index.js index fb839a0..a879872 100644 --- a/bundles/pixi.js/src/index.js +++ b/bundles/pixi.js/src/index.js @@ -9,7 +9,7 @@ import * as loaders from '@pixi/loaders'; import * as math from '@pixi/math'; import * as mesh from '@pixi/mesh'; -import * as particles from '@pixi/particles'; +// import * as particles from '@pixi/particles'; import * as prepare from '@pixi/prepare'; import * as sprite from '@pixi/sprite'; import * as spriteAnimated from '@pixi/sprite-animated'; @@ -38,7 +38,7 @@ core.Renderer.registerPlugin('graphics', graphics.GraphicsRenderer); core.Renderer.registerPlugin('interaction', interaction.InteractionManager); core.Renderer.registerPlugin('mesh', mesh.MeshRenderer); -core.Renderer.registerPlugin('particle', particles.ParticleRenderer); +// core.Renderer.registerPlugin('particle', particles.ParticleRenderer); core.Renderer.registerPlugin('prepare', prepare.Prepare); core.Renderer.registerPlugin('sprite', sprite.SpriteRenderer); core.Renderer.registerPlugin('tilingSprite', spriteTiling.TilingSpriteRenderer); @@ -120,7 +120,7 @@ loaders, math, mesh, - particles, + // particles, sprite, spriteAnimated, spritesheet, diff --git a/packages/core/package.json b/packages/core/package.json index 30e2e83..7d01377 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -29,7 +29,6 @@ "earcut": "^2.0.7", "eventemitter3": "^2.0.0", "ismobilejs": "^0.4.0", - "pixi-gl-core": "^2.0.0-alpha", "mini-runner": "^1.0.1", "@pixi/math": "^5.0.0-alpha", "@pixi/constants": "^5.0.0-alpha", diff --git a/packages/core/src/index.js b/packages/core/src/index.js index 0951de6..8b8e67c 100644 --- a/packages/core/src/index.js +++ b/packages/core/src/index.js @@ -14,7 +14,6 @@ export { default as WebGLSystem } from './renderers/systems/WebGLSystem'; export { default as State } from './renderers/State'; export { default as ObjectRenderer } from './renderers/utils/ObjectRenderer'; -export { default as RenderTarget } from './renderers/utils/RenderTarget'; export { default as Quad } from './renderers/utils/Quad'; export { default as checkMaxIfStatmentsInShader } from './renderers/utils/checkMaxIfStatmentsInShader'; export { default as Shader } from './shader/Shader'; diff --git a/packages/core/src/renderers/Renderer.js b/packages/core/src/renderers/Renderer.js index 6967107..89ce25f 100644 --- a/packages/core/src/renderers/Renderer.js +++ b/packages/core/src/renderers/Renderer.js @@ -2,7 +2,7 @@ import { sayHello } from '@pixi/utils'; import MaskSystem from './systems/MaskSystem'; import StencilSystem from './systems/StencilSystem'; -import FilterSystem from './systems/FilterSystem'; +// import FilterSystem from './systems/FilterSystem'; import FramebufferSystem from './systems/FramebufferSystem'; import RenderTextureSystem from './systems/RenderTextureSystem'; import TextureSystem from './systems/textures/TextureSystem'; @@ -103,7 +103,7 @@ .addSystem(StencilSystem, 'stencil') .addSystem(ProjectionSystem, 'projection') // .addSystem(TextureGCSystem) - .addSystem(FilterSystem, 'filter') + // .addSystem(FilterSystem, 'filter') .addSystem(RenderTextureSystem, 'renderTexture') .addSystem(BatchSystem, 'batch'); diff --git a/packages/core/src/renderers/filters/Filter.js b/packages/core/src/renderers/filters/Filter.js index 06f1222..2d82c8e 100644 --- a/packages/core/src/renderers/filters/Filter.js +++ b/packages/core/src/renderers/filters/Filter.js @@ -3,7 +3,7 @@ import { BLEND_MODES } from '@pixi/constants'; import { settings } from '@pixi/settings'; import { uid } from '@pixi/utils'; -import extractUniformsFromSrc from './extractUniformsFromSrc'; +// import extractUniformsFromSrc from './extractUniformsFromSrc'; import defaultVertex from './defaultFilter.vert'; import defaultFragment from './defaultFilter.frag'; @@ -28,7 +28,8 @@ this._blendMode = BLEND_MODES.NORMAL; - this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms; + // || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); /** * An object containing the current values of custom uniforms. diff --git a/packages/core/src/renderers/filters/extractUniformsFromSrc.js b/packages/core/src/renderers/filters/extractUniformsFromSrc.js deleted file mode 100644 index 5ec7007..0000000 --- a/packages/core/src/renderers/filters/extractUniformsFromSrc.js +++ /dev/null @@ -1,58 +0,0 @@ -import glCore from 'pixi-gl-core'; - -const defaultValue = glCore.shader.defaultValue; - -export default function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) -{ - const vertUniforms = extractUniformsFromString(vertexSrc, mask); - const fragUniforms = extractUniformsFromString(fragmentSrc, mask); - - return Object.assign(vertUniforms, fragUniforms); -} - -function extractUniformsFromString(string) -{ - const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea|filterClamp)$'); - - const uniforms = {}; - let nameSplit; - - // clean the lines a little - remove extra spaces / tabs etc - // then split along ';' - const lines = string.replace(/\s+/g, ' ') - .split(/\s*;\s*/); - - // loop through.. - for (let i = 0; i < lines.length; i++) - { - const line = lines[i].trim(); - - if (line.indexOf('uniform') > -1) - { - const splitLine = line.split(' '); - const type = splitLine[1]; - - let name = splitLine[2]; - let size = 1; - - if (name.indexOf('[') > -1) - { - // array! - nameSplit = name.split(/\[|]/); - name = nameSplit[0]; - size *= Number(nameSplit[1]); - } - - if (!name.match(maskRegex)) - { - uniforms[name] = { - value: defaultValue(type, size), - name, - type, - }; - } - } - } - - return uniforms; -} diff --git a/bundles/pixi.js/src/index.js b/bundles/pixi.js/src/index.js index fb839a0..a879872 100644 --- a/bundles/pixi.js/src/index.js +++ b/bundles/pixi.js/src/index.js @@ -9,7 +9,7 @@ import * as loaders from '@pixi/loaders'; import * as math from '@pixi/math'; import * as mesh from '@pixi/mesh'; -import * as particles from '@pixi/particles'; +// import * as particles from '@pixi/particles'; import * as prepare from '@pixi/prepare'; import * as sprite from '@pixi/sprite'; import * as spriteAnimated from '@pixi/sprite-animated'; @@ -38,7 +38,7 @@ core.Renderer.registerPlugin('graphics', graphics.GraphicsRenderer); core.Renderer.registerPlugin('interaction', interaction.InteractionManager); core.Renderer.registerPlugin('mesh', mesh.MeshRenderer); -core.Renderer.registerPlugin('particle', particles.ParticleRenderer); +// core.Renderer.registerPlugin('particle', particles.ParticleRenderer); core.Renderer.registerPlugin('prepare', prepare.Prepare); core.Renderer.registerPlugin('sprite', sprite.SpriteRenderer); core.Renderer.registerPlugin('tilingSprite', spriteTiling.TilingSpriteRenderer); @@ -120,7 +120,7 @@ loaders, math, mesh, - particles, + // particles, sprite, spriteAnimated, spritesheet, diff --git a/packages/core/package.json b/packages/core/package.json index 30e2e83..7d01377 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -29,7 +29,6 @@ "earcut": "^2.0.7", "eventemitter3": "^2.0.0", "ismobilejs": "^0.4.0", - "pixi-gl-core": "^2.0.0-alpha", "mini-runner": "^1.0.1", "@pixi/math": "^5.0.0-alpha", "@pixi/constants": "^5.0.0-alpha", diff --git a/packages/core/src/index.js b/packages/core/src/index.js index 0951de6..8b8e67c 100644 --- a/packages/core/src/index.js +++ b/packages/core/src/index.js @@ -14,7 +14,6 @@ export { default as WebGLSystem } from './renderers/systems/WebGLSystem'; export { default as State } from './renderers/State'; export { default as ObjectRenderer } from './renderers/utils/ObjectRenderer'; -export { default as RenderTarget } from './renderers/utils/RenderTarget'; export { default as Quad } from './renderers/utils/Quad'; export { default as checkMaxIfStatmentsInShader } from './renderers/utils/checkMaxIfStatmentsInShader'; export { default as Shader } from './shader/Shader'; diff --git a/packages/core/src/renderers/Renderer.js b/packages/core/src/renderers/Renderer.js index 6967107..89ce25f 100644 --- a/packages/core/src/renderers/Renderer.js +++ b/packages/core/src/renderers/Renderer.js @@ -2,7 +2,7 @@ import { sayHello } from '@pixi/utils'; import MaskSystem from './systems/MaskSystem'; import StencilSystem from './systems/StencilSystem'; -import FilterSystem from './systems/FilterSystem'; +// import FilterSystem from './systems/FilterSystem'; import FramebufferSystem from './systems/FramebufferSystem'; import RenderTextureSystem from './systems/RenderTextureSystem'; import TextureSystem from './systems/textures/TextureSystem'; @@ -103,7 +103,7 @@ .addSystem(StencilSystem, 'stencil') .addSystem(ProjectionSystem, 'projection') // .addSystem(TextureGCSystem) - .addSystem(FilterSystem, 'filter') + // .addSystem(FilterSystem, 'filter') .addSystem(RenderTextureSystem, 'renderTexture') .addSystem(BatchSystem, 'batch'); diff --git a/packages/core/src/renderers/filters/Filter.js b/packages/core/src/renderers/filters/Filter.js index 06f1222..2d82c8e 100644 --- a/packages/core/src/renderers/filters/Filter.js +++ b/packages/core/src/renderers/filters/Filter.js @@ -3,7 +3,7 @@ import { BLEND_MODES } from '@pixi/constants'; import { settings } from '@pixi/settings'; import { uid } from '@pixi/utils'; -import extractUniformsFromSrc from './extractUniformsFromSrc'; +// import extractUniformsFromSrc from './extractUniformsFromSrc'; import defaultVertex from './defaultFilter.vert'; import defaultFragment from './defaultFilter.frag'; @@ -28,7 +28,8 @@ this._blendMode = BLEND_MODES.NORMAL; - this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms; + // || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); /** * An object containing the current values of custom uniforms. diff --git a/packages/core/src/renderers/filters/extractUniformsFromSrc.js b/packages/core/src/renderers/filters/extractUniformsFromSrc.js deleted file mode 100644 index 5ec7007..0000000 --- a/packages/core/src/renderers/filters/extractUniformsFromSrc.js +++ /dev/null @@ -1,58 +0,0 @@ -import glCore from 'pixi-gl-core'; - -const defaultValue = glCore.shader.defaultValue; - -export default function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) -{ - const vertUniforms = extractUniformsFromString(vertexSrc, mask); - const fragUniforms = extractUniformsFromString(fragmentSrc, mask); - - return Object.assign(vertUniforms, fragUniforms); -} - -function extractUniformsFromString(string) -{ - const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea|filterClamp)$'); - - const uniforms = {}; - let nameSplit; - - // clean the lines a little - remove extra spaces / tabs etc - // then split along ';' - const lines = string.replace(/\s+/g, ' ') - .split(/\s*;\s*/); - - // loop through.. - for (let i = 0; i < lines.length; i++) - { - const line = lines[i].trim(); - - if (line.indexOf('uniform') > -1) - { - const splitLine = line.split(' '); - const type = splitLine[1]; - - let name = splitLine[2]; - let size = 1; - - if (name.indexOf('[') > -1) - { - // array! - nameSplit = name.split(/\[|]/); - name = nameSplit[0]; - size *= Number(nameSplit[1]); - } - - if (!name.match(maskRegex)) - { - uniforms[name] = { - value: defaultValue(type, size), - name, - type, - }; - } - } - } - - return uniforms; -} diff --git a/packages/core/src/renderers/managers/BlendModeManager.js b/packages/core/src/renderers/managers/BlendModeManager.js deleted file mode 100644 index 7362ae7..0000000 --- a/packages/core/src/renderers/managers/BlendModeManager.js +++ /dev/null @@ -1,45 +0,0 @@ -import WebGLManager from './WebGLManager'; - -/** - * @class - * @memberof PIXI - * @extends PIXI.WebGLManager - */ -export default class BlendModeManager extends WebGLManager -{ - /** - * @param {PIXI.Renderer} renderer - The renderer this manager works for. - */ - constructor(renderer) - { - super(renderer); - - /** - * @member {number} - */ - this.currentBlendMode = 99999; - } - - /** - * Sets-up the given blendMode from WebGL's point of view. - * - * @param {number} blendMode - the blendMode, should be a PixiJS const, such as - * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. - * @return {boolean} Returns if the blend mode was changed. - */ - setBlendMode(blendMode) - { - if (this.currentBlendMode === blendMode) - { - return false; - } - - this.currentBlendMode = blendMode; - - const mode = this.renderer.blendModes[this.currentBlendMode]; - - this.renderer.gl.blendFunc(mode[0], mode[1]); - - return true; - } -} diff --git a/bundles/pixi.js/src/index.js b/bundles/pixi.js/src/index.js index fb839a0..a879872 100644 --- a/bundles/pixi.js/src/index.js +++ b/bundles/pixi.js/src/index.js @@ -9,7 +9,7 @@ import * as loaders from '@pixi/loaders'; import * as math from '@pixi/math'; import * as mesh from '@pixi/mesh'; -import * as particles from '@pixi/particles'; +// import * as particles from '@pixi/particles'; import * as prepare from '@pixi/prepare'; import * as sprite from '@pixi/sprite'; import * as spriteAnimated from '@pixi/sprite-animated'; @@ -38,7 +38,7 @@ core.Renderer.registerPlugin('graphics', graphics.GraphicsRenderer); core.Renderer.registerPlugin('interaction', interaction.InteractionManager); core.Renderer.registerPlugin('mesh', mesh.MeshRenderer); -core.Renderer.registerPlugin('particle', particles.ParticleRenderer); +// core.Renderer.registerPlugin('particle', particles.ParticleRenderer); core.Renderer.registerPlugin('prepare', prepare.Prepare); core.Renderer.registerPlugin('sprite', sprite.SpriteRenderer); core.Renderer.registerPlugin('tilingSprite', spriteTiling.TilingSpriteRenderer); @@ -120,7 +120,7 @@ loaders, math, mesh, - particles, + // particles, sprite, spriteAnimated, spritesheet, diff --git a/packages/core/package.json b/packages/core/package.json index 30e2e83..7d01377 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -29,7 +29,6 @@ "earcut": "^2.0.7", "eventemitter3": "^2.0.0", "ismobilejs": "^0.4.0", - "pixi-gl-core": "^2.0.0-alpha", "mini-runner": "^1.0.1", "@pixi/math": "^5.0.0-alpha", "@pixi/constants": "^5.0.0-alpha", diff --git a/packages/core/src/index.js b/packages/core/src/index.js index 0951de6..8b8e67c 100644 --- a/packages/core/src/index.js +++ b/packages/core/src/index.js @@ -14,7 +14,6 @@ export { default as WebGLSystem } from './renderers/systems/WebGLSystem'; export { default as State } from './renderers/State'; export { default as ObjectRenderer } from './renderers/utils/ObjectRenderer'; -export { default as RenderTarget } from './renderers/utils/RenderTarget'; export { default as Quad } from './renderers/utils/Quad'; export { default as checkMaxIfStatmentsInShader } from './renderers/utils/checkMaxIfStatmentsInShader'; export { default as Shader } from './shader/Shader'; diff --git a/packages/core/src/renderers/Renderer.js b/packages/core/src/renderers/Renderer.js index 6967107..89ce25f 100644 --- a/packages/core/src/renderers/Renderer.js +++ b/packages/core/src/renderers/Renderer.js @@ -2,7 +2,7 @@ import { sayHello } from '@pixi/utils'; import MaskSystem from './systems/MaskSystem'; import StencilSystem from './systems/StencilSystem'; -import FilterSystem from './systems/FilterSystem'; +// import FilterSystem from './systems/FilterSystem'; import FramebufferSystem from './systems/FramebufferSystem'; import RenderTextureSystem from './systems/RenderTextureSystem'; import TextureSystem from './systems/textures/TextureSystem'; @@ -103,7 +103,7 @@ .addSystem(StencilSystem, 'stencil') .addSystem(ProjectionSystem, 'projection') // .addSystem(TextureGCSystem) - .addSystem(FilterSystem, 'filter') + // .addSystem(FilterSystem, 'filter') .addSystem(RenderTextureSystem, 'renderTexture') .addSystem(BatchSystem, 'batch'); diff --git a/packages/core/src/renderers/filters/Filter.js b/packages/core/src/renderers/filters/Filter.js index 06f1222..2d82c8e 100644 --- a/packages/core/src/renderers/filters/Filter.js +++ b/packages/core/src/renderers/filters/Filter.js @@ -3,7 +3,7 @@ import { BLEND_MODES } from '@pixi/constants'; import { settings } from '@pixi/settings'; import { uid } from '@pixi/utils'; -import extractUniformsFromSrc from './extractUniformsFromSrc'; +// import extractUniformsFromSrc from './extractUniformsFromSrc'; import defaultVertex from './defaultFilter.vert'; import defaultFragment from './defaultFilter.frag'; @@ -28,7 +28,8 @@ this._blendMode = BLEND_MODES.NORMAL; - this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms; + // || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); /** * An object containing the current values of custom uniforms. diff --git a/packages/core/src/renderers/filters/extractUniformsFromSrc.js b/packages/core/src/renderers/filters/extractUniformsFromSrc.js deleted file mode 100644 index 5ec7007..0000000 --- a/packages/core/src/renderers/filters/extractUniformsFromSrc.js +++ /dev/null @@ -1,58 +0,0 @@ -import glCore from 'pixi-gl-core'; - -const defaultValue = glCore.shader.defaultValue; - -export default function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) -{ - const vertUniforms = extractUniformsFromString(vertexSrc, mask); - const fragUniforms = extractUniformsFromString(fragmentSrc, mask); - - return Object.assign(vertUniforms, fragUniforms); -} - -function extractUniformsFromString(string) -{ - const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea|filterClamp)$'); - - const uniforms = {}; - let nameSplit; - - // clean the lines a little - remove extra spaces / tabs etc - // then split along ';' - const lines = string.replace(/\s+/g, ' ') - .split(/\s*;\s*/); - - // loop through.. - for (let i = 0; i < lines.length; i++) - { - const line = lines[i].trim(); - - if (line.indexOf('uniform') > -1) - { - const splitLine = line.split(' '); - const type = splitLine[1]; - - let name = splitLine[2]; - let size = 1; - - if (name.indexOf('[') > -1) - { - // array! - nameSplit = name.split(/\[|]/); - name = nameSplit[0]; - size *= Number(nameSplit[1]); - } - - if (!name.match(maskRegex)) - { - uniforms[name] = { - value: defaultValue(type, size), - name, - type, - }; - } - } - } - - return uniforms; -} diff --git a/packages/core/src/renderers/managers/BlendModeManager.js b/packages/core/src/renderers/managers/BlendModeManager.js deleted file mode 100644 index 7362ae7..0000000 --- a/packages/core/src/renderers/managers/BlendModeManager.js +++ /dev/null @@ -1,45 +0,0 @@ -import WebGLManager from './WebGLManager'; - -/** - * @class - * @memberof PIXI - * @extends PIXI.WebGLManager - */ -export default class BlendModeManager extends WebGLManager -{ - /** - * @param {PIXI.Renderer} renderer - The renderer this manager works for. - */ - constructor(renderer) - { - super(renderer); - - /** - * @member {number} - */ - this.currentBlendMode = 99999; - } - - /** - * Sets-up the given blendMode from WebGL's point of view. - * - * @param {number} blendMode - the blendMode, should be a PixiJS const, such as - * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. - * @return {boolean} Returns if the blend mode was changed. - */ - setBlendMode(blendMode) - { - if (this.currentBlendMode === blendMode) - { - return false; - } - - this.currentBlendMode = blendMode; - - const mode = this.renderer.blendModes[this.currentBlendMode]; - - this.renderer.gl.blendFunc(mode[0], mode[1]); - - return true; - } -} diff --git a/packages/core/src/renderers/systems/geometry/GLBuffer.js b/packages/core/src/renderers/systems/geometry/GLBuffer.js new file mode 100644 index 0000000..0477e8a --- /dev/null +++ b/packages/core/src/renderers/systems/geometry/GLBuffer.js @@ -0,0 +1,9 @@ +export default class GLBuffer +{ + constructor(buffer) + { + this.buffer = buffer; + this.updateID = -1; + this.byteLength = -1; + } +} diff --git a/bundles/pixi.js/src/index.js b/bundles/pixi.js/src/index.js index fb839a0..a879872 100644 --- a/bundles/pixi.js/src/index.js +++ b/bundles/pixi.js/src/index.js @@ -9,7 +9,7 @@ import * as loaders from '@pixi/loaders'; import * as math from '@pixi/math'; import * as mesh from '@pixi/mesh'; -import * as particles from '@pixi/particles'; +// import * as particles from '@pixi/particles'; import * as prepare from '@pixi/prepare'; import * as sprite from '@pixi/sprite'; import * as spriteAnimated from '@pixi/sprite-animated'; @@ -38,7 +38,7 @@ core.Renderer.registerPlugin('graphics', graphics.GraphicsRenderer); core.Renderer.registerPlugin('interaction', interaction.InteractionManager); core.Renderer.registerPlugin('mesh', mesh.MeshRenderer); -core.Renderer.registerPlugin('particle', particles.ParticleRenderer); +// core.Renderer.registerPlugin('particle', particles.ParticleRenderer); core.Renderer.registerPlugin('prepare', prepare.Prepare); core.Renderer.registerPlugin('sprite', sprite.SpriteRenderer); core.Renderer.registerPlugin('tilingSprite', spriteTiling.TilingSpriteRenderer); @@ -120,7 +120,7 @@ loaders, math, mesh, - particles, + // particles, sprite, spriteAnimated, spritesheet, diff --git a/packages/core/package.json b/packages/core/package.json index 30e2e83..7d01377 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -29,7 +29,6 @@ "earcut": "^2.0.7", "eventemitter3": "^2.0.0", "ismobilejs": "^0.4.0", - "pixi-gl-core": "^2.0.0-alpha", "mini-runner": "^1.0.1", "@pixi/math": "^5.0.0-alpha", "@pixi/constants": "^5.0.0-alpha", diff --git a/packages/core/src/index.js b/packages/core/src/index.js index 0951de6..8b8e67c 100644 --- a/packages/core/src/index.js +++ b/packages/core/src/index.js @@ -14,7 +14,6 @@ export { default as WebGLSystem } from './renderers/systems/WebGLSystem'; export { default as State } from './renderers/State'; export { default as ObjectRenderer } from './renderers/utils/ObjectRenderer'; -export { default as RenderTarget } from './renderers/utils/RenderTarget'; export { default as Quad } from './renderers/utils/Quad'; export { default as checkMaxIfStatmentsInShader } from './renderers/utils/checkMaxIfStatmentsInShader'; export { default as Shader } from './shader/Shader'; diff --git a/packages/core/src/renderers/Renderer.js b/packages/core/src/renderers/Renderer.js index 6967107..89ce25f 100644 --- a/packages/core/src/renderers/Renderer.js +++ b/packages/core/src/renderers/Renderer.js @@ -2,7 +2,7 @@ import { sayHello } from '@pixi/utils'; import MaskSystem from './systems/MaskSystem'; import StencilSystem from './systems/StencilSystem'; -import FilterSystem from './systems/FilterSystem'; +// import FilterSystem from './systems/FilterSystem'; import FramebufferSystem from './systems/FramebufferSystem'; import RenderTextureSystem from './systems/RenderTextureSystem'; import TextureSystem from './systems/textures/TextureSystem'; @@ -103,7 +103,7 @@ .addSystem(StencilSystem, 'stencil') .addSystem(ProjectionSystem, 'projection') // .addSystem(TextureGCSystem) - .addSystem(FilterSystem, 'filter') + // .addSystem(FilterSystem, 'filter') .addSystem(RenderTextureSystem, 'renderTexture') .addSystem(BatchSystem, 'batch'); diff --git a/packages/core/src/renderers/filters/Filter.js b/packages/core/src/renderers/filters/Filter.js index 06f1222..2d82c8e 100644 --- a/packages/core/src/renderers/filters/Filter.js +++ b/packages/core/src/renderers/filters/Filter.js @@ -3,7 +3,7 @@ import { BLEND_MODES } from '@pixi/constants'; import { settings } from '@pixi/settings'; import { uid } from '@pixi/utils'; -import extractUniformsFromSrc from './extractUniformsFromSrc'; +// import extractUniformsFromSrc from './extractUniformsFromSrc'; import defaultVertex from './defaultFilter.vert'; import defaultFragment from './defaultFilter.frag'; @@ -28,7 +28,8 @@ this._blendMode = BLEND_MODES.NORMAL; - this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms; + // || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); /** * An object containing the current values of custom uniforms. diff --git a/packages/core/src/renderers/filters/extractUniformsFromSrc.js b/packages/core/src/renderers/filters/extractUniformsFromSrc.js deleted file mode 100644 index 5ec7007..0000000 --- a/packages/core/src/renderers/filters/extractUniformsFromSrc.js +++ /dev/null @@ -1,58 +0,0 @@ -import glCore from 'pixi-gl-core'; - -const defaultValue = glCore.shader.defaultValue; - -export default function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) -{ - const vertUniforms = extractUniformsFromString(vertexSrc, mask); - const fragUniforms = extractUniformsFromString(fragmentSrc, mask); - - return Object.assign(vertUniforms, fragUniforms); -} - -function extractUniformsFromString(string) -{ - const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea|filterClamp)$'); - - const uniforms = {}; - let nameSplit; - - // clean the lines a little - remove extra spaces / tabs etc - // then split along ';' - const lines = string.replace(/\s+/g, ' ') - .split(/\s*;\s*/); - - // loop through.. - for (let i = 0; i < lines.length; i++) - { - const line = lines[i].trim(); - - if (line.indexOf('uniform') > -1) - { - const splitLine = line.split(' '); - const type = splitLine[1]; - - let name = splitLine[2]; - let size = 1; - - if (name.indexOf('[') > -1) - { - // array! - nameSplit = name.split(/\[|]/); - name = nameSplit[0]; - size *= Number(nameSplit[1]); - } - - if (!name.match(maskRegex)) - { - uniforms[name] = { - value: defaultValue(type, size), - name, - type, - }; - } - } - } - - return uniforms; -} diff --git a/packages/core/src/renderers/managers/BlendModeManager.js b/packages/core/src/renderers/managers/BlendModeManager.js deleted file mode 100644 index 7362ae7..0000000 --- a/packages/core/src/renderers/managers/BlendModeManager.js +++ /dev/null @@ -1,45 +0,0 @@ -import WebGLManager from './WebGLManager'; - -/** - * @class - * @memberof PIXI - * @extends PIXI.WebGLManager - */ -export default class BlendModeManager extends WebGLManager -{ - /** - * @param {PIXI.Renderer} renderer - The renderer this manager works for. - */ - constructor(renderer) - { - super(renderer); - - /** - * @member {number} - */ - this.currentBlendMode = 99999; - } - - /** - * Sets-up the given blendMode from WebGL's point of view. - * - * @param {number} blendMode - the blendMode, should be a PixiJS const, such as - * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. - * @return {boolean} Returns if the blend mode was changed. - */ - setBlendMode(blendMode) - { - if (this.currentBlendMode === blendMode) - { - return false; - } - - this.currentBlendMode = blendMode; - - const mode = this.renderer.blendModes[this.currentBlendMode]; - - this.renderer.gl.blendFunc(mode[0], mode[1]); - - return true; - } -} diff --git a/packages/core/src/renderers/systems/geometry/GLBuffer.js b/packages/core/src/renderers/systems/geometry/GLBuffer.js new file mode 100644 index 0000000..0477e8a --- /dev/null +++ b/packages/core/src/renderers/systems/geometry/GLBuffer.js @@ -0,0 +1,9 @@ +export default class GLBuffer +{ + constructor(buffer) + { + this.buffer = buffer; + this.updateID = -1; + this.byteLength = -1; + } +} diff --git a/packages/core/src/renderers/systems/geometry/GeometrySystem.js b/packages/core/src/renderers/systems/geometry/GeometrySystem.js index a972762..d205a6d 100644 --- a/packages/core/src/renderers/systems/geometry/GeometrySystem.js +++ b/packages/core/src/renderers/systems/geometry/GeometrySystem.js @@ -1,17 +1,8 @@ import WebGLSystem from '../WebGLSystem'; +import GLBuffer from './GLBuffer'; const byteSizeMap = { 5126: 4, 5123: 2, 5121: 1 }; -class GLBufferData -{ - constructor(buffer) - { - this.buffer = buffer; - this.updateID = -1; - this.byteLength = -1; - } -} - /** * @class * @extends PIXI.WebGLSystem @@ -269,7 +260,7 @@ if (!buffer._glBuffers[CONTEXT_UID]) { - buffer._glBuffers[CONTEXT_UID] = new GLBufferData(gl.createBuffer()); + buffer._glBuffers[CONTEXT_UID] = new GLBuffer(gl.createBuffer()); } } diff --git a/bundles/pixi.js/src/index.js b/bundles/pixi.js/src/index.js index fb839a0..a879872 100644 --- a/bundles/pixi.js/src/index.js +++ b/bundles/pixi.js/src/index.js @@ -9,7 +9,7 @@ import * as loaders from '@pixi/loaders'; import * as math from '@pixi/math'; import * as mesh from '@pixi/mesh'; -import * as particles from '@pixi/particles'; +// import * as particles from '@pixi/particles'; import * as prepare from '@pixi/prepare'; import * as sprite from '@pixi/sprite'; import * as spriteAnimated from '@pixi/sprite-animated'; @@ -38,7 +38,7 @@ core.Renderer.registerPlugin('graphics', graphics.GraphicsRenderer); core.Renderer.registerPlugin('interaction', interaction.InteractionManager); core.Renderer.registerPlugin('mesh', mesh.MeshRenderer); -core.Renderer.registerPlugin('particle', particles.ParticleRenderer); +// core.Renderer.registerPlugin('particle', particles.ParticleRenderer); core.Renderer.registerPlugin('prepare', prepare.Prepare); core.Renderer.registerPlugin('sprite', sprite.SpriteRenderer); core.Renderer.registerPlugin('tilingSprite', spriteTiling.TilingSpriteRenderer); @@ -120,7 +120,7 @@ loaders, math, mesh, - particles, + // particles, sprite, spriteAnimated, spritesheet, diff --git a/packages/core/package.json b/packages/core/package.json index 30e2e83..7d01377 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -29,7 +29,6 @@ "earcut": "^2.0.7", "eventemitter3": "^2.0.0", "ismobilejs": "^0.4.0", - "pixi-gl-core": "^2.0.0-alpha", "mini-runner": "^1.0.1", "@pixi/math": "^5.0.0-alpha", "@pixi/constants": "^5.0.0-alpha", diff --git a/packages/core/src/index.js b/packages/core/src/index.js index 0951de6..8b8e67c 100644 --- a/packages/core/src/index.js +++ b/packages/core/src/index.js @@ -14,7 +14,6 @@ export { default as WebGLSystem } from './renderers/systems/WebGLSystem'; export { default as State } from './renderers/State'; export { default as ObjectRenderer } from './renderers/utils/ObjectRenderer'; -export { default as RenderTarget } from './renderers/utils/RenderTarget'; export { default as Quad } from './renderers/utils/Quad'; export { default as checkMaxIfStatmentsInShader } from './renderers/utils/checkMaxIfStatmentsInShader'; export { default as Shader } from './shader/Shader'; diff --git a/packages/core/src/renderers/Renderer.js b/packages/core/src/renderers/Renderer.js index 6967107..89ce25f 100644 --- a/packages/core/src/renderers/Renderer.js +++ b/packages/core/src/renderers/Renderer.js @@ -2,7 +2,7 @@ import { sayHello } from '@pixi/utils'; import MaskSystem from './systems/MaskSystem'; import StencilSystem from './systems/StencilSystem'; -import FilterSystem from './systems/FilterSystem'; +// import FilterSystem from './systems/FilterSystem'; import FramebufferSystem from './systems/FramebufferSystem'; import RenderTextureSystem from './systems/RenderTextureSystem'; import TextureSystem from './systems/textures/TextureSystem'; @@ -103,7 +103,7 @@ .addSystem(StencilSystem, 'stencil') .addSystem(ProjectionSystem, 'projection') // .addSystem(TextureGCSystem) - .addSystem(FilterSystem, 'filter') + // .addSystem(FilterSystem, 'filter') .addSystem(RenderTextureSystem, 'renderTexture') .addSystem(BatchSystem, 'batch'); diff --git a/packages/core/src/renderers/filters/Filter.js b/packages/core/src/renderers/filters/Filter.js index 06f1222..2d82c8e 100644 --- a/packages/core/src/renderers/filters/Filter.js +++ b/packages/core/src/renderers/filters/Filter.js @@ -3,7 +3,7 @@ import { BLEND_MODES } from '@pixi/constants'; import { settings } from '@pixi/settings'; import { uid } from '@pixi/utils'; -import extractUniformsFromSrc from './extractUniformsFromSrc'; +// import extractUniformsFromSrc from './extractUniformsFromSrc'; import defaultVertex from './defaultFilter.vert'; import defaultFragment from './defaultFilter.frag'; @@ -28,7 +28,8 @@ this._blendMode = BLEND_MODES.NORMAL; - this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms; + // || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); /** * An object containing the current values of custom uniforms. diff --git a/packages/core/src/renderers/filters/extractUniformsFromSrc.js b/packages/core/src/renderers/filters/extractUniformsFromSrc.js deleted file mode 100644 index 5ec7007..0000000 --- a/packages/core/src/renderers/filters/extractUniformsFromSrc.js +++ /dev/null @@ -1,58 +0,0 @@ -import glCore from 'pixi-gl-core'; - -const defaultValue = glCore.shader.defaultValue; - -export default function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) -{ - const vertUniforms = extractUniformsFromString(vertexSrc, mask); - const fragUniforms = extractUniformsFromString(fragmentSrc, mask); - - return Object.assign(vertUniforms, fragUniforms); -} - -function extractUniformsFromString(string) -{ - const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea|filterClamp)$'); - - const uniforms = {}; - let nameSplit; - - // clean the lines a little - remove extra spaces / tabs etc - // then split along ';' - const lines = string.replace(/\s+/g, ' ') - .split(/\s*;\s*/); - - // loop through.. - for (let i = 0; i < lines.length; i++) - { - const line = lines[i].trim(); - - if (line.indexOf('uniform') > -1) - { - const splitLine = line.split(' '); - const type = splitLine[1]; - - let name = splitLine[2]; - let size = 1; - - if (name.indexOf('[') > -1) - { - // array! - nameSplit = name.split(/\[|]/); - name = nameSplit[0]; - size *= Number(nameSplit[1]); - } - - if (!name.match(maskRegex)) - { - uniforms[name] = { - value: defaultValue(type, size), - name, - type, - }; - } - } - } - - return uniforms; -} diff --git a/packages/core/src/renderers/managers/BlendModeManager.js b/packages/core/src/renderers/managers/BlendModeManager.js deleted file mode 100644 index 7362ae7..0000000 --- a/packages/core/src/renderers/managers/BlendModeManager.js +++ /dev/null @@ -1,45 +0,0 @@ -import WebGLManager from './WebGLManager'; - -/** - * @class - * @memberof PIXI - * @extends PIXI.WebGLManager - */ -export default class BlendModeManager extends WebGLManager -{ - /** - * @param {PIXI.Renderer} renderer - The renderer this manager works for. - */ - constructor(renderer) - { - super(renderer); - - /** - * @member {number} - */ - this.currentBlendMode = 99999; - } - - /** - * Sets-up the given blendMode from WebGL's point of view. - * - * @param {number} blendMode - the blendMode, should be a PixiJS const, such as - * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. - * @return {boolean} Returns if the blend mode was changed. - */ - setBlendMode(blendMode) - { - if (this.currentBlendMode === blendMode) - { - return false; - } - - this.currentBlendMode = blendMode; - - const mode = this.renderer.blendModes[this.currentBlendMode]; - - this.renderer.gl.blendFunc(mode[0], mode[1]); - - return true; - } -} diff --git a/packages/core/src/renderers/systems/geometry/GLBuffer.js b/packages/core/src/renderers/systems/geometry/GLBuffer.js new file mode 100644 index 0000000..0477e8a --- /dev/null +++ b/packages/core/src/renderers/systems/geometry/GLBuffer.js @@ -0,0 +1,9 @@ +export default class GLBuffer +{ + constructor(buffer) + { + this.buffer = buffer; + this.updateID = -1; + this.byteLength = -1; + } +} diff --git a/packages/core/src/renderers/systems/geometry/GeometrySystem.js b/packages/core/src/renderers/systems/geometry/GeometrySystem.js index a972762..d205a6d 100644 --- a/packages/core/src/renderers/systems/geometry/GeometrySystem.js +++ b/packages/core/src/renderers/systems/geometry/GeometrySystem.js @@ -1,17 +1,8 @@ import WebGLSystem from '../WebGLSystem'; +import GLBuffer from './GLBuffer'; const byteSizeMap = { 5126: 4, 5123: 2, 5121: 1 }; -class GLBufferData -{ - constructor(buffer) - { - this.buffer = buffer; - this.updateID = -1; - this.byteLength = -1; - } -} - /** * @class * @extends PIXI.WebGLSystem @@ -269,7 +260,7 @@ if (!buffer._glBuffers[CONTEXT_UID]) { - buffer._glBuffers[CONTEXT_UID] = new GLBufferData(gl.createBuffer()); + buffer._glBuffers[CONTEXT_UID] = new GLBuffer(gl.createBuffer()); } } diff --git a/packages/core/src/renderers/systems/textures/GLTexture.js b/packages/core/src/renderers/systems/textures/GLTexture.js index ceeb379..3f5bf44 100644 --- a/packages/core/src/renderers/systems/textures/GLTexture.js +++ b/packages/core/src/renderers/systems/textures/GLTexture.js @@ -1,75 +1,16 @@ -let FLOATING_POINT_AVAILABLE = false; - -/** - * Helper class to create a WebGL Texture - * - * @class - * @memberof PIXI.glCore - * @param gl {WebGLRenderingContext} The current WebGL context - * @param width {number} the width of the texture - * @param height {number} the height of the texture - * @param format {number} the pixel format of the texture. defaults to gl.RGBA - * @param type {number} the gl type of the texture. defaults to gl.UNSIGNED_BYTE - */ -export default class Texture +export default class GLTexture { - constructor(gl, width, height, format, type) + constructor(texture) { /** - * The current WebGL rendering context - * - * @member {WebGLRenderingContext} - */ - this.gl = gl; - - /** * The WebGL texture * * @member {WebGLTexture} */ - this.texture = gl.createTexture(); + this.texture = texture; - /** - * GL texture is ready for mipmaps - * - * @member {Boolean} - */ - // some settings.. - this.mipmap = false; - - /** - * Set to true to enable pre-multiplied alpha - * - * @member {Boolean} - */ - this.premultiplyAlpha = false; - - /** - * The width of texture - * - * @member {Number} - */ - this.width = width || -1; - /** - * The height of texture - * - * @member {Number} - */ - this.height = height || -1; - - /** - * The pixel format of the texture. defaults to gl.RGBA - * - * @member {Number} - */ - this.format = format || gl.RGBA; - - /** - * The gl type of the texture. defaults to gl.UNSIGNED_BYTE - * - * @member {Number} - */ - this.type = type || gl.UNSIGNED_BYTE; + this.width = -1; + this.height = -1; /** * Texture contents dirty flag @@ -83,156 +24,4 @@ */ this.dirtyStyleId = -1; } - - /** - * Uploads this texture to the GPU - * @param source {HTMLImageElement|ImageData|HTMLVideoElement} the source image of the texture - */ - upload(source) - { - this.bind(); - - const gl = this.gl; - - gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, this.premultiplyAlpha); - - const newWidth = source.videoWidth || source.width; - const newHeight = source.videoHeight || source.height; - - if (newHeight !== this.height || newWidth !== this.width) - { - gl.texImage2D(gl.TEXTURE_2D, 0, this.format, this.format, this.type, source); - } - else - { - gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, this.format, this.type, source); - } - - // if the source is a video, we need to use the videoWidth / videoHeight - // properties as width / height will be incorrect. - this.width = newWidth; - this.height = newHeight; - } - - /** - * Use a data source and uploads this texture to the GPU - * @param data {TypedArray} the data to upload to the texture - * @param width {number} the new width of the texture - * @param height {number} the new height of the texture - */ - uploadData(data, width, height) - { - this.bind(); - - const gl = this.gl; - - if (data instanceof Float32Array) - { - if (!FLOATING_POINT_AVAILABLE) - { - const ext = gl.getExtension('OES_texture_float'); - - if (ext) - { - FLOATING_POINT_AVAILABLE = true; - } - else - { - throw new Error('floating point textures not available'); - } - } - - this.type = gl.FLOAT; - } - else - { - // TODO support for other types - this.type = this.type || gl.UNSIGNED_BYTE; - } - - // what type of data? - gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, this.premultiplyAlpha); - - if (width !== this.width || height !== this.height) - { - gl.texImage2D(gl.TEXTURE_2D, 0, this.format, width, height, 0, this.format, this.type, data || null); - } - else - { - gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, width, height, this.format, this.type, data || null); - } - - this.width = width; - this.height = height; - } - - /** - * Binds the texture - * @param location - */ - bind(location) - { - const gl = this.gl; - - if (location !== undefined) - { - gl.activeTexture(gl.TEXTURE0 + location); - } - - gl.bindTexture(gl.TEXTURE_2D, this.texture); - } - - /** - * Unbinds the texture - */ - unbind() - { - const gl = this.gl; - - gl.bindTexture(gl.TEXTURE_2D, null); - } - - /** - * Destroys this texture - */ - destroy() - { - const gl = this.gl; - // TODO - - gl.deleteTexture(this.texture); - } - - /** - * @static - * @param gl {WebGLRenderingContext} The current WebGL context - * @param source {HTMLImageElement|ImageData} the source image of the texture - * @param premultiplyAlpha {Boolean} If we want to use pre-multiplied alpha - */ - static fromSource(gl, source, premultiplyAlpha) - { - const texture = new Texture(gl); - - texture.premultiplyAlpha = premultiplyAlpha || false; - texture.upload(source); - - return texture; - } - - /** - * @static - * @param gl {WebGLRenderingContext} The current WebGL context - * @param data {TypedArray} the data to upload to the texture - * @param width {number} the new width of the texture - * @param height {number} the new height of the texture - */ - static fromData(gl, data, width, height) - { - // console.log(data, width, height); - const texture = new Texture(gl); - - texture.uploadData(data, width, height); - - return texture; - } } diff --git a/bundles/pixi.js/src/index.js b/bundles/pixi.js/src/index.js index fb839a0..a879872 100644 --- a/bundles/pixi.js/src/index.js +++ b/bundles/pixi.js/src/index.js @@ -9,7 +9,7 @@ import * as loaders from '@pixi/loaders'; import * as math from '@pixi/math'; import * as mesh from '@pixi/mesh'; -import * as particles from '@pixi/particles'; +// import * as particles from '@pixi/particles'; import * as prepare from '@pixi/prepare'; import * as sprite from '@pixi/sprite'; import * as spriteAnimated from '@pixi/sprite-animated'; @@ -38,7 +38,7 @@ core.Renderer.registerPlugin('graphics', graphics.GraphicsRenderer); core.Renderer.registerPlugin('interaction', interaction.InteractionManager); core.Renderer.registerPlugin('mesh', mesh.MeshRenderer); -core.Renderer.registerPlugin('particle', particles.ParticleRenderer); +// core.Renderer.registerPlugin('particle', particles.ParticleRenderer); core.Renderer.registerPlugin('prepare', prepare.Prepare); core.Renderer.registerPlugin('sprite', sprite.SpriteRenderer); core.Renderer.registerPlugin('tilingSprite', spriteTiling.TilingSpriteRenderer); @@ -120,7 +120,7 @@ loaders, math, mesh, - particles, + // particles, sprite, spriteAnimated, spritesheet, diff --git a/packages/core/package.json b/packages/core/package.json index 30e2e83..7d01377 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -29,7 +29,6 @@ "earcut": "^2.0.7", "eventemitter3": "^2.0.0", "ismobilejs": "^0.4.0", - "pixi-gl-core": "^2.0.0-alpha", "mini-runner": "^1.0.1", "@pixi/math": "^5.0.0-alpha", "@pixi/constants": "^5.0.0-alpha", diff --git a/packages/core/src/index.js b/packages/core/src/index.js index 0951de6..8b8e67c 100644 --- a/packages/core/src/index.js +++ b/packages/core/src/index.js @@ -14,7 +14,6 @@ export { default as WebGLSystem } from './renderers/systems/WebGLSystem'; export { default as State } from './renderers/State'; export { default as ObjectRenderer } from './renderers/utils/ObjectRenderer'; -export { default as RenderTarget } from './renderers/utils/RenderTarget'; export { default as Quad } from './renderers/utils/Quad'; export { default as checkMaxIfStatmentsInShader } from './renderers/utils/checkMaxIfStatmentsInShader'; export { default as Shader } from './shader/Shader'; diff --git a/packages/core/src/renderers/Renderer.js b/packages/core/src/renderers/Renderer.js index 6967107..89ce25f 100644 --- a/packages/core/src/renderers/Renderer.js +++ b/packages/core/src/renderers/Renderer.js @@ -2,7 +2,7 @@ import { sayHello } from '@pixi/utils'; import MaskSystem from './systems/MaskSystem'; import StencilSystem from './systems/StencilSystem'; -import FilterSystem from './systems/FilterSystem'; +// import FilterSystem from './systems/FilterSystem'; import FramebufferSystem from './systems/FramebufferSystem'; import RenderTextureSystem from './systems/RenderTextureSystem'; import TextureSystem from './systems/textures/TextureSystem'; @@ -103,7 +103,7 @@ .addSystem(StencilSystem, 'stencil') .addSystem(ProjectionSystem, 'projection') // .addSystem(TextureGCSystem) - .addSystem(FilterSystem, 'filter') + // .addSystem(FilterSystem, 'filter') .addSystem(RenderTextureSystem, 'renderTexture') .addSystem(BatchSystem, 'batch'); diff --git a/packages/core/src/renderers/filters/Filter.js b/packages/core/src/renderers/filters/Filter.js index 06f1222..2d82c8e 100644 --- a/packages/core/src/renderers/filters/Filter.js +++ b/packages/core/src/renderers/filters/Filter.js @@ -3,7 +3,7 @@ import { BLEND_MODES } from '@pixi/constants'; import { settings } from '@pixi/settings'; import { uid } from '@pixi/utils'; -import extractUniformsFromSrc from './extractUniformsFromSrc'; +// import extractUniformsFromSrc from './extractUniformsFromSrc'; import defaultVertex from './defaultFilter.vert'; import defaultFragment from './defaultFilter.frag'; @@ -28,7 +28,8 @@ this._blendMode = BLEND_MODES.NORMAL; - this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms; + // || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); /** * An object containing the current values of custom uniforms. diff --git a/packages/core/src/renderers/filters/extractUniformsFromSrc.js b/packages/core/src/renderers/filters/extractUniformsFromSrc.js deleted file mode 100644 index 5ec7007..0000000 --- a/packages/core/src/renderers/filters/extractUniformsFromSrc.js +++ /dev/null @@ -1,58 +0,0 @@ -import glCore from 'pixi-gl-core'; - -const defaultValue = glCore.shader.defaultValue; - -export default function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) -{ - const vertUniforms = extractUniformsFromString(vertexSrc, mask); - const fragUniforms = extractUniformsFromString(fragmentSrc, mask); - - return Object.assign(vertUniforms, fragUniforms); -} - -function extractUniformsFromString(string) -{ - const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea|filterClamp)$'); - - const uniforms = {}; - let nameSplit; - - // clean the lines a little - remove extra spaces / tabs etc - // then split along ';' - const lines = string.replace(/\s+/g, ' ') - .split(/\s*;\s*/); - - // loop through.. - for (let i = 0; i < lines.length; i++) - { - const line = lines[i].trim(); - - if (line.indexOf('uniform') > -1) - { - const splitLine = line.split(' '); - const type = splitLine[1]; - - let name = splitLine[2]; - let size = 1; - - if (name.indexOf('[') > -1) - { - // array! - nameSplit = name.split(/\[|]/); - name = nameSplit[0]; - size *= Number(nameSplit[1]); - } - - if (!name.match(maskRegex)) - { - uniforms[name] = { - value: defaultValue(type, size), - name, - type, - }; - } - } - } - - return uniforms; -} diff --git a/packages/core/src/renderers/managers/BlendModeManager.js b/packages/core/src/renderers/managers/BlendModeManager.js deleted file mode 100644 index 7362ae7..0000000 --- a/packages/core/src/renderers/managers/BlendModeManager.js +++ /dev/null @@ -1,45 +0,0 @@ -import WebGLManager from './WebGLManager'; - -/** - * @class - * @memberof PIXI - * @extends PIXI.WebGLManager - */ -export default class BlendModeManager extends WebGLManager -{ - /** - * @param {PIXI.Renderer} renderer - The renderer this manager works for. - */ - constructor(renderer) - { - super(renderer); - - /** - * @member {number} - */ - this.currentBlendMode = 99999; - } - - /** - * Sets-up the given blendMode from WebGL's point of view. - * - * @param {number} blendMode - the blendMode, should be a PixiJS const, such as - * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. - * @return {boolean} Returns if the blend mode was changed. - */ - setBlendMode(blendMode) - { - if (this.currentBlendMode === blendMode) - { - return false; - } - - this.currentBlendMode = blendMode; - - const mode = this.renderer.blendModes[this.currentBlendMode]; - - this.renderer.gl.blendFunc(mode[0], mode[1]); - - return true; - } -} diff --git a/packages/core/src/renderers/systems/geometry/GLBuffer.js b/packages/core/src/renderers/systems/geometry/GLBuffer.js new file mode 100644 index 0000000..0477e8a --- /dev/null +++ b/packages/core/src/renderers/systems/geometry/GLBuffer.js @@ -0,0 +1,9 @@ +export default class GLBuffer +{ + constructor(buffer) + { + this.buffer = buffer; + this.updateID = -1; + this.byteLength = -1; + } +} diff --git a/packages/core/src/renderers/systems/geometry/GeometrySystem.js b/packages/core/src/renderers/systems/geometry/GeometrySystem.js index a972762..d205a6d 100644 --- a/packages/core/src/renderers/systems/geometry/GeometrySystem.js +++ b/packages/core/src/renderers/systems/geometry/GeometrySystem.js @@ -1,17 +1,8 @@ import WebGLSystem from '../WebGLSystem'; +import GLBuffer from './GLBuffer'; const byteSizeMap = { 5126: 4, 5123: 2, 5121: 1 }; -class GLBufferData -{ - constructor(buffer) - { - this.buffer = buffer; - this.updateID = -1; - this.byteLength = -1; - } -} - /** * @class * @extends PIXI.WebGLSystem @@ -269,7 +260,7 @@ if (!buffer._glBuffers[CONTEXT_UID]) { - buffer._glBuffers[CONTEXT_UID] = new GLBufferData(gl.createBuffer()); + buffer._glBuffers[CONTEXT_UID] = new GLBuffer(gl.createBuffer()); } } diff --git a/packages/core/src/renderers/systems/textures/GLTexture.js b/packages/core/src/renderers/systems/textures/GLTexture.js index ceeb379..3f5bf44 100644 --- a/packages/core/src/renderers/systems/textures/GLTexture.js +++ b/packages/core/src/renderers/systems/textures/GLTexture.js @@ -1,75 +1,16 @@ -let FLOATING_POINT_AVAILABLE = false; - -/** - * Helper class to create a WebGL Texture - * - * @class - * @memberof PIXI.glCore - * @param gl {WebGLRenderingContext} The current WebGL context - * @param width {number} the width of the texture - * @param height {number} the height of the texture - * @param format {number} the pixel format of the texture. defaults to gl.RGBA - * @param type {number} the gl type of the texture. defaults to gl.UNSIGNED_BYTE - */ -export default class Texture +export default class GLTexture { - constructor(gl, width, height, format, type) + constructor(texture) { /** - * The current WebGL rendering context - * - * @member {WebGLRenderingContext} - */ - this.gl = gl; - - /** * The WebGL texture * * @member {WebGLTexture} */ - this.texture = gl.createTexture(); + this.texture = texture; - /** - * GL texture is ready for mipmaps - * - * @member {Boolean} - */ - // some settings.. - this.mipmap = false; - - /** - * Set to true to enable pre-multiplied alpha - * - * @member {Boolean} - */ - this.premultiplyAlpha = false; - - /** - * The width of texture - * - * @member {Number} - */ - this.width = width || -1; - /** - * The height of texture - * - * @member {Number} - */ - this.height = height || -1; - - /** - * The pixel format of the texture. defaults to gl.RGBA - * - * @member {Number} - */ - this.format = format || gl.RGBA; - - /** - * The gl type of the texture. defaults to gl.UNSIGNED_BYTE - * - * @member {Number} - */ - this.type = type || gl.UNSIGNED_BYTE; + this.width = -1; + this.height = -1; /** * Texture contents dirty flag @@ -83,156 +24,4 @@ */ this.dirtyStyleId = -1; } - - /** - * Uploads this texture to the GPU - * @param source {HTMLImageElement|ImageData|HTMLVideoElement} the source image of the texture - */ - upload(source) - { - this.bind(); - - const gl = this.gl; - - gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, this.premultiplyAlpha); - - const newWidth = source.videoWidth || source.width; - const newHeight = source.videoHeight || source.height; - - if (newHeight !== this.height || newWidth !== this.width) - { - gl.texImage2D(gl.TEXTURE_2D, 0, this.format, this.format, this.type, source); - } - else - { - gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, this.format, this.type, source); - } - - // if the source is a video, we need to use the videoWidth / videoHeight - // properties as width / height will be incorrect. - this.width = newWidth; - this.height = newHeight; - } - - /** - * Use a data source and uploads this texture to the GPU - * @param data {TypedArray} the data to upload to the texture - * @param width {number} the new width of the texture - * @param height {number} the new height of the texture - */ - uploadData(data, width, height) - { - this.bind(); - - const gl = this.gl; - - if (data instanceof Float32Array) - { - if (!FLOATING_POINT_AVAILABLE) - { - const ext = gl.getExtension('OES_texture_float'); - - if (ext) - { - FLOATING_POINT_AVAILABLE = true; - } - else - { - throw new Error('floating point textures not available'); - } - } - - this.type = gl.FLOAT; - } - else - { - // TODO support for other types - this.type = this.type || gl.UNSIGNED_BYTE; - } - - // what type of data? - gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, this.premultiplyAlpha); - - if (width !== this.width || height !== this.height) - { - gl.texImage2D(gl.TEXTURE_2D, 0, this.format, width, height, 0, this.format, this.type, data || null); - } - else - { - gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, width, height, this.format, this.type, data || null); - } - - this.width = width; - this.height = height; - } - - /** - * Binds the texture - * @param location - */ - bind(location) - { - const gl = this.gl; - - if (location !== undefined) - { - gl.activeTexture(gl.TEXTURE0 + location); - } - - gl.bindTexture(gl.TEXTURE_2D, this.texture); - } - - /** - * Unbinds the texture - */ - unbind() - { - const gl = this.gl; - - gl.bindTexture(gl.TEXTURE_2D, null); - } - - /** - * Destroys this texture - */ - destroy() - { - const gl = this.gl; - // TODO - - gl.deleteTexture(this.texture); - } - - /** - * @static - * @param gl {WebGLRenderingContext} The current WebGL context - * @param source {HTMLImageElement|ImageData} the source image of the texture - * @param premultiplyAlpha {Boolean} If we want to use pre-multiplied alpha - */ - static fromSource(gl, source, premultiplyAlpha) - { - const texture = new Texture(gl); - - texture.premultiplyAlpha = premultiplyAlpha || false; - texture.upload(source); - - return texture; - } - - /** - * @static - * @param gl {WebGLRenderingContext} The current WebGL context - * @param data {TypedArray} the data to upload to the texture - * @param width {number} the new width of the texture - * @param height {number} the new height of the texture - */ - static fromData(gl, data, width, height) - { - // console.log(data, width, height); - const texture = new Texture(gl); - - texture.uploadData(data, width, height); - - return texture; - } } diff --git a/packages/core/src/renderers/systems/textures/TextureSystem.js b/packages/core/src/renderers/systems/textures/TextureSystem.js index b000db2..5c159e2 100644 --- a/packages/core/src/renderers/systems/textures/TextureSystem.js +++ b/packages/core/src/renderers/systems/textures/TextureSystem.js @@ -56,8 +56,13 @@ // TODO move this.. to a nice make empty textures class.. this.emptyTextures = {}; - this.emptyTextures[gl.TEXTURE_2D] = new GLTexture.fromData(this.gl, null, 1, 1); - this.emptyTextures[gl.TEXTURE_CUBE_MAP] = new GLTexture(this.gl); + const emptyTexture2D = new GLTexture(gl.createTexture()); + + gl.bindTexture(gl.TEXTURE_2D, emptyTexture2D.texture); + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array(4)); + + this.emptyTextures[gl.TEXTURE_2D] = emptyTexture2D; + this.emptyTextures[gl.TEXTURE_CUBE_MAP] = new GLTexture(gl.createTexture()); gl.bindTexture(gl.TEXTURE_CUBE_MAP, this.emptyTextures[gl.TEXTURE_CUBE_MAP].texture); @@ -136,9 +141,8 @@ initTexture(texture) { - const glTexture = new GLTexture(this.gl, -1, -1, texture.format, texture.type); + const glTexture = new GLTexture(this.gl.createTexture()); - glTexture.premultiplyAlpha = texture.premultiplyAlpha; // guarentee an update.. glTexture.dirtyId = -1; @@ -188,7 +192,7 @@ { this.unbind(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + texture._glTextures[this.renderer.CONTEXT_UID].texture.destroy(); texture.off('dispose', this.destroyTexture, this); delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -209,7 +213,6 @@ { const glTexture = texture._glTextures[this.CONTEXT_UID]; - glTexture.mipmap = texture.mipmap && texture.isPowerOfTwo; if (!glTexture) { return; @@ -223,14 +226,15 @@ { this.setStyle(texture, glTexture); } + glTexture.dirtyStyleId = texture.dirtyStyleId; } - setStyle(texture, glTexture) + setStyle(texture) { const gl = this.gl; - if (glTexture.mipmap) + if (texture.mipmap && texture.isPowerOfTwo) { gl.generateMipmap(texture.target); } @@ -238,7 +242,7 @@ gl.texParameteri(texture.target, gl.TEXTURE_WRAP_S, texture.wrapMode); gl.texParameteri(texture.target, gl.TEXTURE_WRAP_T, texture.wrapMode); - if (glTexture.mipmap) + if (texture.mipmap) { /* eslint-disable max-len */ gl.texParameteri(texture.target, gl.TEXTURE_MIN_FILTER, texture.scaleMode ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); diff --git a/bundles/pixi.js/src/index.js b/bundles/pixi.js/src/index.js index fb839a0..a879872 100644 --- a/bundles/pixi.js/src/index.js +++ b/bundles/pixi.js/src/index.js @@ -9,7 +9,7 @@ import * as loaders from '@pixi/loaders'; import * as math from '@pixi/math'; import * as mesh from '@pixi/mesh'; -import * as particles from '@pixi/particles'; +// import * as particles from '@pixi/particles'; import * as prepare from '@pixi/prepare'; import * as sprite from '@pixi/sprite'; import * as spriteAnimated from '@pixi/sprite-animated'; @@ -38,7 +38,7 @@ core.Renderer.registerPlugin('graphics', graphics.GraphicsRenderer); core.Renderer.registerPlugin('interaction', interaction.InteractionManager); core.Renderer.registerPlugin('mesh', mesh.MeshRenderer); -core.Renderer.registerPlugin('particle', particles.ParticleRenderer); +// core.Renderer.registerPlugin('particle', particles.ParticleRenderer); core.Renderer.registerPlugin('prepare', prepare.Prepare); core.Renderer.registerPlugin('sprite', sprite.SpriteRenderer); core.Renderer.registerPlugin('tilingSprite', spriteTiling.TilingSpriteRenderer); @@ -120,7 +120,7 @@ loaders, math, mesh, - particles, + // particles, sprite, spriteAnimated, spritesheet, diff --git a/packages/core/package.json b/packages/core/package.json index 30e2e83..7d01377 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -29,7 +29,6 @@ "earcut": "^2.0.7", "eventemitter3": "^2.0.0", "ismobilejs": "^0.4.0", - "pixi-gl-core": "^2.0.0-alpha", "mini-runner": "^1.0.1", "@pixi/math": "^5.0.0-alpha", "@pixi/constants": "^5.0.0-alpha", diff --git a/packages/core/src/index.js b/packages/core/src/index.js index 0951de6..8b8e67c 100644 --- a/packages/core/src/index.js +++ b/packages/core/src/index.js @@ -14,7 +14,6 @@ export { default as WebGLSystem } from './renderers/systems/WebGLSystem'; export { default as State } from './renderers/State'; export { default as ObjectRenderer } from './renderers/utils/ObjectRenderer'; -export { default as RenderTarget } from './renderers/utils/RenderTarget'; export { default as Quad } from './renderers/utils/Quad'; export { default as checkMaxIfStatmentsInShader } from './renderers/utils/checkMaxIfStatmentsInShader'; export { default as Shader } from './shader/Shader'; diff --git a/packages/core/src/renderers/Renderer.js b/packages/core/src/renderers/Renderer.js index 6967107..89ce25f 100644 --- a/packages/core/src/renderers/Renderer.js +++ b/packages/core/src/renderers/Renderer.js @@ -2,7 +2,7 @@ import { sayHello } from '@pixi/utils'; import MaskSystem from './systems/MaskSystem'; import StencilSystem from './systems/StencilSystem'; -import FilterSystem from './systems/FilterSystem'; +// import FilterSystem from './systems/FilterSystem'; import FramebufferSystem from './systems/FramebufferSystem'; import RenderTextureSystem from './systems/RenderTextureSystem'; import TextureSystem from './systems/textures/TextureSystem'; @@ -103,7 +103,7 @@ .addSystem(StencilSystem, 'stencil') .addSystem(ProjectionSystem, 'projection') // .addSystem(TextureGCSystem) - .addSystem(FilterSystem, 'filter') + // .addSystem(FilterSystem, 'filter') .addSystem(RenderTextureSystem, 'renderTexture') .addSystem(BatchSystem, 'batch'); diff --git a/packages/core/src/renderers/filters/Filter.js b/packages/core/src/renderers/filters/Filter.js index 06f1222..2d82c8e 100644 --- a/packages/core/src/renderers/filters/Filter.js +++ b/packages/core/src/renderers/filters/Filter.js @@ -3,7 +3,7 @@ import { BLEND_MODES } from '@pixi/constants'; import { settings } from '@pixi/settings'; import { uid } from '@pixi/utils'; -import extractUniformsFromSrc from './extractUniformsFromSrc'; +// import extractUniformsFromSrc from './extractUniformsFromSrc'; import defaultVertex from './defaultFilter.vert'; import defaultFragment from './defaultFilter.frag'; @@ -28,7 +28,8 @@ this._blendMode = BLEND_MODES.NORMAL; - this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms; + // || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); /** * An object containing the current values of custom uniforms. diff --git a/packages/core/src/renderers/filters/extractUniformsFromSrc.js b/packages/core/src/renderers/filters/extractUniformsFromSrc.js deleted file mode 100644 index 5ec7007..0000000 --- a/packages/core/src/renderers/filters/extractUniformsFromSrc.js +++ /dev/null @@ -1,58 +0,0 @@ -import glCore from 'pixi-gl-core'; - -const defaultValue = glCore.shader.defaultValue; - -export default function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) -{ - const vertUniforms = extractUniformsFromString(vertexSrc, mask); - const fragUniforms = extractUniformsFromString(fragmentSrc, mask); - - return Object.assign(vertUniforms, fragUniforms); -} - -function extractUniformsFromString(string) -{ - const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea|filterClamp)$'); - - const uniforms = {}; - let nameSplit; - - // clean the lines a little - remove extra spaces / tabs etc - // then split along ';' - const lines = string.replace(/\s+/g, ' ') - .split(/\s*;\s*/); - - // loop through.. - for (let i = 0; i < lines.length; i++) - { - const line = lines[i].trim(); - - if (line.indexOf('uniform') > -1) - { - const splitLine = line.split(' '); - const type = splitLine[1]; - - let name = splitLine[2]; - let size = 1; - - if (name.indexOf('[') > -1) - { - // array! - nameSplit = name.split(/\[|]/); - name = nameSplit[0]; - size *= Number(nameSplit[1]); - } - - if (!name.match(maskRegex)) - { - uniforms[name] = { - value: defaultValue(type, size), - name, - type, - }; - } - } - } - - return uniforms; -} diff --git a/packages/core/src/renderers/managers/BlendModeManager.js b/packages/core/src/renderers/managers/BlendModeManager.js deleted file mode 100644 index 7362ae7..0000000 --- a/packages/core/src/renderers/managers/BlendModeManager.js +++ /dev/null @@ -1,45 +0,0 @@ -import WebGLManager from './WebGLManager'; - -/** - * @class - * @memberof PIXI - * @extends PIXI.WebGLManager - */ -export default class BlendModeManager extends WebGLManager -{ - /** - * @param {PIXI.Renderer} renderer - The renderer this manager works for. - */ - constructor(renderer) - { - super(renderer); - - /** - * @member {number} - */ - this.currentBlendMode = 99999; - } - - /** - * Sets-up the given blendMode from WebGL's point of view. - * - * @param {number} blendMode - the blendMode, should be a PixiJS const, such as - * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. - * @return {boolean} Returns if the blend mode was changed. - */ - setBlendMode(blendMode) - { - if (this.currentBlendMode === blendMode) - { - return false; - } - - this.currentBlendMode = blendMode; - - const mode = this.renderer.blendModes[this.currentBlendMode]; - - this.renderer.gl.blendFunc(mode[0], mode[1]); - - return true; - } -} diff --git a/packages/core/src/renderers/systems/geometry/GLBuffer.js b/packages/core/src/renderers/systems/geometry/GLBuffer.js new file mode 100644 index 0000000..0477e8a --- /dev/null +++ b/packages/core/src/renderers/systems/geometry/GLBuffer.js @@ -0,0 +1,9 @@ +export default class GLBuffer +{ + constructor(buffer) + { + this.buffer = buffer; + this.updateID = -1; + this.byteLength = -1; + } +} diff --git a/packages/core/src/renderers/systems/geometry/GeometrySystem.js b/packages/core/src/renderers/systems/geometry/GeometrySystem.js index a972762..d205a6d 100644 --- a/packages/core/src/renderers/systems/geometry/GeometrySystem.js +++ b/packages/core/src/renderers/systems/geometry/GeometrySystem.js @@ -1,17 +1,8 @@ import WebGLSystem from '../WebGLSystem'; +import GLBuffer from './GLBuffer'; const byteSizeMap = { 5126: 4, 5123: 2, 5121: 1 }; -class GLBufferData -{ - constructor(buffer) - { - this.buffer = buffer; - this.updateID = -1; - this.byteLength = -1; - } -} - /** * @class * @extends PIXI.WebGLSystem @@ -269,7 +260,7 @@ if (!buffer._glBuffers[CONTEXT_UID]) { - buffer._glBuffers[CONTEXT_UID] = new GLBufferData(gl.createBuffer()); + buffer._glBuffers[CONTEXT_UID] = new GLBuffer(gl.createBuffer()); } } diff --git a/packages/core/src/renderers/systems/textures/GLTexture.js b/packages/core/src/renderers/systems/textures/GLTexture.js index ceeb379..3f5bf44 100644 --- a/packages/core/src/renderers/systems/textures/GLTexture.js +++ b/packages/core/src/renderers/systems/textures/GLTexture.js @@ -1,75 +1,16 @@ -let FLOATING_POINT_AVAILABLE = false; - -/** - * Helper class to create a WebGL Texture - * - * @class - * @memberof PIXI.glCore - * @param gl {WebGLRenderingContext} The current WebGL context - * @param width {number} the width of the texture - * @param height {number} the height of the texture - * @param format {number} the pixel format of the texture. defaults to gl.RGBA - * @param type {number} the gl type of the texture. defaults to gl.UNSIGNED_BYTE - */ -export default class Texture +export default class GLTexture { - constructor(gl, width, height, format, type) + constructor(texture) { /** - * The current WebGL rendering context - * - * @member {WebGLRenderingContext} - */ - this.gl = gl; - - /** * The WebGL texture * * @member {WebGLTexture} */ - this.texture = gl.createTexture(); + this.texture = texture; - /** - * GL texture is ready for mipmaps - * - * @member {Boolean} - */ - // some settings.. - this.mipmap = false; - - /** - * Set to true to enable pre-multiplied alpha - * - * @member {Boolean} - */ - this.premultiplyAlpha = false; - - /** - * The width of texture - * - * @member {Number} - */ - this.width = width || -1; - /** - * The height of texture - * - * @member {Number} - */ - this.height = height || -1; - - /** - * The pixel format of the texture. defaults to gl.RGBA - * - * @member {Number} - */ - this.format = format || gl.RGBA; - - /** - * The gl type of the texture. defaults to gl.UNSIGNED_BYTE - * - * @member {Number} - */ - this.type = type || gl.UNSIGNED_BYTE; + this.width = -1; + this.height = -1; /** * Texture contents dirty flag @@ -83,156 +24,4 @@ */ this.dirtyStyleId = -1; } - - /** - * Uploads this texture to the GPU - * @param source {HTMLImageElement|ImageData|HTMLVideoElement} the source image of the texture - */ - upload(source) - { - this.bind(); - - const gl = this.gl; - - gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, this.premultiplyAlpha); - - const newWidth = source.videoWidth || source.width; - const newHeight = source.videoHeight || source.height; - - if (newHeight !== this.height || newWidth !== this.width) - { - gl.texImage2D(gl.TEXTURE_2D, 0, this.format, this.format, this.type, source); - } - else - { - gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, this.format, this.type, source); - } - - // if the source is a video, we need to use the videoWidth / videoHeight - // properties as width / height will be incorrect. - this.width = newWidth; - this.height = newHeight; - } - - /** - * Use a data source and uploads this texture to the GPU - * @param data {TypedArray} the data to upload to the texture - * @param width {number} the new width of the texture - * @param height {number} the new height of the texture - */ - uploadData(data, width, height) - { - this.bind(); - - const gl = this.gl; - - if (data instanceof Float32Array) - { - if (!FLOATING_POINT_AVAILABLE) - { - const ext = gl.getExtension('OES_texture_float'); - - if (ext) - { - FLOATING_POINT_AVAILABLE = true; - } - else - { - throw new Error('floating point textures not available'); - } - } - - this.type = gl.FLOAT; - } - else - { - // TODO support for other types - this.type = this.type || gl.UNSIGNED_BYTE; - } - - // what type of data? - gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, this.premultiplyAlpha); - - if (width !== this.width || height !== this.height) - { - gl.texImage2D(gl.TEXTURE_2D, 0, this.format, width, height, 0, this.format, this.type, data || null); - } - else - { - gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, width, height, this.format, this.type, data || null); - } - - this.width = width; - this.height = height; - } - - /** - * Binds the texture - * @param location - */ - bind(location) - { - const gl = this.gl; - - if (location !== undefined) - { - gl.activeTexture(gl.TEXTURE0 + location); - } - - gl.bindTexture(gl.TEXTURE_2D, this.texture); - } - - /** - * Unbinds the texture - */ - unbind() - { - const gl = this.gl; - - gl.bindTexture(gl.TEXTURE_2D, null); - } - - /** - * Destroys this texture - */ - destroy() - { - const gl = this.gl; - // TODO - - gl.deleteTexture(this.texture); - } - - /** - * @static - * @param gl {WebGLRenderingContext} The current WebGL context - * @param source {HTMLImageElement|ImageData} the source image of the texture - * @param premultiplyAlpha {Boolean} If we want to use pre-multiplied alpha - */ - static fromSource(gl, source, premultiplyAlpha) - { - const texture = new Texture(gl); - - texture.premultiplyAlpha = premultiplyAlpha || false; - texture.upload(source); - - return texture; - } - - /** - * @static - * @param gl {WebGLRenderingContext} The current WebGL context - * @param data {TypedArray} the data to upload to the texture - * @param width {number} the new width of the texture - * @param height {number} the new height of the texture - */ - static fromData(gl, data, width, height) - { - // console.log(data, width, height); - const texture = new Texture(gl); - - texture.uploadData(data, width, height); - - return texture; - } } diff --git a/packages/core/src/renderers/systems/textures/TextureSystem.js b/packages/core/src/renderers/systems/textures/TextureSystem.js index b000db2..5c159e2 100644 --- a/packages/core/src/renderers/systems/textures/TextureSystem.js +++ b/packages/core/src/renderers/systems/textures/TextureSystem.js @@ -56,8 +56,13 @@ // TODO move this.. to a nice make empty textures class.. this.emptyTextures = {}; - this.emptyTextures[gl.TEXTURE_2D] = new GLTexture.fromData(this.gl, null, 1, 1); - this.emptyTextures[gl.TEXTURE_CUBE_MAP] = new GLTexture(this.gl); + const emptyTexture2D = new GLTexture(gl.createTexture()); + + gl.bindTexture(gl.TEXTURE_2D, emptyTexture2D.texture); + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array(4)); + + this.emptyTextures[gl.TEXTURE_2D] = emptyTexture2D; + this.emptyTextures[gl.TEXTURE_CUBE_MAP] = new GLTexture(gl.createTexture()); gl.bindTexture(gl.TEXTURE_CUBE_MAP, this.emptyTextures[gl.TEXTURE_CUBE_MAP].texture); @@ -136,9 +141,8 @@ initTexture(texture) { - const glTexture = new GLTexture(this.gl, -1, -1, texture.format, texture.type); + const glTexture = new GLTexture(this.gl.createTexture()); - glTexture.premultiplyAlpha = texture.premultiplyAlpha; // guarentee an update.. glTexture.dirtyId = -1; @@ -188,7 +192,7 @@ { this.unbind(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + texture._glTextures[this.renderer.CONTEXT_UID].texture.destroy(); texture.off('dispose', this.destroyTexture, this); delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -209,7 +213,6 @@ { const glTexture = texture._glTextures[this.CONTEXT_UID]; - glTexture.mipmap = texture.mipmap && texture.isPowerOfTwo; if (!glTexture) { return; @@ -223,14 +226,15 @@ { this.setStyle(texture, glTexture); } + glTexture.dirtyStyleId = texture.dirtyStyleId; } - setStyle(texture, glTexture) + setStyle(texture) { const gl = this.gl; - if (glTexture.mipmap) + if (texture.mipmap && texture.isPowerOfTwo) { gl.generateMipmap(texture.target); } @@ -238,7 +242,7 @@ gl.texParameteri(texture.target, gl.TEXTURE_WRAP_S, texture.wrapMode); gl.texParameteri(texture.target, gl.TEXTURE_WRAP_T, texture.wrapMode); - if (glTexture.mipmap) + if (texture.mipmap) { /* eslint-disable max-len */ gl.texParameteri(texture.target, gl.TEXTURE_MIN_FILTER, texture.scaleMode ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); diff --git a/packages/core/src/renderers/utils/RenderTarget.js b/packages/core/src/renderers/utils/RenderTarget.js deleted file mode 100644 index 3f129ed..0000000 --- a/packages/core/src/renderers/utils/RenderTarget.js +++ /dev/null @@ -1,326 +0,0 @@ -import { Rectangle, Matrix } from '@pixi/math'; -import { SCALE_MODES } from '@pixi/constants'; -import { settings } from '@pixi/settings'; -import { GLFramebuffer } from 'pixi-gl-core'; - -/** - * @class - * @memberof PIXI - */ -export default class RenderTarget -{ - /** - * @param {WebGLRenderingContext} gl - The current WebGL drawing context - * @param {number} [width=0] - the horizontal range of the filter - * @param {number} [height=0] - the vertical range of the filter - * @param {number} [scaleMode=PIXI.settings.SCALE_MODE] - See {@link PIXI.SCALE_MODES} for possible values - * @param {number} [resolution=1] - The current resolution / device pixel ratio - * @param {boolean} [root=false] - Whether this object is the root element or not - */ - constructor(gl, width, height, scaleMode, resolution, root) - { - // TODO Resolution could go here ( eg low res blurs ) - - /** - * The current WebGL drawing context. - * - * @member {WebGLRenderingContext} - */ - this.gl = gl; - - // next time to create a frame buffer and texture - - /** - * A frame buffer - * - * @member {PIXI.glCore.GLFramebuffer} - */ - this.frameBuffer = null; - - /** - * The texture - * - * @member {PIXI.glCore.GLTexture} - */ - this.texture = null; - - /** - * The background colour of this render target, as an array of [r,g,b,a] values - * - * @member {number[]} - */ - this.clearColor = [0, 0, 0, 0]; - - /** - * The size of the object as a rectangle - * - * @member {PIXI.Rectangle} - */ - this.size = new Rectangle(0, 0, 1, 1); - - /** - * The current resolution / device pixel ratio - * - * @member {number} - * @default 1 - */ - this.resolution = resolution || settings.RESOLUTION; - - /** - * The projection matrix - * - * @member {PIXI.Matrix} - */ - this.projectionMatrix = new Matrix(); - - /** - * The object's transform - * - * @member {PIXI.Matrix} - */ - this.transform = null; - - /** - * The frame. - * - * @member {PIXI.Rectangle} - */ - this.frame = null; - - /** - * The stencil buffer stores masking data for the render target - * - * @member {glCore.GLBuffer} - */ - this.defaultFrame = new Rectangle(); - this.destinationFrame = null; - this.sourceFrame = null; - - /** - * The stencil buffer stores masking data for the render target - * - * @member {glCore.GLBuffer} - */ - this.stencilBuffer = null; - - /** - * The data structure for the stencil masks - * - * @member {PIXI.Graphics[]} - */ - this.stencilMaskStack = []; - - /** - * Stores filter data for the render target - * - * @member {object[]} - */ - this.filterData = null; - - /** - * The scale mode. - * - * @member {number} - * @default PIXI.settings.SCALE_MODE - * @see PIXI.SCALE_MODES - */ - this.scaleMode = scaleMode !== undefined ? scaleMode : settings.SCALE_MODE; - - /** - * Whether this object is the root element or not - * - * @member {boolean} - */ - this.root = root; - - if (!this.root) - { - this.frameBuffer = GLFramebuffer.createRGBA(gl, 100, 100); - - if (this.scaleMode === SCALE_MODES.NEAREST) - { - this.frameBuffer.texture.enableNearestScaling(); - } - else - { - this.frameBuffer.texture.enableLinearScaling(); - } - /* - A frame buffer needs a target to render to.. - create a texture and bind it attach it to the framebuffer.. - */ - - // this is used by the base texture - this.texture = this.frameBuffer.texture; - } - else - { - // make it a null framebuffer.. - this.frameBuffer = new GLFramebuffer(gl, 100, 100); - this.frameBuffer.framebuffer = null; - } - - this.setFrame(); - - this.resize(width, height); - } - - /** - * Clears the filter texture. - * - * @param {number[]} [clearColor=this.clearColor] - Array of [r,g,b,a] to clear the framebuffer - */ - clear(clearColor) - { - const cc = clearColor || this.clearColor; - - this.frameBuffer.clear(cc[0], cc[1], cc[2], cc[3]);// r,g,b,a); - } - - /** - * Binds the stencil buffer. - * - */ - attachStencilBuffer() - { - // TODO check if stencil is done? - /** - * The stencil buffer is used for masking in pixi - * lets create one and then add attach it to the framebuffer.. - */ - if (!this.root) - { - this.frameBuffer.enableStencil(); - } - } - - /** - * Sets the frame of the render target. - * - * @param {Rectangle} destinationFrame - The destination frame. - * @param {Rectangle} sourceFrame - The source frame. - */ - setFrame(destinationFrame, sourceFrame) - { - this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; - } - - /** - * Binds the buffers and initialises the viewport. - * - */ - activate() - { - // TOOD refactor usage of frame.. - const gl = this.gl; - - // make sure the texture is unbound! - this.frameBuffer.bind(); - - this.calculateProjection(this.destinationFrame, this.sourceFrame); - - if (this.transform) - { - this.projectionMatrix.append(this.transform); - } - - // TODO add a check as them may be the same! - if (this.destinationFrame !== this.sourceFrame) - { - // gl.enable(gl.SCISSOR_TEST); - gl.scissor( - this.destinationFrame.x | 0, - this.destinationFrame.y | 0, - (this.destinationFrame.width * this.resolution) | 0, - (this.destinationFrame.height * this.resolution) | 0 - ); - } - else - { - // gl.disable(gl.SCISSOR_TEST); - } - - // TODO - does not need to be updated all the time?? - gl.viewport( - this.destinationFrame.x | 0, - this.destinationFrame.y | 0, - (this.destinationFrame.width * this.resolution) | 0, - (this.destinationFrame.height * this.resolution) | 0 - ); - } - - /** - * Updates the projection matrix based on a projection frame (which is a rectangle) - * - * @param {Rectangle} destinationFrame - The destination frame. - * @param {Rectangle} sourceFrame - The source frame. - */ - calculateProjection(destinationFrame, sourceFrame) - { - const pm = this.projectionMatrix; - - sourceFrame = sourceFrame || destinationFrame; - - pm.identity(); - - // TODO: make dest scale source - if (!this.root) - { - pm.a = 1 / destinationFrame.width * 2; - pm.d = 1 / destinationFrame.height * 2; - - pm.tx = -1 - (sourceFrame.x * pm.a); - pm.ty = -1 - (sourceFrame.y * pm.d); - } - else - { - pm.a = 1 / destinationFrame.width * 2; - pm.d = -1 / destinationFrame.height * 2; - - pm.tx = -1 - (sourceFrame.x * pm.a); - pm.ty = 1 - (sourceFrame.y * pm.d); - } - } - - /** - * Resizes the texture to the specified width and height - * - * @param {number} width - the new width of the texture - * @param {number} height - the new height of the texture - */ - resize(width, height) - { - width = width | 0; - height = height | 0; - - if (this.size.width === width && this.size.height === height) - { - return; - } - - this.size.width = width; - this.size.height = height; - - this.defaultFrame.width = width; - this.defaultFrame.height = height; - - this.frameBuffer.resize(width * this.resolution, height * this.resolution); - - const projectionFrame = this.frame || this.size; - - this.calculateProjection(projectionFrame); - } - - /** - * Destroys the render target. - * - */ - destroy() - { - this.frameBuffer.destroy(); - - this.frameBuffer = null; - this.texture = null; - } -} diff --git a/bundles/pixi.js/src/index.js b/bundles/pixi.js/src/index.js index fb839a0..a879872 100644 --- a/bundles/pixi.js/src/index.js +++ b/bundles/pixi.js/src/index.js @@ -9,7 +9,7 @@ import * as loaders from '@pixi/loaders'; import * as math from '@pixi/math'; import * as mesh from '@pixi/mesh'; -import * as particles from '@pixi/particles'; +// import * as particles from '@pixi/particles'; import * as prepare from '@pixi/prepare'; import * as sprite from '@pixi/sprite'; import * as spriteAnimated from '@pixi/sprite-animated'; @@ -38,7 +38,7 @@ core.Renderer.registerPlugin('graphics', graphics.GraphicsRenderer); core.Renderer.registerPlugin('interaction', interaction.InteractionManager); core.Renderer.registerPlugin('mesh', mesh.MeshRenderer); -core.Renderer.registerPlugin('particle', particles.ParticleRenderer); +// core.Renderer.registerPlugin('particle', particles.ParticleRenderer); core.Renderer.registerPlugin('prepare', prepare.Prepare); core.Renderer.registerPlugin('sprite', sprite.SpriteRenderer); core.Renderer.registerPlugin('tilingSprite', spriteTiling.TilingSpriteRenderer); @@ -120,7 +120,7 @@ loaders, math, mesh, - particles, + // particles, sprite, spriteAnimated, spritesheet, diff --git a/packages/core/package.json b/packages/core/package.json index 30e2e83..7d01377 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -29,7 +29,6 @@ "earcut": "^2.0.7", "eventemitter3": "^2.0.0", "ismobilejs": "^0.4.0", - "pixi-gl-core": "^2.0.0-alpha", "mini-runner": "^1.0.1", "@pixi/math": "^5.0.0-alpha", "@pixi/constants": "^5.0.0-alpha", diff --git a/packages/core/src/index.js b/packages/core/src/index.js index 0951de6..8b8e67c 100644 --- a/packages/core/src/index.js +++ b/packages/core/src/index.js @@ -14,7 +14,6 @@ export { default as WebGLSystem } from './renderers/systems/WebGLSystem'; export { default as State } from './renderers/State'; export { default as ObjectRenderer } from './renderers/utils/ObjectRenderer'; -export { default as RenderTarget } from './renderers/utils/RenderTarget'; export { default as Quad } from './renderers/utils/Quad'; export { default as checkMaxIfStatmentsInShader } from './renderers/utils/checkMaxIfStatmentsInShader'; export { default as Shader } from './shader/Shader'; diff --git a/packages/core/src/renderers/Renderer.js b/packages/core/src/renderers/Renderer.js index 6967107..89ce25f 100644 --- a/packages/core/src/renderers/Renderer.js +++ b/packages/core/src/renderers/Renderer.js @@ -2,7 +2,7 @@ import { sayHello } from '@pixi/utils'; import MaskSystem from './systems/MaskSystem'; import StencilSystem from './systems/StencilSystem'; -import FilterSystem from './systems/FilterSystem'; +// import FilterSystem from './systems/FilterSystem'; import FramebufferSystem from './systems/FramebufferSystem'; import RenderTextureSystem from './systems/RenderTextureSystem'; import TextureSystem from './systems/textures/TextureSystem'; @@ -103,7 +103,7 @@ .addSystem(StencilSystem, 'stencil') .addSystem(ProjectionSystem, 'projection') // .addSystem(TextureGCSystem) - .addSystem(FilterSystem, 'filter') + // .addSystem(FilterSystem, 'filter') .addSystem(RenderTextureSystem, 'renderTexture') .addSystem(BatchSystem, 'batch'); diff --git a/packages/core/src/renderers/filters/Filter.js b/packages/core/src/renderers/filters/Filter.js index 06f1222..2d82c8e 100644 --- a/packages/core/src/renderers/filters/Filter.js +++ b/packages/core/src/renderers/filters/Filter.js @@ -3,7 +3,7 @@ import { BLEND_MODES } from '@pixi/constants'; import { settings } from '@pixi/settings'; import { uid } from '@pixi/utils'; -import extractUniformsFromSrc from './extractUniformsFromSrc'; +// import extractUniformsFromSrc from './extractUniformsFromSrc'; import defaultVertex from './defaultFilter.vert'; import defaultFragment from './defaultFilter.frag'; @@ -28,7 +28,8 @@ this._blendMode = BLEND_MODES.NORMAL; - this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms; + // || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); /** * An object containing the current values of custom uniforms. diff --git a/packages/core/src/renderers/filters/extractUniformsFromSrc.js b/packages/core/src/renderers/filters/extractUniformsFromSrc.js deleted file mode 100644 index 5ec7007..0000000 --- a/packages/core/src/renderers/filters/extractUniformsFromSrc.js +++ /dev/null @@ -1,58 +0,0 @@ -import glCore from 'pixi-gl-core'; - -const defaultValue = glCore.shader.defaultValue; - -export default function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) -{ - const vertUniforms = extractUniformsFromString(vertexSrc, mask); - const fragUniforms = extractUniformsFromString(fragmentSrc, mask); - - return Object.assign(vertUniforms, fragUniforms); -} - -function extractUniformsFromString(string) -{ - const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea|filterClamp)$'); - - const uniforms = {}; - let nameSplit; - - // clean the lines a little - remove extra spaces / tabs etc - // then split along ';' - const lines = string.replace(/\s+/g, ' ') - .split(/\s*;\s*/); - - // loop through.. - for (let i = 0; i < lines.length; i++) - { - const line = lines[i].trim(); - - if (line.indexOf('uniform') > -1) - { - const splitLine = line.split(' '); - const type = splitLine[1]; - - let name = splitLine[2]; - let size = 1; - - if (name.indexOf('[') > -1) - { - // array! - nameSplit = name.split(/\[|]/); - name = nameSplit[0]; - size *= Number(nameSplit[1]); - } - - if (!name.match(maskRegex)) - { - uniforms[name] = { - value: defaultValue(type, size), - name, - type, - }; - } - } - } - - return uniforms; -} diff --git a/packages/core/src/renderers/managers/BlendModeManager.js b/packages/core/src/renderers/managers/BlendModeManager.js deleted file mode 100644 index 7362ae7..0000000 --- a/packages/core/src/renderers/managers/BlendModeManager.js +++ /dev/null @@ -1,45 +0,0 @@ -import WebGLManager from './WebGLManager'; - -/** - * @class - * @memberof PIXI - * @extends PIXI.WebGLManager - */ -export default class BlendModeManager extends WebGLManager -{ - /** - * @param {PIXI.Renderer} renderer - The renderer this manager works for. - */ - constructor(renderer) - { - super(renderer); - - /** - * @member {number} - */ - this.currentBlendMode = 99999; - } - - /** - * Sets-up the given blendMode from WebGL's point of view. - * - * @param {number} blendMode - the blendMode, should be a PixiJS const, such as - * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. - * @return {boolean} Returns if the blend mode was changed. - */ - setBlendMode(blendMode) - { - if (this.currentBlendMode === blendMode) - { - return false; - } - - this.currentBlendMode = blendMode; - - const mode = this.renderer.blendModes[this.currentBlendMode]; - - this.renderer.gl.blendFunc(mode[0], mode[1]); - - return true; - } -} diff --git a/packages/core/src/renderers/systems/geometry/GLBuffer.js b/packages/core/src/renderers/systems/geometry/GLBuffer.js new file mode 100644 index 0000000..0477e8a --- /dev/null +++ b/packages/core/src/renderers/systems/geometry/GLBuffer.js @@ -0,0 +1,9 @@ +export default class GLBuffer +{ + constructor(buffer) + { + this.buffer = buffer; + this.updateID = -1; + this.byteLength = -1; + } +} diff --git a/packages/core/src/renderers/systems/geometry/GeometrySystem.js b/packages/core/src/renderers/systems/geometry/GeometrySystem.js index a972762..d205a6d 100644 --- a/packages/core/src/renderers/systems/geometry/GeometrySystem.js +++ b/packages/core/src/renderers/systems/geometry/GeometrySystem.js @@ -1,17 +1,8 @@ import WebGLSystem from '../WebGLSystem'; +import GLBuffer from './GLBuffer'; const byteSizeMap = { 5126: 4, 5123: 2, 5121: 1 }; -class GLBufferData -{ - constructor(buffer) - { - this.buffer = buffer; - this.updateID = -1; - this.byteLength = -1; - } -} - /** * @class * @extends PIXI.WebGLSystem @@ -269,7 +260,7 @@ if (!buffer._glBuffers[CONTEXT_UID]) { - buffer._glBuffers[CONTEXT_UID] = new GLBufferData(gl.createBuffer()); + buffer._glBuffers[CONTEXT_UID] = new GLBuffer(gl.createBuffer()); } } diff --git a/packages/core/src/renderers/systems/textures/GLTexture.js b/packages/core/src/renderers/systems/textures/GLTexture.js index ceeb379..3f5bf44 100644 --- a/packages/core/src/renderers/systems/textures/GLTexture.js +++ b/packages/core/src/renderers/systems/textures/GLTexture.js @@ -1,75 +1,16 @@ -let FLOATING_POINT_AVAILABLE = false; - -/** - * Helper class to create a WebGL Texture - * - * @class - * @memberof PIXI.glCore - * @param gl {WebGLRenderingContext} The current WebGL context - * @param width {number} the width of the texture - * @param height {number} the height of the texture - * @param format {number} the pixel format of the texture. defaults to gl.RGBA - * @param type {number} the gl type of the texture. defaults to gl.UNSIGNED_BYTE - */ -export default class Texture +export default class GLTexture { - constructor(gl, width, height, format, type) + constructor(texture) { /** - * The current WebGL rendering context - * - * @member {WebGLRenderingContext} - */ - this.gl = gl; - - /** * The WebGL texture * * @member {WebGLTexture} */ - this.texture = gl.createTexture(); + this.texture = texture; - /** - * GL texture is ready for mipmaps - * - * @member {Boolean} - */ - // some settings.. - this.mipmap = false; - - /** - * Set to true to enable pre-multiplied alpha - * - * @member {Boolean} - */ - this.premultiplyAlpha = false; - - /** - * The width of texture - * - * @member {Number} - */ - this.width = width || -1; - /** - * The height of texture - * - * @member {Number} - */ - this.height = height || -1; - - /** - * The pixel format of the texture. defaults to gl.RGBA - * - * @member {Number} - */ - this.format = format || gl.RGBA; - - /** - * The gl type of the texture. defaults to gl.UNSIGNED_BYTE - * - * @member {Number} - */ - this.type = type || gl.UNSIGNED_BYTE; + this.width = -1; + this.height = -1; /** * Texture contents dirty flag @@ -83,156 +24,4 @@ */ this.dirtyStyleId = -1; } - - /** - * Uploads this texture to the GPU - * @param source {HTMLImageElement|ImageData|HTMLVideoElement} the source image of the texture - */ - upload(source) - { - this.bind(); - - const gl = this.gl; - - gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, this.premultiplyAlpha); - - const newWidth = source.videoWidth || source.width; - const newHeight = source.videoHeight || source.height; - - if (newHeight !== this.height || newWidth !== this.width) - { - gl.texImage2D(gl.TEXTURE_2D, 0, this.format, this.format, this.type, source); - } - else - { - gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, this.format, this.type, source); - } - - // if the source is a video, we need to use the videoWidth / videoHeight - // properties as width / height will be incorrect. - this.width = newWidth; - this.height = newHeight; - } - - /** - * Use a data source and uploads this texture to the GPU - * @param data {TypedArray} the data to upload to the texture - * @param width {number} the new width of the texture - * @param height {number} the new height of the texture - */ - uploadData(data, width, height) - { - this.bind(); - - const gl = this.gl; - - if (data instanceof Float32Array) - { - if (!FLOATING_POINT_AVAILABLE) - { - const ext = gl.getExtension('OES_texture_float'); - - if (ext) - { - FLOATING_POINT_AVAILABLE = true; - } - else - { - throw new Error('floating point textures not available'); - } - } - - this.type = gl.FLOAT; - } - else - { - // TODO support for other types - this.type = this.type || gl.UNSIGNED_BYTE; - } - - // what type of data? - gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, this.premultiplyAlpha); - - if (width !== this.width || height !== this.height) - { - gl.texImage2D(gl.TEXTURE_2D, 0, this.format, width, height, 0, this.format, this.type, data || null); - } - else - { - gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, width, height, this.format, this.type, data || null); - } - - this.width = width; - this.height = height; - } - - /** - * Binds the texture - * @param location - */ - bind(location) - { - const gl = this.gl; - - if (location !== undefined) - { - gl.activeTexture(gl.TEXTURE0 + location); - } - - gl.bindTexture(gl.TEXTURE_2D, this.texture); - } - - /** - * Unbinds the texture - */ - unbind() - { - const gl = this.gl; - - gl.bindTexture(gl.TEXTURE_2D, null); - } - - /** - * Destroys this texture - */ - destroy() - { - const gl = this.gl; - // TODO - - gl.deleteTexture(this.texture); - } - - /** - * @static - * @param gl {WebGLRenderingContext} The current WebGL context - * @param source {HTMLImageElement|ImageData} the source image of the texture - * @param premultiplyAlpha {Boolean} If we want to use pre-multiplied alpha - */ - static fromSource(gl, source, premultiplyAlpha) - { - const texture = new Texture(gl); - - texture.premultiplyAlpha = premultiplyAlpha || false; - texture.upload(source); - - return texture; - } - - /** - * @static - * @param gl {WebGLRenderingContext} The current WebGL context - * @param data {TypedArray} the data to upload to the texture - * @param width {number} the new width of the texture - * @param height {number} the new height of the texture - */ - static fromData(gl, data, width, height) - { - // console.log(data, width, height); - const texture = new Texture(gl); - - texture.uploadData(data, width, height); - - return texture; - } } diff --git a/packages/core/src/renderers/systems/textures/TextureSystem.js b/packages/core/src/renderers/systems/textures/TextureSystem.js index b000db2..5c159e2 100644 --- a/packages/core/src/renderers/systems/textures/TextureSystem.js +++ b/packages/core/src/renderers/systems/textures/TextureSystem.js @@ -56,8 +56,13 @@ // TODO move this.. to a nice make empty textures class.. this.emptyTextures = {}; - this.emptyTextures[gl.TEXTURE_2D] = new GLTexture.fromData(this.gl, null, 1, 1); - this.emptyTextures[gl.TEXTURE_CUBE_MAP] = new GLTexture(this.gl); + const emptyTexture2D = new GLTexture(gl.createTexture()); + + gl.bindTexture(gl.TEXTURE_2D, emptyTexture2D.texture); + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array(4)); + + this.emptyTextures[gl.TEXTURE_2D] = emptyTexture2D; + this.emptyTextures[gl.TEXTURE_CUBE_MAP] = new GLTexture(gl.createTexture()); gl.bindTexture(gl.TEXTURE_CUBE_MAP, this.emptyTextures[gl.TEXTURE_CUBE_MAP].texture); @@ -136,9 +141,8 @@ initTexture(texture) { - const glTexture = new GLTexture(this.gl, -1, -1, texture.format, texture.type); + const glTexture = new GLTexture(this.gl.createTexture()); - glTexture.premultiplyAlpha = texture.premultiplyAlpha; // guarentee an update.. glTexture.dirtyId = -1; @@ -188,7 +192,7 @@ { this.unbind(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + texture._glTextures[this.renderer.CONTEXT_UID].texture.destroy(); texture.off('dispose', this.destroyTexture, this); delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -209,7 +213,6 @@ { const glTexture = texture._glTextures[this.CONTEXT_UID]; - glTexture.mipmap = texture.mipmap && texture.isPowerOfTwo; if (!glTexture) { return; @@ -223,14 +226,15 @@ { this.setStyle(texture, glTexture); } + glTexture.dirtyStyleId = texture.dirtyStyleId; } - setStyle(texture, glTexture) + setStyle(texture) { const gl = this.gl; - if (glTexture.mipmap) + if (texture.mipmap && texture.isPowerOfTwo) { gl.generateMipmap(texture.target); } @@ -238,7 +242,7 @@ gl.texParameteri(texture.target, gl.TEXTURE_WRAP_S, texture.wrapMode); gl.texParameteri(texture.target, gl.TEXTURE_WRAP_T, texture.wrapMode); - if (glTexture.mipmap) + if (texture.mipmap) { /* eslint-disable max-len */ gl.texParameteri(texture.target, gl.TEXTURE_MIN_FILTER, texture.scaleMode ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); diff --git a/packages/core/src/renderers/utils/RenderTarget.js b/packages/core/src/renderers/utils/RenderTarget.js deleted file mode 100644 index 3f129ed..0000000 --- a/packages/core/src/renderers/utils/RenderTarget.js +++ /dev/null @@ -1,326 +0,0 @@ -import { Rectangle, Matrix } from '@pixi/math'; -import { SCALE_MODES } from '@pixi/constants'; -import { settings } from '@pixi/settings'; -import { GLFramebuffer } from 'pixi-gl-core'; - -/** - * @class - * @memberof PIXI - */ -export default class RenderTarget -{ - /** - * @param {WebGLRenderingContext} gl - The current WebGL drawing context - * @param {number} [width=0] - the horizontal range of the filter - * @param {number} [height=0] - the vertical range of the filter - * @param {number} [scaleMode=PIXI.settings.SCALE_MODE] - See {@link PIXI.SCALE_MODES} for possible values - * @param {number} [resolution=1] - The current resolution / device pixel ratio - * @param {boolean} [root=false] - Whether this object is the root element or not - */ - constructor(gl, width, height, scaleMode, resolution, root) - { - // TODO Resolution could go here ( eg low res blurs ) - - /** - * The current WebGL drawing context. - * - * @member {WebGLRenderingContext} - */ - this.gl = gl; - - // next time to create a frame buffer and texture - - /** - * A frame buffer - * - * @member {PIXI.glCore.GLFramebuffer} - */ - this.frameBuffer = null; - - /** - * The texture - * - * @member {PIXI.glCore.GLTexture} - */ - this.texture = null; - - /** - * The background colour of this render target, as an array of [r,g,b,a] values - * - * @member {number[]} - */ - this.clearColor = [0, 0, 0, 0]; - - /** - * The size of the object as a rectangle - * - * @member {PIXI.Rectangle} - */ - this.size = new Rectangle(0, 0, 1, 1); - - /** - * The current resolution / device pixel ratio - * - * @member {number} - * @default 1 - */ - this.resolution = resolution || settings.RESOLUTION; - - /** - * The projection matrix - * - * @member {PIXI.Matrix} - */ - this.projectionMatrix = new Matrix(); - - /** - * The object's transform - * - * @member {PIXI.Matrix} - */ - this.transform = null; - - /** - * The frame. - * - * @member {PIXI.Rectangle} - */ - this.frame = null; - - /** - * The stencil buffer stores masking data for the render target - * - * @member {glCore.GLBuffer} - */ - this.defaultFrame = new Rectangle(); - this.destinationFrame = null; - this.sourceFrame = null; - - /** - * The stencil buffer stores masking data for the render target - * - * @member {glCore.GLBuffer} - */ - this.stencilBuffer = null; - - /** - * The data structure for the stencil masks - * - * @member {PIXI.Graphics[]} - */ - this.stencilMaskStack = []; - - /** - * Stores filter data for the render target - * - * @member {object[]} - */ - this.filterData = null; - - /** - * The scale mode. - * - * @member {number} - * @default PIXI.settings.SCALE_MODE - * @see PIXI.SCALE_MODES - */ - this.scaleMode = scaleMode !== undefined ? scaleMode : settings.SCALE_MODE; - - /** - * Whether this object is the root element or not - * - * @member {boolean} - */ - this.root = root; - - if (!this.root) - { - this.frameBuffer = GLFramebuffer.createRGBA(gl, 100, 100); - - if (this.scaleMode === SCALE_MODES.NEAREST) - { - this.frameBuffer.texture.enableNearestScaling(); - } - else - { - this.frameBuffer.texture.enableLinearScaling(); - } - /* - A frame buffer needs a target to render to.. - create a texture and bind it attach it to the framebuffer.. - */ - - // this is used by the base texture - this.texture = this.frameBuffer.texture; - } - else - { - // make it a null framebuffer.. - this.frameBuffer = new GLFramebuffer(gl, 100, 100); - this.frameBuffer.framebuffer = null; - } - - this.setFrame(); - - this.resize(width, height); - } - - /** - * Clears the filter texture. - * - * @param {number[]} [clearColor=this.clearColor] - Array of [r,g,b,a] to clear the framebuffer - */ - clear(clearColor) - { - const cc = clearColor || this.clearColor; - - this.frameBuffer.clear(cc[0], cc[1], cc[2], cc[3]);// r,g,b,a); - } - - /** - * Binds the stencil buffer. - * - */ - attachStencilBuffer() - { - // TODO check if stencil is done? - /** - * The stencil buffer is used for masking in pixi - * lets create one and then add attach it to the framebuffer.. - */ - if (!this.root) - { - this.frameBuffer.enableStencil(); - } - } - - /** - * Sets the frame of the render target. - * - * @param {Rectangle} destinationFrame - The destination frame. - * @param {Rectangle} sourceFrame - The source frame. - */ - setFrame(destinationFrame, sourceFrame) - { - this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; - } - - /** - * Binds the buffers and initialises the viewport. - * - */ - activate() - { - // TOOD refactor usage of frame.. - const gl = this.gl; - - // make sure the texture is unbound! - this.frameBuffer.bind(); - - this.calculateProjection(this.destinationFrame, this.sourceFrame); - - if (this.transform) - { - this.projectionMatrix.append(this.transform); - } - - // TODO add a check as them may be the same! - if (this.destinationFrame !== this.sourceFrame) - { - // gl.enable(gl.SCISSOR_TEST); - gl.scissor( - this.destinationFrame.x | 0, - this.destinationFrame.y | 0, - (this.destinationFrame.width * this.resolution) | 0, - (this.destinationFrame.height * this.resolution) | 0 - ); - } - else - { - // gl.disable(gl.SCISSOR_TEST); - } - - // TODO - does not need to be updated all the time?? - gl.viewport( - this.destinationFrame.x | 0, - this.destinationFrame.y | 0, - (this.destinationFrame.width * this.resolution) | 0, - (this.destinationFrame.height * this.resolution) | 0 - ); - } - - /** - * Updates the projection matrix based on a projection frame (which is a rectangle) - * - * @param {Rectangle} destinationFrame - The destination frame. - * @param {Rectangle} sourceFrame - The source frame. - */ - calculateProjection(destinationFrame, sourceFrame) - { - const pm = this.projectionMatrix; - - sourceFrame = sourceFrame || destinationFrame; - - pm.identity(); - - // TODO: make dest scale source - if (!this.root) - { - pm.a = 1 / destinationFrame.width * 2; - pm.d = 1 / destinationFrame.height * 2; - - pm.tx = -1 - (sourceFrame.x * pm.a); - pm.ty = -1 - (sourceFrame.y * pm.d); - } - else - { - pm.a = 1 / destinationFrame.width * 2; - pm.d = -1 / destinationFrame.height * 2; - - pm.tx = -1 - (sourceFrame.x * pm.a); - pm.ty = 1 - (sourceFrame.y * pm.d); - } - } - - /** - * Resizes the texture to the specified width and height - * - * @param {number} width - the new width of the texture - * @param {number} height - the new height of the texture - */ - resize(width, height) - { - width = width | 0; - height = height | 0; - - if (this.size.width === width && this.size.height === height) - { - return; - } - - this.size.width = width; - this.size.height = height; - - this.defaultFrame.width = width; - this.defaultFrame.height = height; - - this.frameBuffer.resize(width * this.resolution, height * this.resolution); - - const projectionFrame = this.frame || this.size; - - this.calculateProjection(projectionFrame); - } - - /** - * Destroys the render target. - * - */ - destroy() - { - this.frameBuffer.destroy(); - - this.frameBuffer = null; - this.texture = null; - } -} diff --git a/packages/core/src/shader/defaultValue.js b/packages/core/src/shader/defaultValue.js new file mode 100644 index 0000000..847a069 --- /dev/null +++ b/packages/core/src/shader/defaultValue.js @@ -0,0 +1,78 @@ +function booleanArray(size) +{ + const array = new Array(size); + + for (let i = 0; i < array.length; i++) + { + array[i] = false; + } + + return array; +} + +/** + * @class + * @memberof PIXI.glCore.shader + * @param type {String} Type of value + * @param size {Number} + */ +export default function defaultValue(type, size) +{ + switch (type) + { + case 'float': + return 0; + + case 'vec2': + return new Float32Array(2 * size); + + case 'vec3': + return new Float32Array(3 * size); + + case 'vec4': + return new Float32Array(4 * size); + + case 'int': + case 'sampler2D': + return 0; + + case 'ivec2': + return new Int32Array(2 * size); + + case 'ivec3': + return new Int32Array(3 * size); + + case 'ivec4': + return new Int32Array(4 * size); + + case 'bool': + return false; + + case 'bvec2': + + return booleanArray(2 * size); + + case 'bvec3': + return booleanArray(3 * size); + + case 'bvec4': + return booleanArray(4 * size); + + case 'mat2': + return new Float32Array([1, 0, + 0, 1]); + + case 'mat3': + return new Float32Array([1, 0, 0, + 0, 1, 0, + 0, 0, 1]); + + case 'mat4': + return new Float32Array([1, 0, 0, 0, + 0, 1, 0, 0, + 0, 0, 1, 0, + 0, 0, 0, 1]); + } + + return 0; +} diff --git a/bundles/pixi.js/src/index.js b/bundles/pixi.js/src/index.js index fb839a0..a879872 100644 --- a/bundles/pixi.js/src/index.js +++ b/bundles/pixi.js/src/index.js @@ -9,7 +9,7 @@ import * as loaders from '@pixi/loaders'; import * as math from '@pixi/math'; import * as mesh from '@pixi/mesh'; -import * as particles from '@pixi/particles'; +// import * as particles from '@pixi/particles'; import * as prepare from '@pixi/prepare'; import * as sprite from '@pixi/sprite'; import * as spriteAnimated from '@pixi/sprite-animated'; @@ -38,7 +38,7 @@ core.Renderer.registerPlugin('graphics', graphics.GraphicsRenderer); core.Renderer.registerPlugin('interaction', interaction.InteractionManager); core.Renderer.registerPlugin('mesh', mesh.MeshRenderer); -core.Renderer.registerPlugin('particle', particles.ParticleRenderer); +// core.Renderer.registerPlugin('particle', particles.ParticleRenderer); core.Renderer.registerPlugin('prepare', prepare.Prepare); core.Renderer.registerPlugin('sprite', sprite.SpriteRenderer); core.Renderer.registerPlugin('tilingSprite', spriteTiling.TilingSpriteRenderer); @@ -120,7 +120,7 @@ loaders, math, mesh, - particles, + // particles, sprite, spriteAnimated, spritesheet, diff --git a/packages/core/package.json b/packages/core/package.json index 30e2e83..7d01377 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -29,7 +29,6 @@ "earcut": "^2.0.7", "eventemitter3": "^2.0.0", "ismobilejs": "^0.4.0", - "pixi-gl-core": "^2.0.0-alpha", "mini-runner": "^1.0.1", "@pixi/math": "^5.0.0-alpha", "@pixi/constants": "^5.0.0-alpha", diff --git a/packages/core/src/index.js b/packages/core/src/index.js index 0951de6..8b8e67c 100644 --- a/packages/core/src/index.js +++ b/packages/core/src/index.js @@ -14,7 +14,6 @@ export { default as WebGLSystem } from './renderers/systems/WebGLSystem'; export { default as State } from './renderers/State'; export { default as ObjectRenderer } from './renderers/utils/ObjectRenderer'; -export { default as RenderTarget } from './renderers/utils/RenderTarget'; export { default as Quad } from './renderers/utils/Quad'; export { default as checkMaxIfStatmentsInShader } from './renderers/utils/checkMaxIfStatmentsInShader'; export { default as Shader } from './shader/Shader'; diff --git a/packages/core/src/renderers/Renderer.js b/packages/core/src/renderers/Renderer.js index 6967107..89ce25f 100644 --- a/packages/core/src/renderers/Renderer.js +++ b/packages/core/src/renderers/Renderer.js @@ -2,7 +2,7 @@ import { sayHello } from '@pixi/utils'; import MaskSystem from './systems/MaskSystem'; import StencilSystem from './systems/StencilSystem'; -import FilterSystem from './systems/FilterSystem'; +// import FilterSystem from './systems/FilterSystem'; import FramebufferSystem from './systems/FramebufferSystem'; import RenderTextureSystem from './systems/RenderTextureSystem'; import TextureSystem from './systems/textures/TextureSystem'; @@ -103,7 +103,7 @@ .addSystem(StencilSystem, 'stencil') .addSystem(ProjectionSystem, 'projection') // .addSystem(TextureGCSystem) - .addSystem(FilterSystem, 'filter') + // .addSystem(FilterSystem, 'filter') .addSystem(RenderTextureSystem, 'renderTexture') .addSystem(BatchSystem, 'batch'); diff --git a/packages/core/src/renderers/filters/Filter.js b/packages/core/src/renderers/filters/Filter.js index 06f1222..2d82c8e 100644 --- a/packages/core/src/renderers/filters/Filter.js +++ b/packages/core/src/renderers/filters/Filter.js @@ -3,7 +3,7 @@ import { BLEND_MODES } from '@pixi/constants'; import { settings } from '@pixi/settings'; import { uid } from '@pixi/utils'; -import extractUniformsFromSrc from './extractUniformsFromSrc'; +// import extractUniformsFromSrc from './extractUniformsFromSrc'; import defaultVertex from './defaultFilter.vert'; import defaultFragment from './defaultFilter.frag'; @@ -28,7 +28,8 @@ this._blendMode = BLEND_MODES.NORMAL; - this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms; + // || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); /** * An object containing the current values of custom uniforms. diff --git a/packages/core/src/renderers/filters/extractUniformsFromSrc.js b/packages/core/src/renderers/filters/extractUniformsFromSrc.js deleted file mode 100644 index 5ec7007..0000000 --- a/packages/core/src/renderers/filters/extractUniformsFromSrc.js +++ /dev/null @@ -1,58 +0,0 @@ -import glCore from 'pixi-gl-core'; - -const defaultValue = glCore.shader.defaultValue; - -export default function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) -{ - const vertUniforms = extractUniformsFromString(vertexSrc, mask); - const fragUniforms = extractUniformsFromString(fragmentSrc, mask); - - return Object.assign(vertUniforms, fragUniforms); -} - -function extractUniformsFromString(string) -{ - const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea|filterClamp)$'); - - const uniforms = {}; - let nameSplit; - - // clean the lines a little - remove extra spaces / tabs etc - // then split along ';' - const lines = string.replace(/\s+/g, ' ') - .split(/\s*;\s*/); - - // loop through.. - for (let i = 0; i < lines.length; i++) - { - const line = lines[i].trim(); - - if (line.indexOf('uniform') > -1) - { - const splitLine = line.split(' '); - const type = splitLine[1]; - - let name = splitLine[2]; - let size = 1; - - if (name.indexOf('[') > -1) - { - // array! - nameSplit = name.split(/\[|]/); - name = nameSplit[0]; - size *= Number(nameSplit[1]); - } - - if (!name.match(maskRegex)) - { - uniforms[name] = { - value: defaultValue(type, size), - name, - type, - }; - } - } - } - - return uniforms; -} diff --git a/packages/core/src/renderers/managers/BlendModeManager.js b/packages/core/src/renderers/managers/BlendModeManager.js deleted file mode 100644 index 7362ae7..0000000 --- a/packages/core/src/renderers/managers/BlendModeManager.js +++ /dev/null @@ -1,45 +0,0 @@ -import WebGLManager from './WebGLManager'; - -/** - * @class - * @memberof PIXI - * @extends PIXI.WebGLManager - */ -export default class BlendModeManager extends WebGLManager -{ - /** - * @param {PIXI.Renderer} renderer - The renderer this manager works for. - */ - constructor(renderer) - { - super(renderer); - - /** - * @member {number} - */ - this.currentBlendMode = 99999; - } - - /** - * Sets-up the given blendMode from WebGL's point of view. - * - * @param {number} blendMode - the blendMode, should be a PixiJS const, such as - * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. - * @return {boolean} Returns if the blend mode was changed. - */ - setBlendMode(blendMode) - { - if (this.currentBlendMode === blendMode) - { - return false; - } - - this.currentBlendMode = blendMode; - - const mode = this.renderer.blendModes[this.currentBlendMode]; - - this.renderer.gl.blendFunc(mode[0], mode[1]); - - return true; - } -} diff --git a/packages/core/src/renderers/systems/geometry/GLBuffer.js b/packages/core/src/renderers/systems/geometry/GLBuffer.js new file mode 100644 index 0000000..0477e8a --- /dev/null +++ b/packages/core/src/renderers/systems/geometry/GLBuffer.js @@ -0,0 +1,9 @@ +export default class GLBuffer +{ + constructor(buffer) + { + this.buffer = buffer; + this.updateID = -1; + this.byteLength = -1; + } +} diff --git a/packages/core/src/renderers/systems/geometry/GeometrySystem.js b/packages/core/src/renderers/systems/geometry/GeometrySystem.js index a972762..d205a6d 100644 --- a/packages/core/src/renderers/systems/geometry/GeometrySystem.js +++ b/packages/core/src/renderers/systems/geometry/GeometrySystem.js @@ -1,17 +1,8 @@ import WebGLSystem from '../WebGLSystem'; +import GLBuffer from './GLBuffer'; const byteSizeMap = { 5126: 4, 5123: 2, 5121: 1 }; -class GLBufferData -{ - constructor(buffer) - { - this.buffer = buffer; - this.updateID = -1; - this.byteLength = -1; - } -} - /** * @class * @extends PIXI.WebGLSystem @@ -269,7 +260,7 @@ if (!buffer._glBuffers[CONTEXT_UID]) { - buffer._glBuffers[CONTEXT_UID] = new GLBufferData(gl.createBuffer()); + buffer._glBuffers[CONTEXT_UID] = new GLBuffer(gl.createBuffer()); } } diff --git a/packages/core/src/renderers/systems/textures/GLTexture.js b/packages/core/src/renderers/systems/textures/GLTexture.js index ceeb379..3f5bf44 100644 --- a/packages/core/src/renderers/systems/textures/GLTexture.js +++ b/packages/core/src/renderers/systems/textures/GLTexture.js @@ -1,75 +1,16 @@ -let FLOATING_POINT_AVAILABLE = false; - -/** - * Helper class to create a WebGL Texture - * - * @class - * @memberof PIXI.glCore - * @param gl {WebGLRenderingContext} The current WebGL context - * @param width {number} the width of the texture - * @param height {number} the height of the texture - * @param format {number} the pixel format of the texture. defaults to gl.RGBA - * @param type {number} the gl type of the texture. defaults to gl.UNSIGNED_BYTE - */ -export default class Texture +export default class GLTexture { - constructor(gl, width, height, format, type) + constructor(texture) { /** - * The current WebGL rendering context - * - * @member {WebGLRenderingContext} - */ - this.gl = gl; - - /** * The WebGL texture * * @member {WebGLTexture} */ - this.texture = gl.createTexture(); + this.texture = texture; - /** - * GL texture is ready for mipmaps - * - * @member {Boolean} - */ - // some settings.. - this.mipmap = false; - - /** - * Set to true to enable pre-multiplied alpha - * - * @member {Boolean} - */ - this.premultiplyAlpha = false; - - /** - * The width of texture - * - * @member {Number} - */ - this.width = width || -1; - /** - * The height of texture - * - * @member {Number} - */ - this.height = height || -1; - - /** - * The pixel format of the texture. defaults to gl.RGBA - * - * @member {Number} - */ - this.format = format || gl.RGBA; - - /** - * The gl type of the texture. defaults to gl.UNSIGNED_BYTE - * - * @member {Number} - */ - this.type = type || gl.UNSIGNED_BYTE; + this.width = -1; + this.height = -1; /** * Texture contents dirty flag @@ -83,156 +24,4 @@ */ this.dirtyStyleId = -1; } - - /** - * Uploads this texture to the GPU - * @param source {HTMLImageElement|ImageData|HTMLVideoElement} the source image of the texture - */ - upload(source) - { - this.bind(); - - const gl = this.gl; - - gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, this.premultiplyAlpha); - - const newWidth = source.videoWidth || source.width; - const newHeight = source.videoHeight || source.height; - - if (newHeight !== this.height || newWidth !== this.width) - { - gl.texImage2D(gl.TEXTURE_2D, 0, this.format, this.format, this.type, source); - } - else - { - gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, this.format, this.type, source); - } - - // if the source is a video, we need to use the videoWidth / videoHeight - // properties as width / height will be incorrect. - this.width = newWidth; - this.height = newHeight; - } - - /** - * Use a data source and uploads this texture to the GPU - * @param data {TypedArray} the data to upload to the texture - * @param width {number} the new width of the texture - * @param height {number} the new height of the texture - */ - uploadData(data, width, height) - { - this.bind(); - - const gl = this.gl; - - if (data instanceof Float32Array) - { - if (!FLOATING_POINT_AVAILABLE) - { - const ext = gl.getExtension('OES_texture_float'); - - if (ext) - { - FLOATING_POINT_AVAILABLE = true; - } - else - { - throw new Error('floating point textures not available'); - } - } - - this.type = gl.FLOAT; - } - else - { - // TODO support for other types - this.type = this.type || gl.UNSIGNED_BYTE; - } - - // what type of data? - gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, this.premultiplyAlpha); - - if (width !== this.width || height !== this.height) - { - gl.texImage2D(gl.TEXTURE_2D, 0, this.format, width, height, 0, this.format, this.type, data || null); - } - else - { - gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, width, height, this.format, this.type, data || null); - } - - this.width = width; - this.height = height; - } - - /** - * Binds the texture - * @param location - */ - bind(location) - { - const gl = this.gl; - - if (location !== undefined) - { - gl.activeTexture(gl.TEXTURE0 + location); - } - - gl.bindTexture(gl.TEXTURE_2D, this.texture); - } - - /** - * Unbinds the texture - */ - unbind() - { - const gl = this.gl; - - gl.bindTexture(gl.TEXTURE_2D, null); - } - - /** - * Destroys this texture - */ - destroy() - { - const gl = this.gl; - // TODO - - gl.deleteTexture(this.texture); - } - - /** - * @static - * @param gl {WebGLRenderingContext} The current WebGL context - * @param source {HTMLImageElement|ImageData} the source image of the texture - * @param premultiplyAlpha {Boolean} If we want to use pre-multiplied alpha - */ - static fromSource(gl, source, premultiplyAlpha) - { - const texture = new Texture(gl); - - texture.premultiplyAlpha = premultiplyAlpha || false; - texture.upload(source); - - return texture; - } - - /** - * @static - * @param gl {WebGLRenderingContext} The current WebGL context - * @param data {TypedArray} the data to upload to the texture - * @param width {number} the new width of the texture - * @param height {number} the new height of the texture - */ - static fromData(gl, data, width, height) - { - // console.log(data, width, height); - const texture = new Texture(gl); - - texture.uploadData(data, width, height); - - return texture; - } } diff --git a/packages/core/src/renderers/systems/textures/TextureSystem.js b/packages/core/src/renderers/systems/textures/TextureSystem.js index b000db2..5c159e2 100644 --- a/packages/core/src/renderers/systems/textures/TextureSystem.js +++ b/packages/core/src/renderers/systems/textures/TextureSystem.js @@ -56,8 +56,13 @@ // TODO move this.. to a nice make empty textures class.. this.emptyTextures = {}; - this.emptyTextures[gl.TEXTURE_2D] = new GLTexture.fromData(this.gl, null, 1, 1); - this.emptyTextures[gl.TEXTURE_CUBE_MAP] = new GLTexture(this.gl); + const emptyTexture2D = new GLTexture(gl.createTexture()); + + gl.bindTexture(gl.TEXTURE_2D, emptyTexture2D.texture); + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array(4)); + + this.emptyTextures[gl.TEXTURE_2D] = emptyTexture2D; + this.emptyTextures[gl.TEXTURE_CUBE_MAP] = new GLTexture(gl.createTexture()); gl.bindTexture(gl.TEXTURE_CUBE_MAP, this.emptyTextures[gl.TEXTURE_CUBE_MAP].texture); @@ -136,9 +141,8 @@ initTexture(texture) { - const glTexture = new GLTexture(this.gl, -1, -1, texture.format, texture.type); + const glTexture = new GLTexture(this.gl.createTexture()); - glTexture.premultiplyAlpha = texture.premultiplyAlpha; // guarentee an update.. glTexture.dirtyId = -1; @@ -188,7 +192,7 @@ { this.unbind(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + texture._glTextures[this.renderer.CONTEXT_UID].texture.destroy(); texture.off('dispose', this.destroyTexture, this); delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -209,7 +213,6 @@ { const glTexture = texture._glTextures[this.CONTEXT_UID]; - glTexture.mipmap = texture.mipmap && texture.isPowerOfTwo; if (!glTexture) { return; @@ -223,14 +226,15 @@ { this.setStyle(texture, glTexture); } + glTexture.dirtyStyleId = texture.dirtyStyleId; } - setStyle(texture, glTexture) + setStyle(texture) { const gl = this.gl; - if (glTexture.mipmap) + if (texture.mipmap && texture.isPowerOfTwo) { gl.generateMipmap(texture.target); } @@ -238,7 +242,7 @@ gl.texParameteri(texture.target, gl.TEXTURE_WRAP_S, texture.wrapMode); gl.texParameteri(texture.target, gl.TEXTURE_WRAP_T, texture.wrapMode); - if (glTexture.mipmap) + if (texture.mipmap) { /* eslint-disable max-len */ gl.texParameteri(texture.target, gl.TEXTURE_MIN_FILTER, texture.scaleMode ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); diff --git a/packages/core/src/renderers/utils/RenderTarget.js b/packages/core/src/renderers/utils/RenderTarget.js deleted file mode 100644 index 3f129ed..0000000 --- a/packages/core/src/renderers/utils/RenderTarget.js +++ /dev/null @@ -1,326 +0,0 @@ -import { Rectangle, Matrix } from '@pixi/math'; -import { SCALE_MODES } from '@pixi/constants'; -import { settings } from '@pixi/settings'; -import { GLFramebuffer } from 'pixi-gl-core'; - -/** - * @class - * @memberof PIXI - */ -export default class RenderTarget -{ - /** - * @param {WebGLRenderingContext} gl - The current WebGL drawing context - * @param {number} [width=0] - the horizontal range of the filter - * @param {number} [height=0] - the vertical range of the filter - * @param {number} [scaleMode=PIXI.settings.SCALE_MODE] - See {@link PIXI.SCALE_MODES} for possible values - * @param {number} [resolution=1] - The current resolution / device pixel ratio - * @param {boolean} [root=false] - Whether this object is the root element or not - */ - constructor(gl, width, height, scaleMode, resolution, root) - { - // TODO Resolution could go here ( eg low res blurs ) - - /** - * The current WebGL drawing context. - * - * @member {WebGLRenderingContext} - */ - this.gl = gl; - - // next time to create a frame buffer and texture - - /** - * A frame buffer - * - * @member {PIXI.glCore.GLFramebuffer} - */ - this.frameBuffer = null; - - /** - * The texture - * - * @member {PIXI.glCore.GLTexture} - */ - this.texture = null; - - /** - * The background colour of this render target, as an array of [r,g,b,a] values - * - * @member {number[]} - */ - this.clearColor = [0, 0, 0, 0]; - - /** - * The size of the object as a rectangle - * - * @member {PIXI.Rectangle} - */ - this.size = new Rectangle(0, 0, 1, 1); - - /** - * The current resolution / device pixel ratio - * - * @member {number} - * @default 1 - */ - this.resolution = resolution || settings.RESOLUTION; - - /** - * The projection matrix - * - * @member {PIXI.Matrix} - */ - this.projectionMatrix = new Matrix(); - - /** - * The object's transform - * - * @member {PIXI.Matrix} - */ - this.transform = null; - - /** - * The frame. - * - * @member {PIXI.Rectangle} - */ - this.frame = null; - - /** - * The stencil buffer stores masking data for the render target - * - * @member {glCore.GLBuffer} - */ - this.defaultFrame = new Rectangle(); - this.destinationFrame = null; - this.sourceFrame = null; - - /** - * The stencil buffer stores masking data for the render target - * - * @member {glCore.GLBuffer} - */ - this.stencilBuffer = null; - - /** - * The data structure for the stencil masks - * - * @member {PIXI.Graphics[]} - */ - this.stencilMaskStack = []; - - /** - * Stores filter data for the render target - * - * @member {object[]} - */ - this.filterData = null; - - /** - * The scale mode. - * - * @member {number} - * @default PIXI.settings.SCALE_MODE - * @see PIXI.SCALE_MODES - */ - this.scaleMode = scaleMode !== undefined ? scaleMode : settings.SCALE_MODE; - - /** - * Whether this object is the root element or not - * - * @member {boolean} - */ - this.root = root; - - if (!this.root) - { - this.frameBuffer = GLFramebuffer.createRGBA(gl, 100, 100); - - if (this.scaleMode === SCALE_MODES.NEAREST) - { - this.frameBuffer.texture.enableNearestScaling(); - } - else - { - this.frameBuffer.texture.enableLinearScaling(); - } - /* - A frame buffer needs a target to render to.. - create a texture and bind it attach it to the framebuffer.. - */ - - // this is used by the base texture - this.texture = this.frameBuffer.texture; - } - else - { - // make it a null framebuffer.. - this.frameBuffer = new GLFramebuffer(gl, 100, 100); - this.frameBuffer.framebuffer = null; - } - - this.setFrame(); - - this.resize(width, height); - } - - /** - * Clears the filter texture. - * - * @param {number[]} [clearColor=this.clearColor] - Array of [r,g,b,a] to clear the framebuffer - */ - clear(clearColor) - { - const cc = clearColor || this.clearColor; - - this.frameBuffer.clear(cc[0], cc[1], cc[2], cc[3]);// r,g,b,a); - } - - /** - * Binds the stencil buffer. - * - */ - attachStencilBuffer() - { - // TODO check if stencil is done? - /** - * The stencil buffer is used for masking in pixi - * lets create one and then add attach it to the framebuffer.. - */ - if (!this.root) - { - this.frameBuffer.enableStencil(); - } - } - - /** - * Sets the frame of the render target. - * - * @param {Rectangle} destinationFrame - The destination frame. - * @param {Rectangle} sourceFrame - The source frame. - */ - setFrame(destinationFrame, sourceFrame) - { - this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; - } - - /** - * Binds the buffers and initialises the viewport. - * - */ - activate() - { - // TOOD refactor usage of frame.. - const gl = this.gl; - - // make sure the texture is unbound! - this.frameBuffer.bind(); - - this.calculateProjection(this.destinationFrame, this.sourceFrame); - - if (this.transform) - { - this.projectionMatrix.append(this.transform); - } - - // TODO add a check as them may be the same! - if (this.destinationFrame !== this.sourceFrame) - { - // gl.enable(gl.SCISSOR_TEST); - gl.scissor( - this.destinationFrame.x | 0, - this.destinationFrame.y | 0, - (this.destinationFrame.width * this.resolution) | 0, - (this.destinationFrame.height * this.resolution) | 0 - ); - } - else - { - // gl.disable(gl.SCISSOR_TEST); - } - - // TODO - does not need to be updated all the time?? - gl.viewport( - this.destinationFrame.x | 0, - this.destinationFrame.y | 0, - (this.destinationFrame.width * this.resolution) | 0, - (this.destinationFrame.height * this.resolution) | 0 - ); - } - - /** - * Updates the projection matrix based on a projection frame (which is a rectangle) - * - * @param {Rectangle} destinationFrame - The destination frame. - * @param {Rectangle} sourceFrame - The source frame. - */ - calculateProjection(destinationFrame, sourceFrame) - { - const pm = this.projectionMatrix; - - sourceFrame = sourceFrame || destinationFrame; - - pm.identity(); - - // TODO: make dest scale source - if (!this.root) - { - pm.a = 1 / destinationFrame.width * 2; - pm.d = 1 / destinationFrame.height * 2; - - pm.tx = -1 - (sourceFrame.x * pm.a); - pm.ty = -1 - (sourceFrame.y * pm.d); - } - else - { - pm.a = 1 / destinationFrame.width * 2; - pm.d = -1 / destinationFrame.height * 2; - - pm.tx = -1 - (sourceFrame.x * pm.a); - pm.ty = 1 - (sourceFrame.y * pm.d); - } - } - - /** - * Resizes the texture to the specified width and height - * - * @param {number} width - the new width of the texture - * @param {number} height - the new height of the texture - */ - resize(width, height) - { - width = width | 0; - height = height | 0; - - if (this.size.width === width && this.size.height === height) - { - return; - } - - this.size.width = width; - this.size.height = height; - - this.defaultFrame.width = width; - this.defaultFrame.height = height; - - this.frameBuffer.resize(width * this.resolution, height * this.resolution); - - const projectionFrame = this.frame || this.size; - - this.calculateProjection(projectionFrame); - } - - /** - * Destroys the render target. - * - */ - destroy() - { - this.frameBuffer.destroy(); - - this.frameBuffer = null; - this.texture = null; - } -} diff --git a/packages/core/src/shader/defaultValue.js b/packages/core/src/shader/defaultValue.js new file mode 100644 index 0000000..847a069 --- /dev/null +++ b/packages/core/src/shader/defaultValue.js @@ -0,0 +1,78 @@ +function booleanArray(size) +{ + const array = new Array(size); + + for (let i = 0; i < array.length; i++) + { + array[i] = false; + } + + return array; +} + +/** + * @class + * @memberof PIXI.glCore.shader + * @param type {String} Type of value + * @param size {Number} + */ +export default function defaultValue(type, size) +{ + switch (type) + { + case 'float': + return 0; + + case 'vec2': + return new Float32Array(2 * size); + + case 'vec3': + return new Float32Array(3 * size); + + case 'vec4': + return new Float32Array(4 * size); + + case 'int': + case 'sampler2D': + return 0; + + case 'ivec2': + return new Int32Array(2 * size); + + case 'ivec3': + return new Int32Array(3 * size); + + case 'ivec4': + return new Int32Array(4 * size); + + case 'bool': + return false; + + case 'bvec2': + + return booleanArray(2 * size); + + case 'bvec3': + return booleanArray(3 * size); + + case 'bvec4': + return booleanArray(4 * size); + + case 'mat2': + return new Float32Array([1, 0, + 0, 1]); + + case 'mat3': + return new Float32Array([1, 0, 0, + 0, 1, 0, + 0, 0, 1]); + + case 'mat4': + return new Float32Array([1, 0, 0, 0, + 0, 1, 0, 0, + 0, 0, 1, 0, + 0, 0, 0, 1]); + } + + return 0; +} diff --git a/packages/core/src/shader/extractUniformsFromSrc.js b/packages/core/src/shader/extractUniformsFromSrc.js index 39737fd..3d02c0a 100644 --- a/packages/core/src/shader/extractUniformsFromSrc.js +++ b/packages/core/src/shader/extractUniformsFromSrc.js @@ -1,6 +1,4 @@ -import glCore from 'pixi-gl-core'; - -const defaultValue = glCore.shader.defaultValue; +import defaultValue from './defaultValue'; export default function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { diff --git a/bundles/pixi.js/src/index.js b/bundles/pixi.js/src/index.js index fb839a0..a879872 100644 --- a/bundles/pixi.js/src/index.js +++ b/bundles/pixi.js/src/index.js @@ -9,7 +9,7 @@ import * as loaders from '@pixi/loaders'; import * as math from '@pixi/math'; import * as mesh from '@pixi/mesh'; -import * as particles from '@pixi/particles'; +// import * as particles from '@pixi/particles'; import * as prepare from '@pixi/prepare'; import * as sprite from '@pixi/sprite'; import * as spriteAnimated from '@pixi/sprite-animated'; @@ -38,7 +38,7 @@ core.Renderer.registerPlugin('graphics', graphics.GraphicsRenderer); core.Renderer.registerPlugin('interaction', interaction.InteractionManager); core.Renderer.registerPlugin('mesh', mesh.MeshRenderer); -core.Renderer.registerPlugin('particle', particles.ParticleRenderer); +// core.Renderer.registerPlugin('particle', particles.ParticleRenderer); core.Renderer.registerPlugin('prepare', prepare.Prepare); core.Renderer.registerPlugin('sprite', sprite.SpriteRenderer); core.Renderer.registerPlugin('tilingSprite', spriteTiling.TilingSpriteRenderer); @@ -120,7 +120,7 @@ loaders, math, mesh, - particles, + // particles, sprite, spriteAnimated, spritesheet, diff --git a/packages/core/package.json b/packages/core/package.json index 30e2e83..7d01377 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -29,7 +29,6 @@ "earcut": "^2.0.7", "eventemitter3": "^2.0.0", "ismobilejs": "^0.4.0", - "pixi-gl-core": "^2.0.0-alpha", "mini-runner": "^1.0.1", "@pixi/math": "^5.0.0-alpha", "@pixi/constants": "^5.0.0-alpha", diff --git a/packages/core/src/index.js b/packages/core/src/index.js index 0951de6..8b8e67c 100644 --- a/packages/core/src/index.js +++ b/packages/core/src/index.js @@ -14,7 +14,6 @@ export { default as WebGLSystem } from './renderers/systems/WebGLSystem'; export { default as State } from './renderers/State'; export { default as ObjectRenderer } from './renderers/utils/ObjectRenderer'; -export { default as RenderTarget } from './renderers/utils/RenderTarget'; export { default as Quad } from './renderers/utils/Quad'; export { default as checkMaxIfStatmentsInShader } from './renderers/utils/checkMaxIfStatmentsInShader'; export { default as Shader } from './shader/Shader'; diff --git a/packages/core/src/renderers/Renderer.js b/packages/core/src/renderers/Renderer.js index 6967107..89ce25f 100644 --- a/packages/core/src/renderers/Renderer.js +++ b/packages/core/src/renderers/Renderer.js @@ -2,7 +2,7 @@ import { sayHello } from '@pixi/utils'; import MaskSystem from './systems/MaskSystem'; import StencilSystem from './systems/StencilSystem'; -import FilterSystem from './systems/FilterSystem'; +// import FilterSystem from './systems/FilterSystem'; import FramebufferSystem from './systems/FramebufferSystem'; import RenderTextureSystem from './systems/RenderTextureSystem'; import TextureSystem from './systems/textures/TextureSystem'; @@ -103,7 +103,7 @@ .addSystem(StencilSystem, 'stencil') .addSystem(ProjectionSystem, 'projection') // .addSystem(TextureGCSystem) - .addSystem(FilterSystem, 'filter') + // .addSystem(FilterSystem, 'filter') .addSystem(RenderTextureSystem, 'renderTexture') .addSystem(BatchSystem, 'batch'); diff --git a/packages/core/src/renderers/filters/Filter.js b/packages/core/src/renderers/filters/Filter.js index 06f1222..2d82c8e 100644 --- a/packages/core/src/renderers/filters/Filter.js +++ b/packages/core/src/renderers/filters/Filter.js @@ -3,7 +3,7 @@ import { BLEND_MODES } from '@pixi/constants'; import { settings } from '@pixi/settings'; import { uid } from '@pixi/utils'; -import extractUniformsFromSrc from './extractUniformsFromSrc'; +// import extractUniformsFromSrc from './extractUniformsFromSrc'; import defaultVertex from './defaultFilter.vert'; import defaultFragment from './defaultFilter.frag'; @@ -28,7 +28,8 @@ this._blendMode = BLEND_MODES.NORMAL; - this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms; + // || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); /** * An object containing the current values of custom uniforms. diff --git a/packages/core/src/renderers/filters/extractUniformsFromSrc.js b/packages/core/src/renderers/filters/extractUniformsFromSrc.js deleted file mode 100644 index 5ec7007..0000000 --- a/packages/core/src/renderers/filters/extractUniformsFromSrc.js +++ /dev/null @@ -1,58 +0,0 @@ -import glCore from 'pixi-gl-core'; - -const defaultValue = glCore.shader.defaultValue; - -export default function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) -{ - const vertUniforms = extractUniformsFromString(vertexSrc, mask); - const fragUniforms = extractUniformsFromString(fragmentSrc, mask); - - return Object.assign(vertUniforms, fragUniforms); -} - -function extractUniformsFromString(string) -{ - const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea|filterClamp)$'); - - const uniforms = {}; - let nameSplit; - - // clean the lines a little - remove extra spaces / tabs etc - // then split along ';' - const lines = string.replace(/\s+/g, ' ') - .split(/\s*;\s*/); - - // loop through.. - for (let i = 0; i < lines.length; i++) - { - const line = lines[i].trim(); - - if (line.indexOf('uniform') > -1) - { - const splitLine = line.split(' '); - const type = splitLine[1]; - - let name = splitLine[2]; - let size = 1; - - if (name.indexOf('[') > -1) - { - // array! - nameSplit = name.split(/\[|]/); - name = nameSplit[0]; - size *= Number(nameSplit[1]); - } - - if (!name.match(maskRegex)) - { - uniforms[name] = { - value: defaultValue(type, size), - name, - type, - }; - } - } - } - - return uniforms; -} diff --git a/packages/core/src/renderers/managers/BlendModeManager.js b/packages/core/src/renderers/managers/BlendModeManager.js deleted file mode 100644 index 7362ae7..0000000 --- a/packages/core/src/renderers/managers/BlendModeManager.js +++ /dev/null @@ -1,45 +0,0 @@ -import WebGLManager from './WebGLManager'; - -/** - * @class - * @memberof PIXI - * @extends PIXI.WebGLManager - */ -export default class BlendModeManager extends WebGLManager -{ - /** - * @param {PIXI.Renderer} renderer - The renderer this manager works for. - */ - constructor(renderer) - { - super(renderer); - - /** - * @member {number} - */ - this.currentBlendMode = 99999; - } - - /** - * Sets-up the given blendMode from WebGL's point of view. - * - * @param {number} blendMode - the blendMode, should be a PixiJS const, such as - * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. - * @return {boolean} Returns if the blend mode was changed. - */ - setBlendMode(blendMode) - { - if (this.currentBlendMode === blendMode) - { - return false; - } - - this.currentBlendMode = blendMode; - - const mode = this.renderer.blendModes[this.currentBlendMode]; - - this.renderer.gl.blendFunc(mode[0], mode[1]); - - return true; - } -} diff --git a/packages/core/src/renderers/systems/geometry/GLBuffer.js b/packages/core/src/renderers/systems/geometry/GLBuffer.js new file mode 100644 index 0000000..0477e8a --- /dev/null +++ b/packages/core/src/renderers/systems/geometry/GLBuffer.js @@ -0,0 +1,9 @@ +export default class GLBuffer +{ + constructor(buffer) + { + this.buffer = buffer; + this.updateID = -1; + this.byteLength = -1; + } +} diff --git a/packages/core/src/renderers/systems/geometry/GeometrySystem.js b/packages/core/src/renderers/systems/geometry/GeometrySystem.js index a972762..d205a6d 100644 --- a/packages/core/src/renderers/systems/geometry/GeometrySystem.js +++ b/packages/core/src/renderers/systems/geometry/GeometrySystem.js @@ -1,17 +1,8 @@ import WebGLSystem from '../WebGLSystem'; +import GLBuffer from './GLBuffer'; const byteSizeMap = { 5126: 4, 5123: 2, 5121: 1 }; -class GLBufferData -{ - constructor(buffer) - { - this.buffer = buffer; - this.updateID = -1; - this.byteLength = -1; - } -} - /** * @class * @extends PIXI.WebGLSystem @@ -269,7 +260,7 @@ if (!buffer._glBuffers[CONTEXT_UID]) { - buffer._glBuffers[CONTEXT_UID] = new GLBufferData(gl.createBuffer()); + buffer._glBuffers[CONTEXT_UID] = new GLBuffer(gl.createBuffer()); } } diff --git a/packages/core/src/renderers/systems/textures/GLTexture.js b/packages/core/src/renderers/systems/textures/GLTexture.js index ceeb379..3f5bf44 100644 --- a/packages/core/src/renderers/systems/textures/GLTexture.js +++ b/packages/core/src/renderers/systems/textures/GLTexture.js @@ -1,75 +1,16 @@ -let FLOATING_POINT_AVAILABLE = false; - -/** - * Helper class to create a WebGL Texture - * - * @class - * @memberof PIXI.glCore - * @param gl {WebGLRenderingContext} The current WebGL context - * @param width {number} the width of the texture - * @param height {number} the height of the texture - * @param format {number} the pixel format of the texture. defaults to gl.RGBA - * @param type {number} the gl type of the texture. defaults to gl.UNSIGNED_BYTE - */ -export default class Texture +export default class GLTexture { - constructor(gl, width, height, format, type) + constructor(texture) { /** - * The current WebGL rendering context - * - * @member {WebGLRenderingContext} - */ - this.gl = gl; - - /** * The WebGL texture * * @member {WebGLTexture} */ - this.texture = gl.createTexture(); + this.texture = texture; - /** - * GL texture is ready for mipmaps - * - * @member {Boolean} - */ - // some settings.. - this.mipmap = false; - - /** - * Set to true to enable pre-multiplied alpha - * - * @member {Boolean} - */ - this.premultiplyAlpha = false; - - /** - * The width of texture - * - * @member {Number} - */ - this.width = width || -1; - /** - * The height of texture - * - * @member {Number} - */ - this.height = height || -1; - - /** - * The pixel format of the texture. defaults to gl.RGBA - * - * @member {Number} - */ - this.format = format || gl.RGBA; - - /** - * The gl type of the texture. defaults to gl.UNSIGNED_BYTE - * - * @member {Number} - */ - this.type = type || gl.UNSIGNED_BYTE; + this.width = -1; + this.height = -1; /** * Texture contents dirty flag @@ -83,156 +24,4 @@ */ this.dirtyStyleId = -1; } - - /** - * Uploads this texture to the GPU - * @param source {HTMLImageElement|ImageData|HTMLVideoElement} the source image of the texture - */ - upload(source) - { - this.bind(); - - const gl = this.gl; - - gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, this.premultiplyAlpha); - - const newWidth = source.videoWidth || source.width; - const newHeight = source.videoHeight || source.height; - - if (newHeight !== this.height || newWidth !== this.width) - { - gl.texImage2D(gl.TEXTURE_2D, 0, this.format, this.format, this.type, source); - } - else - { - gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, this.format, this.type, source); - } - - // if the source is a video, we need to use the videoWidth / videoHeight - // properties as width / height will be incorrect. - this.width = newWidth; - this.height = newHeight; - } - - /** - * Use a data source and uploads this texture to the GPU - * @param data {TypedArray} the data to upload to the texture - * @param width {number} the new width of the texture - * @param height {number} the new height of the texture - */ - uploadData(data, width, height) - { - this.bind(); - - const gl = this.gl; - - if (data instanceof Float32Array) - { - if (!FLOATING_POINT_AVAILABLE) - { - const ext = gl.getExtension('OES_texture_float'); - - if (ext) - { - FLOATING_POINT_AVAILABLE = true; - } - else - { - throw new Error('floating point textures not available'); - } - } - - this.type = gl.FLOAT; - } - else - { - // TODO support for other types - this.type = this.type || gl.UNSIGNED_BYTE; - } - - // what type of data? - gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, this.premultiplyAlpha); - - if (width !== this.width || height !== this.height) - { - gl.texImage2D(gl.TEXTURE_2D, 0, this.format, width, height, 0, this.format, this.type, data || null); - } - else - { - gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, width, height, this.format, this.type, data || null); - } - - this.width = width; - this.height = height; - } - - /** - * Binds the texture - * @param location - */ - bind(location) - { - const gl = this.gl; - - if (location !== undefined) - { - gl.activeTexture(gl.TEXTURE0 + location); - } - - gl.bindTexture(gl.TEXTURE_2D, this.texture); - } - - /** - * Unbinds the texture - */ - unbind() - { - const gl = this.gl; - - gl.bindTexture(gl.TEXTURE_2D, null); - } - - /** - * Destroys this texture - */ - destroy() - { - const gl = this.gl; - // TODO - - gl.deleteTexture(this.texture); - } - - /** - * @static - * @param gl {WebGLRenderingContext} The current WebGL context - * @param source {HTMLImageElement|ImageData} the source image of the texture - * @param premultiplyAlpha {Boolean} If we want to use pre-multiplied alpha - */ - static fromSource(gl, source, premultiplyAlpha) - { - const texture = new Texture(gl); - - texture.premultiplyAlpha = premultiplyAlpha || false; - texture.upload(source); - - return texture; - } - - /** - * @static - * @param gl {WebGLRenderingContext} The current WebGL context - * @param data {TypedArray} the data to upload to the texture - * @param width {number} the new width of the texture - * @param height {number} the new height of the texture - */ - static fromData(gl, data, width, height) - { - // console.log(data, width, height); - const texture = new Texture(gl); - - texture.uploadData(data, width, height); - - return texture; - } } diff --git a/packages/core/src/renderers/systems/textures/TextureSystem.js b/packages/core/src/renderers/systems/textures/TextureSystem.js index b000db2..5c159e2 100644 --- a/packages/core/src/renderers/systems/textures/TextureSystem.js +++ b/packages/core/src/renderers/systems/textures/TextureSystem.js @@ -56,8 +56,13 @@ // TODO move this.. to a nice make empty textures class.. this.emptyTextures = {}; - this.emptyTextures[gl.TEXTURE_2D] = new GLTexture.fromData(this.gl, null, 1, 1); - this.emptyTextures[gl.TEXTURE_CUBE_MAP] = new GLTexture(this.gl); + const emptyTexture2D = new GLTexture(gl.createTexture()); + + gl.bindTexture(gl.TEXTURE_2D, emptyTexture2D.texture); + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array(4)); + + this.emptyTextures[gl.TEXTURE_2D] = emptyTexture2D; + this.emptyTextures[gl.TEXTURE_CUBE_MAP] = new GLTexture(gl.createTexture()); gl.bindTexture(gl.TEXTURE_CUBE_MAP, this.emptyTextures[gl.TEXTURE_CUBE_MAP].texture); @@ -136,9 +141,8 @@ initTexture(texture) { - const glTexture = new GLTexture(this.gl, -1, -1, texture.format, texture.type); + const glTexture = new GLTexture(this.gl.createTexture()); - glTexture.premultiplyAlpha = texture.premultiplyAlpha; // guarentee an update.. glTexture.dirtyId = -1; @@ -188,7 +192,7 @@ { this.unbind(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + texture._glTextures[this.renderer.CONTEXT_UID].texture.destroy(); texture.off('dispose', this.destroyTexture, this); delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -209,7 +213,6 @@ { const glTexture = texture._glTextures[this.CONTEXT_UID]; - glTexture.mipmap = texture.mipmap && texture.isPowerOfTwo; if (!glTexture) { return; @@ -223,14 +226,15 @@ { this.setStyle(texture, glTexture); } + glTexture.dirtyStyleId = texture.dirtyStyleId; } - setStyle(texture, glTexture) + setStyle(texture) { const gl = this.gl; - if (glTexture.mipmap) + if (texture.mipmap && texture.isPowerOfTwo) { gl.generateMipmap(texture.target); } @@ -238,7 +242,7 @@ gl.texParameteri(texture.target, gl.TEXTURE_WRAP_S, texture.wrapMode); gl.texParameteri(texture.target, gl.TEXTURE_WRAP_T, texture.wrapMode); - if (glTexture.mipmap) + if (texture.mipmap) { /* eslint-disable max-len */ gl.texParameteri(texture.target, gl.TEXTURE_MIN_FILTER, texture.scaleMode ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); diff --git a/packages/core/src/renderers/utils/RenderTarget.js b/packages/core/src/renderers/utils/RenderTarget.js deleted file mode 100644 index 3f129ed..0000000 --- a/packages/core/src/renderers/utils/RenderTarget.js +++ /dev/null @@ -1,326 +0,0 @@ -import { Rectangle, Matrix } from '@pixi/math'; -import { SCALE_MODES } from '@pixi/constants'; -import { settings } from '@pixi/settings'; -import { GLFramebuffer } from 'pixi-gl-core'; - -/** - * @class - * @memberof PIXI - */ -export default class RenderTarget -{ - /** - * @param {WebGLRenderingContext} gl - The current WebGL drawing context - * @param {number} [width=0] - the horizontal range of the filter - * @param {number} [height=0] - the vertical range of the filter - * @param {number} [scaleMode=PIXI.settings.SCALE_MODE] - See {@link PIXI.SCALE_MODES} for possible values - * @param {number} [resolution=1] - The current resolution / device pixel ratio - * @param {boolean} [root=false] - Whether this object is the root element or not - */ - constructor(gl, width, height, scaleMode, resolution, root) - { - // TODO Resolution could go here ( eg low res blurs ) - - /** - * The current WebGL drawing context. - * - * @member {WebGLRenderingContext} - */ - this.gl = gl; - - // next time to create a frame buffer and texture - - /** - * A frame buffer - * - * @member {PIXI.glCore.GLFramebuffer} - */ - this.frameBuffer = null; - - /** - * The texture - * - * @member {PIXI.glCore.GLTexture} - */ - this.texture = null; - - /** - * The background colour of this render target, as an array of [r,g,b,a] values - * - * @member {number[]} - */ - this.clearColor = [0, 0, 0, 0]; - - /** - * The size of the object as a rectangle - * - * @member {PIXI.Rectangle} - */ - this.size = new Rectangle(0, 0, 1, 1); - - /** - * The current resolution / device pixel ratio - * - * @member {number} - * @default 1 - */ - this.resolution = resolution || settings.RESOLUTION; - - /** - * The projection matrix - * - * @member {PIXI.Matrix} - */ - this.projectionMatrix = new Matrix(); - - /** - * The object's transform - * - * @member {PIXI.Matrix} - */ - this.transform = null; - - /** - * The frame. - * - * @member {PIXI.Rectangle} - */ - this.frame = null; - - /** - * The stencil buffer stores masking data for the render target - * - * @member {glCore.GLBuffer} - */ - this.defaultFrame = new Rectangle(); - this.destinationFrame = null; - this.sourceFrame = null; - - /** - * The stencil buffer stores masking data for the render target - * - * @member {glCore.GLBuffer} - */ - this.stencilBuffer = null; - - /** - * The data structure for the stencil masks - * - * @member {PIXI.Graphics[]} - */ - this.stencilMaskStack = []; - - /** - * Stores filter data for the render target - * - * @member {object[]} - */ - this.filterData = null; - - /** - * The scale mode. - * - * @member {number} - * @default PIXI.settings.SCALE_MODE - * @see PIXI.SCALE_MODES - */ - this.scaleMode = scaleMode !== undefined ? scaleMode : settings.SCALE_MODE; - - /** - * Whether this object is the root element or not - * - * @member {boolean} - */ - this.root = root; - - if (!this.root) - { - this.frameBuffer = GLFramebuffer.createRGBA(gl, 100, 100); - - if (this.scaleMode === SCALE_MODES.NEAREST) - { - this.frameBuffer.texture.enableNearestScaling(); - } - else - { - this.frameBuffer.texture.enableLinearScaling(); - } - /* - A frame buffer needs a target to render to.. - create a texture and bind it attach it to the framebuffer.. - */ - - // this is used by the base texture - this.texture = this.frameBuffer.texture; - } - else - { - // make it a null framebuffer.. - this.frameBuffer = new GLFramebuffer(gl, 100, 100); - this.frameBuffer.framebuffer = null; - } - - this.setFrame(); - - this.resize(width, height); - } - - /** - * Clears the filter texture. - * - * @param {number[]} [clearColor=this.clearColor] - Array of [r,g,b,a] to clear the framebuffer - */ - clear(clearColor) - { - const cc = clearColor || this.clearColor; - - this.frameBuffer.clear(cc[0], cc[1], cc[2], cc[3]);// r,g,b,a); - } - - /** - * Binds the stencil buffer. - * - */ - attachStencilBuffer() - { - // TODO check if stencil is done? - /** - * The stencil buffer is used for masking in pixi - * lets create one and then add attach it to the framebuffer.. - */ - if (!this.root) - { - this.frameBuffer.enableStencil(); - } - } - - /** - * Sets the frame of the render target. - * - * @param {Rectangle} destinationFrame - The destination frame. - * @param {Rectangle} sourceFrame - The source frame. - */ - setFrame(destinationFrame, sourceFrame) - { - this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; - } - - /** - * Binds the buffers and initialises the viewport. - * - */ - activate() - { - // TOOD refactor usage of frame.. - const gl = this.gl; - - // make sure the texture is unbound! - this.frameBuffer.bind(); - - this.calculateProjection(this.destinationFrame, this.sourceFrame); - - if (this.transform) - { - this.projectionMatrix.append(this.transform); - } - - // TODO add a check as them may be the same! - if (this.destinationFrame !== this.sourceFrame) - { - // gl.enable(gl.SCISSOR_TEST); - gl.scissor( - this.destinationFrame.x | 0, - this.destinationFrame.y | 0, - (this.destinationFrame.width * this.resolution) | 0, - (this.destinationFrame.height * this.resolution) | 0 - ); - } - else - { - // gl.disable(gl.SCISSOR_TEST); - } - - // TODO - does not need to be updated all the time?? - gl.viewport( - this.destinationFrame.x | 0, - this.destinationFrame.y | 0, - (this.destinationFrame.width * this.resolution) | 0, - (this.destinationFrame.height * this.resolution) | 0 - ); - } - - /** - * Updates the projection matrix based on a projection frame (which is a rectangle) - * - * @param {Rectangle} destinationFrame - The destination frame. - * @param {Rectangle} sourceFrame - The source frame. - */ - calculateProjection(destinationFrame, sourceFrame) - { - const pm = this.projectionMatrix; - - sourceFrame = sourceFrame || destinationFrame; - - pm.identity(); - - // TODO: make dest scale source - if (!this.root) - { - pm.a = 1 / destinationFrame.width * 2; - pm.d = 1 / destinationFrame.height * 2; - - pm.tx = -1 - (sourceFrame.x * pm.a); - pm.ty = -1 - (sourceFrame.y * pm.d); - } - else - { - pm.a = 1 / destinationFrame.width * 2; - pm.d = -1 / destinationFrame.height * 2; - - pm.tx = -1 - (sourceFrame.x * pm.a); - pm.ty = 1 - (sourceFrame.y * pm.d); - } - } - - /** - * Resizes the texture to the specified width and height - * - * @param {number} width - the new width of the texture - * @param {number} height - the new height of the texture - */ - resize(width, height) - { - width = width | 0; - height = height | 0; - - if (this.size.width === width && this.size.height === height) - { - return; - } - - this.size.width = width; - this.size.height = height; - - this.defaultFrame.width = width; - this.defaultFrame.height = height; - - this.frameBuffer.resize(width * this.resolution, height * this.resolution); - - const projectionFrame = this.frame || this.size; - - this.calculateProjection(projectionFrame); - } - - /** - * Destroys the render target. - * - */ - destroy() - { - this.frameBuffer.destroy(); - - this.frameBuffer = null; - this.texture = null; - } -} diff --git a/packages/core/src/shader/defaultValue.js b/packages/core/src/shader/defaultValue.js new file mode 100644 index 0000000..847a069 --- /dev/null +++ b/packages/core/src/shader/defaultValue.js @@ -0,0 +1,78 @@ +function booleanArray(size) +{ + const array = new Array(size); + + for (let i = 0; i < array.length; i++) + { + array[i] = false; + } + + return array; +} + +/** + * @class + * @memberof PIXI.glCore.shader + * @param type {String} Type of value + * @param size {Number} + */ +export default function defaultValue(type, size) +{ + switch (type) + { + case 'float': + return 0; + + case 'vec2': + return new Float32Array(2 * size); + + case 'vec3': + return new Float32Array(3 * size); + + case 'vec4': + return new Float32Array(4 * size); + + case 'int': + case 'sampler2D': + return 0; + + case 'ivec2': + return new Int32Array(2 * size); + + case 'ivec3': + return new Int32Array(3 * size); + + case 'ivec4': + return new Int32Array(4 * size); + + case 'bool': + return false; + + case 'bvec2': + + return booleanArray(2 * size); + + case 'bvec3': + return booleanArray(3 * size); + + case 'bvec4': + return booleanArray(4 * size); + + case 'mat2': + return new Float32Array([1, 0, + 0, 1]); + + case 'mat3': + return new Float32Array([1, 0, 0, + 0, 1, 0, + 0, 0, 1]); + + case 'mat4': + return new Float32Array([1, 0, 0, 0, + 0, 1, 0, 0, + 0, 0, 1, 0, + 0, 0, 0, 1]); + } + + return 0; +} diff --git a/packages/core/src/shader/extractUniformsFromSrc.js b/packages/core/src/shader/extractUniformsFromSrc.js index 39737fd..3d02c0a 100644 --- a/packages/core/src/shader/extractUniformsFromSrc.js +++ b/packages/core/src/shader/extractUniformsFromSrc.js @@ -1,6 +1,4 @@ -import glCore from 'pixi-gl-core'; - -const defaultValue = glCore.shader.defaultValue; +import defaultValue from './defaultValue'; export default function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { diff --git a/packages/core/src/textures/resources/BaseImageResource.js b/packages/core/src/textures/resources/BaseImageResource.js index 6e490fa..c3012b9 100644 --- a/packages/core/src/textures/resources/BaseImageResource.js +++ b/packages/core/src/textures/resources/BaseImageResource.js @@ -48,13 +48,27 @@ * @param {PIXI.Renderer} renderer Upload to the renderer * @param {PIXI.BaseTexture} baseTexture Reference to parent texture * @param {PIXI.glCore.GLTexture} glTexture Reference + * @param {HTMLImageElement|HTMLCanvasElement|HTMLVideoElement|SVGElement} source (optional) */ - upload(renderer, baseTexture, glTexture) + upload(renderer, baseTexture, glTexture, source) { - // TODO: move glTexture.upload somewhere else - glTexture.format = baseTexture.format; - glTexture.type = baseTexture.type; - glTexture.upload(this.source); + const gl = renderer.gl; + + source = source || this.source; + + gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, baseTexture.premultiplyAlpha); + + if (glTexture.width === baseTexture.width && glTexture.height === baseTexture.height) + { + gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, baseTexture.format, baseTexture.type, source); + } + else + { + glTexture.width = baseTexture.width; + glTexture.height = baseTexture.height; + + gl.texImage2D(gl.TEXTURE_2D, 0, baseTexture.format, baseTexture.format, baseTexture.type, source); + } return true; } diff --git a/bundles/pixi.js/src/index.js b/bundles/pixi.js/src/index.js index fb839a0..a879872 100644 --- a/bundles/pixi.js/src/index.js +++ b/bundles/pixi.js/src/index.js @@ -9,7 +9,7 @@ import * as loaders from '@pixi/loaders'; import * as math from '@pixi/math'; import * as mesh from '@pixi/mesh'; -import * as particles from '@pixi/particles'; +// import * as particles from '@pixi/particles'; import * as prepare from '@pixi/prepare'; import * as sprite from '@pixi/sprite'; import * as spriteAnimated from '@pixi/sprite-animated'; @@ -38,7 +38,7 @@ core.Renderer.registerPlugin('graphics', graphics.GraphicsRenderer); core.Renderer.registerPlugin('interaction', interaction.InteractionManager); core.Renderer.registerPlugin('mesh', mesh.MeshRenderer); -core.Renderer.registerPlugin('particle', particles.ParticleRenderer); +// core.Renderer.registerPlugin('particle', particles.ParticleRenderer); core.Renderer.registerPlugin('prepare', prepare.Prepare); core.Renderer.registerPlugin('sprite', sprite.SpriteRenderer); core.Renderer.registerPlugin('tilingSprite', spriteTiling.TilingSpriteRenderer); @@ -120,7 +120,7 @@ loaders, math, mesh, - particles, + // particles, sprite, spriteAnimated, spritesheet, diff --git a/packages/core/package.json b/packages/core/package.json index 30e2e83..7d01377 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -29,7 +29,6 @@ "earcut": "^2.0.7", "eventemitter3": "^2.0.0", "ismobilejs": "^0.4.0", - "pixi-gl-core": "^2.0.0-alpha", "mini-runner": "^1.0.1", "@pixi/math": "^5.0.0-alpha", "@pixi/constants": "^5.0.0-alpha", diff --git a/packages/core/src/index.js b/packages/core/src/index.js index 0951de6..8b8e67c 100644 --- a/packages/core/src/index.js +++ b/packages/core/src/index.js @@ -14,7 +14,6 @@ export { default as WebGLSystem } from './renderers/systems/WebGLSystem'; export { default as State } from './renderers/State'; export { default as ObjectRenderer } from './renderers/utils/ObjectRenderer'; -export { default as RenderTarget } from './renderers/utils/RenderTarget'; export { default as Quad } from './renderers/utils/Quad'; export { default as checkMaxIfStatmentsInShader } from './renderers/utils/checkMaxIfStatmentsInShader'; export { default as Shader } from './shader/Shader'; diff --git a/packages/core/src/renderers/Renderer.js b/packages/core/src/renderers/Renderer.js index 6967107..89ce25f 100644 --- a/packages/core/src/renderers/Renderer.js +++ b/packages/core/src/renderers/Renderer.js @@ -2,7 +2,7 @@ import { sayHello } from '@pixi/utils'; import MaskSystem from './systems/MaskSystem'; import StencilSystem from './systems/StencilSystem'; -import FilterSystem from './systems/FilterSystem'; +// import FilterSystem from './systems/FilterSystem'; import FramebufferSystem from './systems/FramebufferSystem'; import RenderTextureSystem from './systems/RenderTextureSystem'; import TextureSystem from './systems/textures/TextureSystem'; @@ -103,7 +103,7 @@ .addSystem(StencilSystem, 'stencil') .addSystem(ProjectionSystem, 'projection') // .addSystem(TextureGCSystem) - .addSystem(FilterSystem, 'filter') + // .addSystem(FilterSystem, 'filter') .addSystem(RenderTextureSystem, 'renderTexture') .addSystem(BatchSystem, 'batch'); diff --git a/packages/core/src/renderers/filters/Filter.js b/packages/core/src/renderers/filters/Filter.js index 06f1222..2d82c8e 100644 --- a/packages/core/src/renderers/filters/Filter.js +++ b/packages/core/src/renderers/filters/Filter.js @@ -3,7 +3,7 @@ import { BLEND_MODES } from '@pixi/constants'; import { settings } from '@pixi/settings'; import { uid } from '@pixi/utils'; -import extractUniformsFromSrc from './extractUniformsFromSrc'; +// import extractUniformsFromSrc from './extractUniformsFromSrc'; import defaultVertex from './defaultFilter.vert'; import defaultFragment from './defaultFilter.frag'; @@ -28,7 +28,8 @@ this._blendMode = BLEND_MODES.NORMAL; - this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms; + // || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); /** * An object containing the current values of custom uniforms. diff --git a/packages/core/src/renderers/filters/extractUniformsFromSrc.js b/packages/core/src/renderers/filters/extractUniformsFromSrc.js deleted file mode 100644 index 5ec7007..0000000 --- a/packages/core/src/renderers/filters/extractUniformsFromSrc.js +++ /dev/null @@ -1,58 +0,0 @@ -import glCore from 'pixi-gl-core'; - -const defaultValue = glCore.shader.defaultValue; - -export default function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) -{ - const vertUniforms = extractUniformsFromString(vertexSrc, mask); - const fragUniforms = extractUniformsFromString(fragmentSrc, mask); - - return Object.assign(vertUniforms, fragUniforms); -} - -function extractUniformsFromString(string) -{ - const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea|filterClamp)$'); - - const uniforms = {}; - let nameSplit; - - // clean the lines a little - remove extra spaces / tabs etc - // then split along ';' - const lines = string.replace(/\s+/g, ' ') - .split(/\s*;\s*/); - - // loop through.. - for (let i = 0; i < lines.length; i++) - { - const line = lines[i].trim(); - - if (line.indexOf('uniform') > -1) - { - const splitLine = line.split(' '); - const type = splitLine[1]; - - let name = splitLine[2]; - let size = 1; - - if (name.indexOf('[') > -1) - { - // array! - nameSplit = name.split(/\[|]/); - name = nameSplit[0]; - size *= Number(nameSplit[1]); - } - - if (!name.match(maskRegex)) - { - uniforms[name] = { - value: defaultValue(type, size), - name, - type, - }; - } - } - } - - return uniforms; -} diff --git a/packages/core/src/renderers/managers/BlendModeManager.js b/packages/core/src/renderers/managers/BlendModeManager.js deleted file mode 100644 index 7362ae7..0000000 --- a/packages/core/src/renderers/managers/BlendModeManager.js +++ /dev/null @@ -1,45 +0,0 @@ -import WebGLManager from './WebGLManager'; - -/** - * @class - * @memberof PIXI - * @extends PIXI.WebGLManager - */ -export default class BlendModeManager extends WebGLManager -{ - /** - * @param {PIXI.Renderer} renderer - The renderer this manager works for. - */ - constructor(renderer) - { - super(renderer); - - /** - * @member {number} - */ - this.currentBlendMode = 99999; - } - - /** - * Sets-up the given blendMode from WebGL's point of view. - * - * @param {number} blendMode - the blendMode, should be a PixiJS const, such as - * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. - * @return {boolean} Returns if the blend mode was changed. - */ - setBlendMode(blendMode) - { - if (this.currentBlendMode === blendMode) - { - return false; - } - - this.currentBlendMode = blendMode; - - const mode = this.renderer.blendModes[this.currentBlendMode]; - - this.renderer.gl.blendFunc(mode[0], mode[1]); - - return true; - } -} diff --git a/packages/core/src/renderers/systems/geometry/GLBuffer.js b/packages/core/src/renderers/systems/geometry/GLBuffer.js new file mode 100644 index 0000000..0477e8a --- /dev/null +++ b/packages/core/src/renderers/systems/geometry/GLBuffer.js @@ -0,0 +1,9 @@ +export default class GLBuffer +{ + constructor(buffer) + { + this.buffer = buffer; + this.updateID = -1; + this.byteLength = -1; + } +} diff --git a/packages/core/src/renderers/systems/geometry/GeometrySystem.js b/packages/core/src/renderers/systems/geometry/GeometrySystem.js index a972762..d205a6d 100644 --- a/packages/core/src/renderers/systems/geometry/GeometrySystem.js +++ b/packages/core/src/renderers/systems/geometry/GeometrySystem.js @@ -1,17 +1,8 @@ import WebGLSystem from '../WebGLSystem'; +import GLBuffer from './GLBuffer'; const byteSizeMap = { 5126: 4, 5123: 2, 5121: 1 }; -class GLBufferData -{ - constructor(buffer) - { - this.buffer = buffer; - this.updateID = -1; - this.byteLength = -1; - } -} - /** * @class * @extends PIXI.WebGLSystem @@ -269,7 +260,7 @@ if (!buffer._glBuffers[CONTEXT_UID]) { - buffer._glBuffers[CONTEXT_UID] = new GLBufferData(gl.createBuffer()); + buffer._glBuffers[CONTEXT_UID] = new GLBuffer(gl.createBuffer()); } } diff --git a/packages/core/src/renderers/systems/textures/GLTexture.js b/packages/core/src/renderers/systems/textures/GLTexture.js index ceeb379..3f5bf44 100644 --- a/packages/core/src/renderers/systems/textures/GLTexture.js +++ b/packages/core/src/renderers/systems/textures/GLTexture.js @@ -1,75 +1,16 @@ -let FLOATING_POINT_AVAILABLE = false; - -/** - * Helper class to create a WebGL Texture - * - * @class - * @memberof PIXI.glCore - * @param gl {WebGLRenderingContext} The current WebGL context - * @param width {number} the width of the texture - * @param height {number} the height of the texture - * @param format {number} the pixel format of the texture. defaults to gl.RGBA - * @param type {number} the gl type of the texture. defaults to gl.UNSIGNED_BYTE - */ -export default class Texture +export default class GLTexture { - constructor(gl, width, height, format, type) + constructor(texture) { /** - * The current WebGL rendering context - * - * @member {WebGLRenderingContext} - */ - this.gl = gl; - - /** * The WebGL texture * * @member {WebGLTexture} */ - this.texture = gl.createTexture(); + this.texture = texture; - /** - * GL texture is ready for mipmaps - * - * @member {Boolean} - */ - // some settings.. - this.mipmap = false; - - /** - * Set to true to enable pre-multiplied alpha - * - * @member {Boolean} - */ - this.premultiplyAlpha = false; - - /** - * The width of texture - * - * @member {Number} - */ - this.width = width || -1; - /** - * The height of texture - * - * @member {Number} - */ - this.height = height || -1; - - /** - * The pixel format of the texture. defaults to gl.RGBA - * - * @member {Number} - */ - this.format = format || gl.RGBA; - - /** - * The gl type of the texture. defaults to gl.UNSIGNED_BYTE - * - * @member {Number} - */ - this.type = type || gl.UNSIGNED_BYTE; + this.width = -1; + this.height = -1; /** * Texture contents dirty flag @@ -83,156 +24,4 @@ */ this.dirtyStyleId = -1; } - - /** - * Uploads this texture to the GPU - * @param source {HTMLImageElement|ImageData|HTMLVideoElement} the source image of the texture - */ - upload(source) - { - this.bind(); - - const gl = this.gl; - - gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, this.premultiplyAlpha); - - const newWidth = source.videoWidth || source.width; - const newHeight = source.videoHeight || source.height; - - if (newHeight !== this.height || newWidth !== this.width) - { - gl.texImage2D(gl.TEXTURE_2D, 0, this.format, this.format, this.type, source); - } - else - { - gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, this.format, this.type, source); - } - - // if the source is a video, we need to use the videoWidth / videoHeight - // properties as width / height will be incorrect. - this.width = newWidth; - this.height = newHeight; - } - - /** - * Use a data source and uploads this texture to the GPU - * @param data {TypedArray} the data to upload to the texture - * @param width {number} the new width of the texture - * @param height {number} the new height of the texture - */ - uploadData(data, width, height) - { - this.bind(); - - const gl = this.gl; - - if (data instanceof Float32Array) - { - if (!FLOATING_POINT_AVAILABLE) - { - const ext = gl.getExtension('OES_texture_float'); - - if (ext) - { - FLOATING_POINT_AVAILABLE = true; - } - else - { - throw new Error('floating point textures not available'); - } - } - - this.type = gl.FLOAT; - } - else - { - // TODO support for other types - this.type = this.type || gl.UNSIGNED_BYTE; - } - - // what type of data? - gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, this.premultiplyAlpha); - - if (width !== this.width || height !== this.height) - { - gl.texImage2D(gl.TEXTURE_2D, 0, this.format, width, height, 0, this.format, this.type, data || null); - } - else - { - gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, width, height, this.format, this.type, data || null); - } - - this.width = width; - this.height = height; - } - - /** - * Binds the texture - * @param location - */ - bind(location) - { - const gl = this.gl; - - if (location !== undefined) - { - gl.activeTexture(gl.TEXTURE0 + location); - } - - gl.bindTexture(gl.TEXTURE_2D, this.texture); - } - - /** - * Unbinds the texture - */ - unbind() - { - const gl = this.gl; - - gl.bindTexture(gl.TEXTURE_2D, null); - } - - /** - * Destroys this texture - */ - destroy() - { - const gl = this.gl; - // TODO - - gl.deleteTexture(this.texture); - } - - /** - * @static - * @param gl {WebGLRenderingContext} The current WebGL context - * @param source {HTMLImageElement|ImageData} the source image of the texture - * @param premultiplyAlpha {Boolean} If we want to use pre-multiplied alpha - */ - static fromSource(gl, source, premultiplyAlpha) - { - const texture = new Texture(gl); - - texture.premultiplyAlpha = premultiplyAlpha || false; - texture.upload(source); - - return texture; - } - - /** - * @static - * @param gl {WebGLRenderingContext} The current WebGL context - * @param data {TypedArray} the data to upload to the texture - * @param width {number} the new width of the texture - * @param height {number} the new height of the texture - */ - static fromData(gl, data, width, height) - { - // console.log(data, width, height); - const texture = new Texture(gl); - - texture.uploadData(data, width, height); - - return texture; - } } diff --git a/packages/core/src/renderers/systems/textures/TextureSystem.js b/packages/core/src/renderers/systems/textures/TextureSystem.js index b000db2..5c159e2 100644 --- a/packages/core/src/renderers/systems/textures/TextureSystem.js +++ b/packages/core/src/renderers/systems/textures/TextureSystem.js @@ -56,8 +56,13 @@ // TODO move this.. to a nice make empty textures class.. this.emptyTextures = {}; - this.emptyTextures[gl.TEXTURE_2D] = new GLTexture.fromData(this.gl, null, 1, 1); - this.emptyTextures[gl.TEXTURE_CUBE_MAP] = new GLTexture(this.gl); + const emptyTexture2D = new GLTexture(gl.createTexture()); + + gl.bindTexture(gl.TEXTURE_2D, emptyTexture2D.texture); + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array(4)); + + this.emptyTextures[gl.TEXTURE_2D] = emptyTexture2D; + this.emptyTextures[gl.TEXTURE_CUBE_MAP] = new GLTexture(gl.createTexture()); gl.bindTexture(gl.TEXTURE_CUBE_MAP, this.emptyTextures[gl.TEXTURE_CUBE_MAP].texture); @@ -136,9 +141,8 @@ initTexture(texture) { - const glTexture = new GLTexture(this.gl, -1, -1, texture.format, texture.type); + const glTexture = new GLTexture(this.gl.createTexture()); - glTexture.premultiplyAlpha = texture.premultiplyAlpha; // guarentee an update.. glTexture.dirtyId = -1; @@ -188,7 +192,7 @@ { this.unbind(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + texture._glTextures[this.renderer.CONTEXT_UID].texture.destroy(); texture.off('dispose', this.destroyTexture, this); delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -209,7 +213,6 @@ { const glTexture = texture._glTextures[this.CONTEXT_UID]; - glTexture.mipmap = texture.mipmap && texture.isPowerOfTwo; if (!glTexture) { return; @@ -223,14 +226,15 @@ { this.setStyle(texture, glTexture); } + glTexture.dirtyStyleId = texture.dirtyStyleId; } - setStyle(texture, glTexture) + setStyle(texture) { const gl = this.gl; - if (glTexture.mipmap) + if (texture.mipmap && texture.isPowerOfTwo) { gl.generateMipmap(texture.target); } @@ -238,7 +242,7 @@ gl.texParameteri(texture.target, gl.TEXTURE_WRAP_S, texture.wrapMode); gl.texParameteri(texture.target, gl.TEXTURE_WRAP_T, texture.wrapMode); - if (glTexture.mipmap) + if (texture.mipmap) { /* eslint-disable max-len */ gl.texParameteri(texture.target, gl.TEXTURE_MIN_FILTER, texture.scaleMode ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); diff --git a/packages/core/src/renderers/utils/RenderTarget.js b/packages/core/src/renderers/utils/RenderTarget.js deleted file mode 100644 index 3f129ed..0000000 --- a/packages/core/src/renderers/utils/RenderTarget.js +++ /dev/null @@ -1,326 +0,0 @@ -import { Rectangle, Matrix } from '@pixi/math'; -import { SCALE_MODES } from '@pixi/constants'; -import { settings } from '@pixi/settings'; -import { GLFramebuffer } from 'pixi-gl-core'; - -/** - * @class - * @memberof PIXI - */ -export default class RenderTarget -{ - /** - * @param {WebGLRenderingContext} gl - The current WebGL drawing context - * @param {number} [width=0] - the horizontal range of the filter - * @param {number} [height=0] - the vertical range of the filter - * @param {number} [scaleMode=PIXI.settings.SCALE_MODE] - See {@link PIXI.SCALE_MODES} for possible values - * @param {number} [resolution=1] - The current resolution / device pixel ratio - * @param {boolean} [root=false] - Whether this object is the root element or not - */ - constructor(gl, width, height, scaleMode, resolution, root) - { - // TODO Resolution could go here ( eg low res blurs ) - - /** - * The current WebGL drawing context. - * - * @member {WebGLRenderingContext} - */ - this.gl = gl; - - // next time to create a frame buffer and texture - - /** - * A frame buffer - * - * @member {PIXI.glCore.GLFramebuffer} - */ - this.frameBuffer = null; - - /** - * The texture - * - * @member {PIXI.glCore.GLTexture} - */ - this.texture = null; - - /** - * The background colour of this render target, as an array of [r,g,b,a] values - * - * @member {number[]} - */ - this.clearColor = [0, 0, 0, 0]; - - /** - * The size of the object as a rectangle - * - * @member {PIXI.Rectangle} - */ - this.size = new Rectangle(0, 0, 1, 1); - - /** - * The current resolution / device pixel ratio - * - * @member {number} - * @default 1 - */ - this.resolution = resolution || settings.RESOLUTION; - - /** - * The projection matrix - * - * @member {PIXI.Matrix} - */ - this.projectionMatrix = new Matrix(); - - /** - * The object's transform - * - * @member {PIXI.Matrix} - */ - this.transform = null; - - /** - * The frame. - * - * @member {PIXI.Rectangle} - */ - this.frame = null; - - /** - * The stencil buffer stores masking data for the render target - * - * @member {glCore.GLBuffer} - */ - this.defaultFrame = new Rectangle(); - this.destinationFrame = null; - this.sourceFrame = null; - - /** - * The stencil buffer stores masking data for the render target - * - * @member {glCore.GLBuffer} - */ - this.stencilBuffer = null; - - /** - * The data structure for the stencil masks - * - * @member {PIXI.Graphics[]} - */ - this.stencilMaskStack = []; - - /** - * Stores filter data for the render target - * - * @member {object[]} - */ - this.filterData = null; - - /** - * The scale mode. - * - * @member {number} - * @default PIXI.settings.SCALE_MODE - * @see PIXI.SCALE_MODES - */ - this.scaleMode = scaleMode !== undefined ? scaleMode : settings.SCALE_MODE; - - /** - * Whether this object is the root element or not - * - * @member {boolean} - */ - this.root = root; - - if (!this.root) - { - this.frameBuffer = GLFramebuffer.createRGBA(gl, 100, 100); - - if (this.scaleMode === SCALE_MODES.NEAREST) - { - this.frameBuffer.texture.enableNearestScaling(); - } - else - { - this.frameBuffer.texture.enableLinearScaling(); - } - /* - A frame buffer needs a target to render to.. - create a texture and bind it attach it to the framebuffer.. - */ - - // this is used by the base texture - this.texture = this.frameBuffer.texture; - } - else - { - // make it a null framebuffer.. - this.frameBuffer = new GLFramebuffer(gl, 100, 100); - this.frameBuffer.framebuffer = null; - } - - this.setFrame(); - - this.resize(width, height); - } - - /** - * Clears the filter texture. - * - * @param {number[]} [clearColor=this.clearColor] - Array of [r,g,b,a] to clear the framebuffer - */ - clear(clearColor) - { - const cc = clearColor || this.clearColor; - - this.frameBuffer.clear(cc[0], cc[1], cc[2], cc[3]);// r,g,b,a); - } - - /** - * Binds the stencil buffer. - * - */ - attachStencilBuffer() - { - // TODO check if stencil is done? - /** - * The stencil buffer is used for masking in pixi - * lets create one and then add attach it to the framebuffer.. - */ - if (!this.root) - { - this.frameBuffer.enableStencil(); - } - } - - /** - * Sets the frame of the render target. - * - * @param {Rectangle} destinationFrame - The destination frame. - * @param {Rectangle} sourceFrame - The source frame. - */ - setFrame(destinationFrame, sourceFrame) - { - this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; - } - - /** - * Binds the buffers and initialises the viewport. - * - */ - activate() - { - // TOOD refactor usage of frame.. - const gl = this.gl; - - // make sure the texture is unbound! - this.frameBuffer.bind(); - - this.calculateProjection(this.destinationFrame, this.sourceFrame); - - if (this.transform) - { - this.projectionMatrix.append(this.transform); - } - - // TODO add a check as them may be the same! - if (this.destinationFrame !== this.sourceFrame) - { - // gl.enable(gl.SCISSOR_TEST); - gl.scissor( - this.destinationFrame.x | 0, - this.destinationFrame.y | 0, - (this.destinationFrame.width * this.resolution) | 0, - (this.destinationFrame.height * this.resolution) | 0 - ); - } - else - { - // gl.disable(gl.SCISSOR_TEST); - } - - // TODO - does not need to be updated all the time?? - gl.viewport( - this.destinationFrame.x | 0, - this.destinationFrame.y | 0, - (this.destinationFrame.width * this.resolution) | 0, - (this.destinationFrame.height * this.resolution) | 0 - ); - } - - /** - * Updates the projection matrix based on a projection frame (which is a rectangle) - * - * @param {Rectangle} destinationFrame - The destination frame. - * @param {Rectangle} sourceFrame - The source frame. - */ - calculateProjection(destinationFrame, sourceFrame) - { - const pm = this.projectionMatrix; - - sourceFrame = sourceFrame || destinationFrame; - - pm.identity(); - - // TODO: make dest scale source - if (!this.root) - { - pm.a = 1 / destinationFrame.width * 2; - pm.d = 1 / destinationFrame.height * 2; - - pm.tx = -1 - (sourceFrame.x * pm.a); - pm.ty = -1 - (sourceFrame.y * pm.d); - } - else - { - pm.a = 1 / destinationFrame.width * 2; - pm.d = -1 / destinationFrame.height * 2; - - pm.tx = -1 - (sourceFrame.x * pm.a); - pm.ty = 1 - (sourceFrame.y * pm.d); - } - } - - /** - * Resizes the texture to the specified width and height - * - * @param {number} width - the new width of the texture - * @param {number} height - the new height of the texture - */ - resize(width, height) - { - width = width | 0; - height = height | 0; - - if (this.size.width === width && this.size.height === height) - { - return; - } - - this.size.width = width; - this.size.height = height; - - this.defaultFrame.width = width; - this.defaultFrame.height = height; - - this.frameBuffer.resize(width * this.resolution, height * this.resolution); - - const projectionFrame = this.frame || this.size; - - this.calculateProjection(projectionFrame); - } - - /** - * Destroys the render target. - * - */ - destroy() - { - this.frameBuffer.destroy(); - - this.frameBuffer = null; - this.texture = null; - } -} diff --git a/packages/core/src/shader/defaultValue.js b/packages/core/src/shader/defaultValue.js new file mode 100644 index 0000000..847a069 --- /dev/null +++ b/packages/core/src/shader/defaultValue.js @@ -0,0 +1,78 @@ +function booleanArray(size) +{ + const array = new Array(size); + + for (let i = 0; i < array.length; i++) + { + array[i] = false; + } + + return array; +} + +/** + * @class + * @memberof PIXI.glCore.shader + * @param type {String} Type of value + * @param size {Number} + */ +export default function defaultValue(type, size) +{ + switch (type) + { + case 'float': + return 0; + + case 'vec2': + return new Float32Array(2 * size); + + case 'vec3': + return new Float32Array(3 * size); + + case 'vec4': + return new Float32Array(4 * size); + + case 'int': + case 'sampler2D': + return 0; + + case 'ivec2': + return new Int32Array(2 * size); + + case 'ivec3': + return new Int32Array(3 * size); + + case 'ivec4': + return new Int32Array(4 * size); + + case 'bool': + return false; + + case 'bvec2': + + return booleanArray(2 * size); + + case 'bvec3': + return booleanArray(3 * size); + + case 'bvec4': + return booleanArray(4 * size); + + case 'mat2': + return new Float32Array([1, 0, + 0, 1]); + + case 'mat3': + return new Float32Array([1, 0, 0, + 0, 1, 0, + 0, 0, 1]); + + case 'mat4': + return new Float32Array([1, 0, 0, 0, + 0, 1, 0, 0, + 0, 0, 1, 0, + 0, 0, 0, 1]); + } + + return 0; +} diff --git a/packages/core/src/shader/extractUniformsFromSrc.js b/packages/core/src/shader/extractUniformsFromSrc.js index 39737fd..3d02c0a 100644 --- a/packages/core/src/shader/extractUniformsFromSrc.js +++ b/packages/core/src/shader/extractUniformsFromSrc.js @@ -1,6 +1,4 @@ -import glCore from 'pixi-gl-core'; - -const defaultValue = glCore.shader.defaultValue; +import defaultValue from './defaultValue'; export default function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { diff --git a/packages/core/src/textures/resources/BaseImageResource.js b/packages/core/src/textures/resources/BaseImageResource.js index 6e490fa..c3012b9 100644 --- a/packages/core/src/textures/resources/BaseImageResource.js +++ b/packages/core/src/textures/resources/BaseImageResource.js @@ -48,13 +48,27 @@ * @param {PIXI.Renderer} renderer Upload to the renderer * @param {PIXI.BaseTexture} baseTexture Reference to parent texture * @param {PIXI.glCore.GLTexture} glTexture Reference + * @param {HTMLImageElement|HTMLCanvasElement|HTMLVideoElement|SVGElement} source (optional) */ - upload(renderer, baseTexture, glTexture) + upload(renderer, baseTexture, glTexture, source) { - // TODO: move glTexture.upload somewhere else - glTexture.format = baseTexture.format; - glTexture.type = baseTexture.type; - glTexture.upload(this.source); + const gl = renderer.gl; + + source = source || this.source; + + gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, baseTexture.premultiplyAlpha); + + if (glTexture.width === baseTexture.width && glTexture.height === baseTexture.height) + { + gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, baseTexture.format, baseTexture.type, source); + } + else + { + glTexture.width = baseTexture.width; + glTexture.height = baseTexture.height; + + gl.texImage2D(gl.TEXTURE_2D, 0, baseTexture.format, baseTexture.format, baseTexture.type, source); + } return true; } diff --git a/packages/core/src/textures/resources/BufferResource.js b/packages/core/src/textures/resources/BufferResource.js index 7f1c12c..7ddfd9c 100644 --- a/packages/core/src/textures/resources/BufferResource.js +++ b/packages/core/src/textures/resources/BufferResource.js @@ -39,19 +39,43 @@ * @param {PIXI.Renderer} renderer Upload to the renderer * @param {PIXI.BaseTexture} baseTexture Reference to parent texture */ - upload(renderer, baseTexture) + upload(renderer, baseTexture, glTexture) { - renderer.gl.texImage2D( - baseTexture.target, - 0, - baseTexture.format, - baseTexture.width, - baseTexture.height, - 0, - baseTexture.format, - baseTexture.type, - this.data - ); + const gl = renderer.gl; + + gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, baseTexture.premultiplyAlpha); + + if (glTexture.width === baseTexture.width && glTexture.height === baseTexture.height) + { + gl.texSubImage2D( + baseTexture.target, + 0, + 0, + 0, + baseTexture.width, + baseTexture.height, + baseTexture.format, + baseTexture.type, + this.data + ); + } + else + { + glTexture.width = baseTexture.width; + glTexture.height = baseTexture.height; + + gl.texImage2D( + baseTexture.target, + 0, + baseTexture.format, + baseTexture.width, + baseTexture.height, + 0, + baseTexture.format, + baseTexture.type, + this.data + ); + } return true; } diff --git a/bundles/pixi.js/src/index.js b/bundles/pixi.js/src/index.js index fb839a0..a879872 100644 --- a/bundles/pixi.js/src/index.js +++ b/bundles/pixi.js/src/index.js @@ -9,7 +9,7 @@ import * as loaders from '@pixi/loaders'; import * as math from '@pixi/math'; import * as mesh from '@pixi/mesh'; -import * as particles from '@pixi/particles'; +// import * as particles from '@pixi/particles'; import * as prepare from '@pixi/prepare'; import * as sprite from '@pixi/sprite'; import * as spriteAnimated from '@pixi/sprite-animated'; @@ -38,7 +38,7 @@ core.Renderer.registerPlugin('graphics', graphics.GraphicsRenderer); core.Renderer.registerPlugin('interaction', interaction.InteractionManager); core.Renderer.registerPlugin('mesh', mesh.MeshRenderer); -core.Renderer.registerPlugin('particle', particles.ParticleRenderer); +// core.Renderer.registerPlugin('particle', particles.ParticleRenderer); core.Renderer.registerPlugin('prepare', prepare.Prepare); core.Renderer.registerPlugin('sprite', sprite.SpriteRenderer); core.Renderer.registerPlugin('tilingSprite', spriteTiling.TilingSpriteRenderer); @@ -120,7 +120,7 @@ loaders, math, mesh, - particles, + // particles, sprite, spriteAnimated, spritesheet, diff --git a/packages/core/package.json b/packages/core/package.json index 30e2e83..7d01377 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -29,7 +29,6 @@ "earcut": "^2.0.7", "eventemitter3": "^2.0.0", "ismobilejs": "^0.4.0", - "pixi-gl-core": "^2.0.0-alpha", "mini-runner": "^1.0.1", "@pixi/math": "^5.0.0-alpha", "@pixi/constants": "^5.0.0-alpha", diff --git a/packages/core/src/index.js b/packages/core/src/index.js index 0951de6..8b8e67c 100644 --- a/packages/core/src/index.js +++ b/packages/core/src/index.js @@ -14,7 +14,6 @@ export { default as WebGLSystem } from './renderers/systems/WebGLSystem'; export { default as State } from './renderers/State'; export { default as ObjectRenderer } from './renderers/utils/ObjectRenderer'; -export { default as RenderTarget } from './renderers/utils/RenderTarget'; export { default as Quad } from './renderers/utils/Quad'; export { default as checkMaxIfStatmentsInShader } from './renderers/utils/checkMaxIfStatmentsInShader'; export { default as Shader } from './shader/Shader'; diff --git a/packages/core/src/renderers/Renderer.js b/packages/core/src/renderers/Renderer.js index 6967107..89ce25f 100644 --- a/packages/core/src/renderers/Renderer.js +++ b/packages/core/src/renderers/Renderer.js @@ -2,7 +2,7 @@ import { sayHello } from '@pixi/utils'; import MaskSystem from './systems/MaskSystem'; import StencilSystem from './systems/StencilSystem'; -import FilterSystem from './systems/FilterSystem'; +// import FilterSystem from './systems/FilterSystem'; import FramebufferSystem from './systems/FramebufferSystem'; import RenderTextureSystem from './systems/RenderTextureSystem'; import TextureSystem from './systems/textures/TextureSystem'; @@ -103,7 +103,7 @@ .addSystem(StencilSystem, 'stencil') .addSystem(ProjectionSystem, 'projection') // .addSystem(TextureGCSystem) - .addSystem(FilterSystem, 'filter') + // .addSystem(FilterSystem, 'filter') .addSystem(RenderTextureSystem, 'renderTexture') .addSystem(BatchSystem, 'batch'); diff --git a/packages/core/src/renderers/filters/Filter.js b/packages/core/src/renderers/filters/Filter.js index 06f1222..2d82c8e 100644 --- a/packages/core/src/renderers/filters/Filter.js +++ b/packages/core/src/renderers/filters/Filter.js @@ -3,7 +3,7 @@ import { BLEND_MODES } from '@pixi/constants'; import { settings } from '@pixi/settings'; import { uid } from '@pixi/utils'; -import extractUniformsFromSrc from './extractUniformsFromSrc'; +// import extractUniformsFromSrc from './extractUniformsFromSrc'; import defaultVertex from './defaultFilter.vert'; import defaultFragment from './defaultFilter.frag'; @@ -28,7 +28,8 @@ this._blendMode = BLEND_MODES.NORMAL; - this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms; + // || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); /** * An object containing the current values of custom uniforms. diff --git a/packages/core/src/renderers/filters/extractUniformsFromSrc.js b/packages/core/src/renderers/filters/extractUniformsFromSrc.js deleted file mode 100644 index 5ec7007..0000000 --- a/packages/core/src/renderers/filters/extractUniformsFromSrc.js +++ /dev/null @@ -1,58 +0,0 @@ -import glCore from 'pixi-gl-core'; - -const defaultValue = glCore.shader.defaultValue; - -export default function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) -{ - const vertUniforms = extractUniformsFromString(vertexSrc, mask); - const fragUniforms = extractUniformsFromString(fragmentSrc, mask); - - return Object.assign(vertUniforms, fragUniforms); -} - -function extractUniformsFromString(string) -{ - const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea|filterClamp)$'); - - const uniforms = {}; - let nameSplit; - - // clean the lines a little - remove extra spaces / tabs etc - // then split along ';' - const lines = string.replace(/\s+/g, ' ') - .split(/\s*;\s*/); - - // loop through.. - for (let i = 0; i < lines.length; i++) - { - const line = lines[i].trim(); - - if (line.indexOf('uniform') > -1) - { - const splitLine = line.split(' '); - const type = splitLine[1]; - - let name = splitLine[2]; - let size = 1; - - if (name.indexOf('[') > -1) - { - // array! - nameSplit = name.split(/\[|]/); - name = nameSplit[0]; - size *= Number(nameSplit[1]); - } - - if (!name.match(maskRegex)) - { - uniforms[name] = { - value: defaultValue(type, size), - name, - type, - }; - } - } - } - - return uniforms; -} diff --git a/packages/core/src/renderers/managers/BlendModeManager.js b/packages/core/src/renderers/managers/BlendModeManager.js deleted file mode 100644 index 7362ae7..0000000 --- a/packages/core/src/renderers/managers/BlendModeManager.js +++ /dev/null @@ -1,45 +0,0 @@ -import WebGLManager from './WebGLManager'; - -/** - * @class - * @memberof PIXI - * @extends PIXI.WebGLManager - */ -export default class BlendModeManager extends WebGLManager -{ - /** - * @param {PIXI.Renderer} renderer - The renderer this manager works for. - */ - constructor(renderer) - { - super(renderer); - - /** - * @member {number} - */ - this.currentBlendMode = 99999; - } - - /** - * Sets-up the given blendMode from WebGL's point of view. - * - * @param {number} blendMode - the blendMode, should be a PixiJS const, such as - * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. - * @return {boolean} Returns if the blend mode was changed. - */ - setBlendMode(blendMode) - { - if (this.currentBlendMode === blendMode) - { - return false; - } - - this.currentBlendMode = blendMode; - - const mode = this.renderer.blendModes[this.currentBlendMode]; - - this.renderer.gl.blendFunc(mode[0], mode[1]); - - return true; - } -} diff --git a/packages/core/src/renderers/systems/geometry/GLBuffer.js b/packages/core/src/renderers/systems/geometry/GLBuffer.js new file mode 100644 index 0000000..0477e8a --- /dev/null +++ b/packages/core/src/renderers/systems/geometry/GLBuffer.js @@ -0,0 +1,9 @@ +export default class GLBuffer +{ + constructor(buffer) + { + this.buffer = buffer; + this.updateID = -1; + this.byteLength = -1; + } +} diff --git a/packages/core/src/renderers/systems/geometry/GeometrySystem.js b/packages/core/src/renderers/systems/geometry/GeometrySystem.js index a972762..d205a6d 100644 --- a/packages/core/src/renderers/systems/geometry/GeometrySystem.js +++ b/packages/core/src/renderers/systems/geometry/GeometrySystem.js @@ -1,17 +1,8 @@ import WebGLSystem from '../WebGLSystem'; +import GLBuffer from './GLBuffer'; const byteSizeMap = { 5126: 4, 5123: 2, 5121: 1 }; -class GLBufferData -{ - constructor(buffer) - { - this.buffer = buffer; - this.updateID = -1; - this.byteLength = -1; - } -} - /** * @class * @extends PIXI.WebGLSystem @@ -269,7 +260,7 @@ if (!buffer._glBuffers[CONTEXT_UID]) { - buffer._glBuffers[CONTEXT_UID] = new GLBufferData(gl.createBuffer()); + buffer._glBuffers[CONTEXT_UID] = new GLBuffer(gl.createBuffer()); } } diff --git a/packages/core/src/renderers/systems/textures/GLTexture.js b/packages/core/src/renderers/systems/textures/GLTexture.js index ceeb379..3f5bf44 100644 --- a/packages/core/src/renderers/systems/textures/GLTexture.js +++ b/packages/core/src/renderers/systems/textures/GLTexture.js @@ -1,75 +1,16 @@ -let FLOATING_POINT_AVAILABLE = false; - -/** - * Helper class to create a WebGL Texture - * - * @class - * @memberof PIXI.glCore - * @param gl {WebGLRenderingContext} The current WebGL context - * @param width {number} the width of the texture - * @param height {number} the height of the texture - * @param format {number} the pixel format of the texture. defaults to gl.RGBA - * @param type {number} the gl type of the texture. defaults to gl.UNSIGNED_BYTE - */ -export default class Texture +export default class GLTexture { - constructor(gl, width, height, format, type) + constructor(texture) { /** - * The current WebGL rendering context - * - * @member {WebGLRenderingContext} - */ - this.gl = gl; - - /** * The WebGL texture * * @member {WebGLTexture} */ - this.texture = gl.createTexture(); + this.texture = texture; - /** - * GL texture is ready for mipmaps - * - * @member {Boolean} - */ - // some settings.. - this.mipmap = false; - - /** - * Set to true to enable pre-multiplied alpha - * - * @member {Boolean} - */ - this.premultiplyAlpha = false; - - /** - * The width of texture - * - * @member {Number} - */ - this.width = width || -1; - /** - * The height of texture - * - * @member {Number} - */ - this.height = height || -1; - - /** - * The pixel format of the texture. defaults to gl.RGBA - * - * @member {Number} - */ - this.format = format || gl.RGBA; - - /** - * The gl type of the texture. defaults to gl.UNSIGNED_BYTE - * - * @member {Number} - */ - this.type = type || gl.UNSIGNED_BYTE; + this.width = -1; + this.height = -1; /** * Texture contents dirty flag @@ -83,156 +24,4 @@ */ this.dirtyStyleId = -1; } - - /** - * Uploads this texture to the GPU - * @param source {HTMLImageElement|ImageData|HTMLVideoElement} the source image of the texture - */ - upload(source) - { - this.bind(); - - const gl = this.gl; - - gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, this.premultiplyAlpha); - - const newWidth = source.videoWidth || source.width; - const newHeight = source.videoHeight || source.height; - - if (newHeight !== this.height || newWidth !== this.width) - { - gl.texImage2D(gl.TEXTURE_2D, 0, this.format, this.format, this.type, source); - } - else - { - gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, this.format, this.type, source); - } - - // if the source is a video, we need to use the videoWidth / videoHeight - // properties as width / height will be incorrect. - this.width = newWidth; - this.height = newHeight; - } - - /** - * Use a data source and uploads this texture to the GPU - * @param data {TypedArray} the data to upload to the texture - * @param width {number} the new width of the texture - * @param height {number} the new height of the texture - */ - uploadData(data, width, height) - { - this.bind(); - - const gl = this.gl; - - if (data instanceof Float32Array) - { - if (!FLOATING_POINT_AVAILABLE) - { - const ext = gl.getExtension('OES_texture_float'); - - if (ext) - { - FLOATING_POINT_AVAILABLE = true; - } - else - { - throw new Error('floating point textures not available'); - } - } - - this.type = gl.FLOAT; - } - else - { - // TODO support for other types - this.type = this.type || gl.UNSIGNED_BYTE; - } - - // what type of data? - gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, this.premultiplyAlpha); - - if (width !== this.width || height !== this.height) - { - gl.texImage2D(gl.TEXTURE_2D, 0, this.format, width, height, 0, this.format, this.type, data || null); - } - else - { - gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, width, height, this.format, this.type, data || null); - } - - this.width = width; - this.height = height; - } - - /** - * Binds the texture - * @param location - */ - bind(location) - { - const gl = this.gl; - - if (location !== undefined) - { - gl.activeTexture(gl.TEXTURE0 + location); - } - - gl.bindTexture(gl.TEXTURE_2D, this.texture); - } - - /** - * Unbinds the texture - */ - unbind() - { - const gl = this.gl; - - gl.bindTexture(gl.TEXTURE_2D, null); - } - - /** - * Destroys this texture - */ - destroy() - { - const gl = this.gl; - // TODO - - gl.deleteTexture(this.texture); - } - - /** - * @static - * @param gl {WebGLRenderingContext} The current WebGL context - * @param source {HTMLImageElement|ImageData} the source image of the texture - * @param premultiplyAlpha {Boolean} If we want to use pre-multiplied alpha - */ - static fromSource(gl, source, premultiplyAlpha) - { - const texture = new Texture(gl); - - texture.premultiplyAlpha = premultiplyAlpha || false; - texture.upload(source); - - return texture; - } - - /** - * @static - * @param gl {WebGLRenderingContext} The current WebGL context - * @param data {TypedArray} the data to upload to the texture - * @param width {number} the new width of the texture - * @param height {number} the new height of the texture - */ - static fromData(gl, data, width, height) - { - // console.log(data, width, height); - const texture = new Texture(gl); - - texture.uploadData(data, width, height); - - return texture; - } } diff --git a/packages/core/src/renderers/systems/textures/TextureSystem.js b/packages/core/src/renderers/systems/textures/TextureSystem.js index b000db2..5c159e2 100644 --- a/packages/core/src/renderers/systems/textures/TextureSystem.js +++ b/packages/core/src/renderers/systems/textures/TextureSystem.js @@ -56,8 +56,13 @@ // TODO move this.. to a nice make empty textures class.. this.emptyTextures = {}; - this.emptyTextures[gl.TEXTURE_2D] = new GLTexture.fromData(this.gl, null, 1, 1); - this.emptyTextures[gl.TEXTURE_CUBE_MAP] = new GLTexture(this.gl); + const emptyTexture2D = new GLTexture(gl.createTexture()); + + gl.bindTexture(gl.TEXTURE_2D, emptyTexture2D.texture); + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array(4)); + + this.emptyTextures[gl.TEXTURE_2D] = emptyTexture2D; + this.emptyTextures[gl.TEXTURE_CUBE_MAP] = new GLTexture(gl.createTexture()); gl.bindTexture(gl.TEXTURE_CUBE_MAP, this.emptyTextures[gl.TEXTURE_CUBE_MAP].texture); @@ -136,9 +141,8 @@ initTexture(texture) { - const glTexture = new GLTexture(this.gl, -1, -1, texture.format, texture.type); + const glTexture = new GLTexture(this.gl.createTexture()); - glTexture.premultiplyAlpha = texture.premultiplyAlpha; // guarentee an update.. glTexture.dirtyId = -1; @@ -188,7 +192,7 @@ { this.unbind(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + texture._glTextures[this.renderer.CONTEXT_UID].texture.destroy(); texture.off('dispose', this.destroyTexture, this); delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -209,7 +213,6 @@ { const glTexture = texture._glTextures[this.CONTEXT_UID]; - glTexture.mipmap = texture.mipmap && texture.isPowerOfTwo; if (!glTexture) { return; @@ -223,14 +226,15 @@ { this.setStyle(texture, glTexture); } + glTexture.dirtyStyleId = texture.dirtyStyleId; } - setStyle(texture, glTexture) + setStyle(texture) { const gl = this.gl; - if (glTexture.mipmap) + if (texture.mipmap && texture.isPowerOfTwo) { gl.generateMipmap(texture.target); } @@ -238,7 +242,7 @@ gl.texParameteri(texture.target, gl.TEXTURE_WRAP_S, texture.wrapMode); gl.texParameteri(texture.target, gl.TEXTURE_WRAP_T, texture.wrapMode); - if (glTexture.mipmap) + if (texture.mipmap) { /* eslint-disable max-len */ gl.texParameteri(texture.target, gl.TEXTURE_MIN_FILTER, texture.scaleMode ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); diff --git a/packages/core/src/renderers/utils/RenderTarget.js b/packages/core/src/renderers/utils/RenderTarget.js deleted file mode 100644 index 3f129ed..0000000 --- a/packages/core/src/renderers/utils/RenderTarget.js +++ /dev/null @@ -1,326 +0,0 @@ -import { Rectangle, Matrix } from '@pixi/math'; -import { SCALE_MODES } from '@pixi/constants'; -import { settings } from '@pixi/settings'; -import { GLFramebuffer } from 'pixi-gl-core'; - -/** - * @class - * @memberof PIXI - */ -export default class RenderTarget -{ - /** - * @param {WebGLRenderingContext} gl - The current WebGL drawing context - * @param {number} [width=0] - the horizontal range of the filter - * @param {number} [height=0] - the vertical range of the filter - * @param {number} [scaleMode=PIXI.settings.SCALE_MODE] - See {@link PIXI.SCALE_MODES} for possible values - * @param {number} [resolution=1] - The current resolution / device pixel ratio - * @param {boolean} [root=false] - Whether this object is the root element or not - */ - constructor(gl, width, height, scaleMode, resolution, root) - { - // TODO Resolution could go here ( eg low res blurs ) - - /** - * The current WebGL drawing context. - * - * @member {WebGLRenderingContext} - */ - this.gl = gl; - - // next time to create a frame buffer and texture - - /** - * A frame buffer - * - * @member {PIXI.glCore.GLFramebuffer} - */ - this.frameBuffer = null; - - /** - * The texture - * - * @member {PIXI.glCore.GLTexture} - */ - this.texture = null; - - /** - * The background colour of this render target, as an array of [r,g,b,a] values - * - * @member {number[]} - */ - this.clearColor = [0, 0, 0, 0]; - - /** - * The size of the object as a rectangle - * - * @member {PIXI.Rectangle} - */ - this.size = new Rectangle(0, 0, 1, 1); - - /** - * The current resolution / device pixel ratio - * - * @member {number} - * @default 1 - */ - this.resolution = resolution || settings.RESOLUTION; - - /** - * The projection matrix - * - * @member {PIXI.Matrix} - */ - this.projectionMatrix = new Matrix(); - - /** - * The object's transform - * - * @member {PIXI.Matrix} - */ - this.transform = null; - - /** - * The frame. - * - * @member {PIXI.Rectangle} - */ - this.frame = null; - - /** - * The stencil buffer stores masking data for the render target - * - * @member {glCore.GLBuffer} - */ - this.defaultFrame = new Rectangle(); - this.destinationFrame = null; - this.sourceFrame = null; - - /** - * The stencil buffer stores masking data for the render target - * - * @member {glCore.GLBuffer} - */ - this.stencilBuffer = null; - - /** - * The data structure for the stencil masks - * - * @member {PIXI.Graphics[]} - */ - this.stencilMaskStack = []; - - /** - * Stores filter data for the render target - * - * @member {object[]} - */ - this.filterData = null; - - /** - * The scale mode. - * - * @member {number} - * @default PIXI.settings.SCALE_MODE - * @see PIXI.SCALE_MODES - */ - this.scaleMode = scaleMode !== undefined ? scaleMode : settings.SCALE_MODE; - - /** - * Whether this object is the root element or not - * - * @member {boolean} - */ - this.root = root; - - if (!this.root) - { - this.frameBuffer = GLFramebuffer.createRGBA(gl, 100, 100); - - if (this.scaleMode === SCALE_MODES.NEAREST) - { - this.frameBuffer.texture.enableNearestScaling(); - } - else - { - this.frameBuffer.texture.enableLinearScaling(); - } - /* - A frame buffer needs a target to render to.. - create a texture and bind it attach it to the framebuffer.. - */ - - // this is used by the base texture - this.texture = this.frameBuffer.texture; - } - else - { - // make it a null framebuffer.. - this.frameBuffer = new GLFramebuffer(gl, 100, 100); - this.frameBuffer.framebuffer = null; - } - - this.setFrame(); - - this.resize(width, height); - } - - /** - * Clears the filter texture. - * - * @param {number[]} [clearColor=this.clearColor] - Array of [r,g,b,a] to clear the framebuffer - */ - clear(clearColor) - { - const cc = clearColor || this.clearColor; - - this.frameBuffer.clear(cc[0], cc[1], cc[2], cc[3]);// r,g,b,a); - } - - /** - * Binds the stencil buffer. - * - */ - attachStencilBuffer() - { - // TODO check if stencil is done? - /** - * The stencil buffer is used for masking in pixi - * lets create one and then add attach it to the framebuffer.. - */ - if (!this.root) - { - this.frameBuffer.enableStencil(); - } - } - - /** - * Sets the frame of the render target. - * - * @param {Rectangle} destinationFrame - The destination frame. - * @param {Rectangle} sourceFrame - The source frame. - */ - setFrame(destinationFrame, sourceFrame) - { - this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; - } - - /** - * Binds the buffers and initialises the viewport. - * - */ - activate() - { - // TOOD refactor usage of frame.. - const gl = this.gl; - - // make sure the texture is unbound! - this.frameBuffer.bind(); - - this.calculateProjection(this.destinationFrame, this.sourceFrame); - - if (this.transform) - { - this.projectionMatrix.append(this.transform); - } - - // TODO add a check as them may be the same! - if (this.destinationFrame !== this.sourceFrame) - { - // gl.enable(gl.SCISSOR_TEST); - gl.scissor( - this.destinationFrame.x | 0, - this.destinationFrame.y | 0, - (this.destinationFrame.width * this.resolution) | 0, - (this.destinationFrame.height * this.resolution) | 0 - ); - } - else - { - // gl.disable(gl.SCISSOR_TEST); - } - - // TODO - does not need to be updated all the time?? - gl.viewport( - this.destinationFrame.x | 0, - this.destinationFrame.y | 0, - (this.destinationFrame.width * this.resolution) | 0, - (this.destinationFrame.height * this.resolution) | 0 - ); - } - - /** - * Updates the projection matrix based on a projection frame (which is a rectangle) - * - * @param {Rectangle} destinationFrame - The destination frame. - * @param {Rectangle} sourceFrame - The source frame. - */ - calculateProjection(destinationFrame, sourceFrame) - { - const pm = this.projectionMatrix; - - sourceFrame = sourceFrame || destinationFrame; - - pm.identity(); - - // TODO: make dest scale source - if (!this.root) - { - pm.a = 1 / destinationFrame.width * 2; - pm.d = 1 / destinationFrame.height * 2; - - pm.tx = -1 - (sourceFrame.x * pm.a); - pm.ty = -1 - (sourceFrame.y * pm.d); - } - else - { - pm.a = 1 / destinationFrame.width * 2; - pm.d = -1 / destinationFrame.height * 2; - - pm.tx = -1 - (sourceFrame.x * pm.a); - pm.ty = 1 - (sourceFrame.y * pm.d); - } - } - - /** - * Resizes the texture to the specified width and height - * - * @param {number} width - the new width of the texture - * @param {number} height - the new height of the texture - */ - resize(width, height) - { - width = width | 0; - height = height | 0; - - if (this.size.width === width && this.size.height === height) - { - return; - } - - this.size.width = width; - this.size.height = height; - - this.defaultFrame.width = width; - this.defaultFrame.height = height; - - this.frameBuffer.resize(width * this.resolution, height * this.resolution); - - const projectionFrame = this.frame || this.size; - - this.calculateProjection(projectionFrame); - } - - /** - * Destroys the render target. - * - */ - destroy() - { - this.frameBuffer.destroy(); - - this.frameBuffer = null; - this.texture = null; - } -} diff --git a/packages/core/src/shader/defaultValue.js b/packages/core/src/shader/defaultValue.js new file mode 100644 index 0000000..847a069 --- /dev/null +++ b/packages/core/src/shader/defaultValue.js @@ -0,0 +1,78 @@ +function booleanArray(size) +{ + const array = new Array(size); + + for (let i = 0; i < array.length; i++) + { + array[i] = false; + } + + return array; +} + +/** + * @class + * @memberof PIXI.glCore.shader + * @param type {String} Type of value + * @param size {Number} + */ +export default function defaultValue(type, size) +{ + switch (type) + { + case 'float': + return 0; + + case 'vec2': + return new Float32Array(2 * size); + + case 'vec3': + return new Float32Array(3 * size); + + case 'vec4': + return new Float32Array(4 * size); + + case 'int': + case 'sampler2D': + return 0; + + case 'ivec2': + return new Int32Array(2 * size); + + case 'ivec3': + return new Int32Array(3 * size); + + case 'ivec4': + return new Int32Array(4 * size); + + case 'bool': + return false; + + case 'bvec2': + + return booleanArray(2 * size); + + case 'bvec3': + return booleanArray(3 * size); + + case 'bvec4': + return booleanArray(4 * size); + + case 'mat2': + return new Float32Array([1, 0, + 0, 1]); + + case 'mat3': + return new Float32Array([1, 0, 0, + 0, 1, 0, + 0, 0, 1]); + + case 'mat4': + return new Float32Array([1, 0, 0, 0, + 0, 1, 0, 0, + 0, 0, 1, 0, + 0, 0, 0, 1]); + } + + return 0; +} diff --git a/packages/core/src/shader/extractUniformsFromSrc.js b/packages/core/src/shader/extractUniformsFromSrc.js index 39737fd..3d02c0a 100644 --- a/packages/core/src/shader/extractUniformsFromSrc.js +++ b/packages/core/src/shader/extractUniformsFromSrc.js @@ -1,6 +1,4 @@ -import glCore from 'pixi-gl-core'; - -const defaultValue = glCore.shader.defaultValue; +import defaultValue from './defaultValue'; export default function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { diff --git a/packages/core/src/textures/resources/BaseImageResource.js b/packages/core/src/textures/resources/BaseImageResource.js index 6e490fa..c3012b9 100644 --- a/packages/core/src/textures/resources/BaseImageResource.js +++ b/packages/core/src/textures/resources/BaseImageResource.js @@ -48,13 +48,27 @@ * @param {PIXI.Renderer} renderer Upload to the renderer * @param {PIXI.BaseTexture} baseTexture Reference to parent texture * @param {PIXI.glCore.GLTexture} glTexture Reference + * @param {HTMLImageElement|HTMLCanvasElement|HTMLVideoElement|SVGElement} source (optional) */ - upload(renderer, baseTexture, glTexture) + upload(renderer, baseTexture, glTexture, source) { - // TODO: move glTexture.upload somewhere else - glTexture.format = baseTexture.format; - glTexture.type = baseTexture.type; - glTexture.upload(this.source); + const gl = renderer.gl; + + source = source || this.source; + + gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, baseTexture.premultiplyAlpha); + + if (glTexture.width === baseTexture.width && glTexture.height === baseTexture.height) + { + gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, baseTexture.format, baseTexture.type, source); + } + else + { + glTexture.width = baseTexture.width; + glTexture.height = baseTexture.height; + + gl.texImage2D(gl.TEXTURE_2D, 0, baseTexture.format, baseTexture.format, baseTexture.type, source); + } return true; } diff --git a/packages/core/src/textures/resources/BufferResource.js b/packages/core/src/textures/resources/BufferResource.js index 7f1c12c..7ddfd9c 100644 --- a/packages/core/src/textures/resources/BufferResource.js +++ b/packages/core/src/textures/resources/BufferResource.js @@ -39,19 +39,43 @@ * @param {PIXI.Renderer} renderer Upload to the renderer * @param {PIXI.BaseTexture} baseTexture Reference to parent texture */ - upload(renderer, baseTexture) + upload(renderer, baseTexture, glTexture) { - renderer.gl.texImage2D( - baseTexture.target, - 0, - baseTexture.format, - baseTexture.width, - baseTexture.height, - 0, - baseTexture.format, - baseTexture.type, - this.data - ); + const gl = renderer.gl; + + gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, baseTexture.premultiplyAlpha); + + if (glTexture.width === baseTexture.width && glTexture.height === baseTexture.height) + { + gl.texSubImage2D( + baseTexture.target, + 0, + 0, + 0, + baseTexture.width, + baseTexture.height, + baseTexture.format, + baseTexture.type, + this.data + ); + } + else + { + glTexture.width = baseTexture.width; + glTexture.height = baseTexture.height; + + gl.texImage2D( + baseTexture.target, + 0, + baseTexture.format, + baseTexture.width, + baseTexture.height, + 0, + baseTexture.format, + baseTexture.type, + this.data + ); + } return true; } diff --git a/packages/core/src/textures/resources/ImageResource.js b/packages/core/src/textures/resources/ImageResource.js index a4b3ca6..59c391a 100644 --- a/packages/core/src/textures/resources/ImageResource.js +++ b/packages/core/src/textures/resources/ImageResource.js @@ -192,13 +192,16 @@ return false; } } - glTexture.upload(this.bitmap); + + super.upload(renderer, baseTexture, glTexture, this.bitmap); + if (!this.preserveBitmap) { if (this.bitmap.close) { this.bitmap.close(); } + this.bitmap = null; } } diff --git a/bundles/pixi.js/src/index.js b/bundles/pixi.js/src/index.js index fb839a0..a879872 100644 --- a/bundles/pixi.js/src/index.js +++ b/bundles/pixi.js/src/index.js @@ -9,7 +9,7 @@ import * as loaders from '@pixi/loaders'; import * as math from '@pixi/math'; import * as mesh from '@pixi/mesh'; -import * as particles from '@pixi/particles'; +// import * as particles from '@pixi/particles'; import * as prepare from '@pixi/prepare'; import * as sprite from '@pixi/sprite'; import * as spriteAnimated from '@pixi/sprite-animated'; @@ -38,7 +38,7 @@ core.Renderer.registerPlugin('graphics', graphics.GraphicsRenderer); core.Renderer.registerPlugin('interaction', interaction.InteractionManager); core.Renderer.registerPlugin('mesh', mesh.MeshRenderer); -core.Renderer.registerPlugin('particle', particles.ParticleRenderer); +// core.Renderer.registerPlugin('particle', particles.ParticleRenderer); core.Renderer.registerPlugin('prepare', prepare.Prepare); core.Renderer.registerPlugin('sprite', sprite.SpriteRenderer); core.Renderer.registerPlugin('tilingSprite', spriteTiling.TilingSpriteRenderer); @@ -120,7 +120,7 @@ loaders, math, mesh, - particles, + // particles, sprite, spriteAnimated, spritesheet, diff --git a/packages/core/package.json b/packages/core/package.json index 30e2e83..7d01377 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -29,7 +29,6 @@ "earcut": "^2.0.7", "eventemitter3": "^2.0.0", "ismobilejs": "^0.4.0", - "pixi-gl-core": "^2.0.0-alpha", "mini-runner": "^1.0.1", "@pixi/math": "^5.0.0-alpha", "@pixi/constants": "^5.0.0-alpha", diff --git a/packages/core/src/index.js b/packages/core/src/index.js index 0951de6..8b8e67c 100644 --- a/packages/core/src/index.js +++ b/packages/core/src/index.js @@ -14,7 +14,6 @@ export { default as WebGLSystem } from './renderers/systems/WebGLSystem'; export { default as State } from './renderers/State'; export { default as ObjectRenderer } from './renderers/utils/ObjectRenderer'; -export { default as RenderTarget } from './renderers/utils/RenderTarget'; export { default as Quad } from './renderers/utils/Quad'; export { default as checkMaxIfStatmentsInShader } from './renderers/utils/checkMaxIfStatmentsInShader'; export { default as Shader } from './shader/Shader'; diff --git a/packages/core/src/renderers/Renderer.js b/packages/core/src/renderers/Renderer.js index 6967107..89ce25f 100644 --- a/packages/core/src/renderers/Renderer.js +++ b/packages/core/src/renderers/Renderer.js @@ -2,7 +2,7 @@ import { sayHello } from '@pixi/utils'; import MaskSystem from './systems/MaskSystem'; import StencilSystem from './systems/StencilSystem'; -import FilterSystem from './systems/FilterSystem'; +// import FilterSystem from './systems/FilterSystem'; import FramebufferSystem from './systems/FramebufferSystem'; import RenderTextureSystem from './systems/RenderTextureSystem'; import TextureSystem from './systems/textures/TextureSystem'; @@ -103,7 +103,7 @@ .addSystem(StencilSystem, 'stencil') .addSystem(ProjectionSystem, 'projection') // .addSystem(TextureGCSystem) - .addSystem(FilterSystem, 'filter') + // .addSystem(FilterSystem, 'filter') .addSystem(RenderTextureSystem, 'renderTexture') .addSystem(BatchSystem, 'batch'); diff --git a/packages/core/src/renderers/filters/Filter.js b/packages/core/src/renderers/filters/Filter.js index 06f1222..2d82c8e 100644 --- a/packages/core/src/renderers/filters/Filter.js +++ b/packages/core/src/renderers/filters/Filter.js @@ -3,7 +3,7 @@ import { BLEND_MODES } from '@pixi/constants'; import { settings } from '@pixi/settings'; import { uid } from '@pixi/utils'; -import extractUniformsFromSrc from './extractUniformsFromSrc'; +// import extractUniformsFromSrc from './extractUniformsFromSrc'; import defaultVertex from './defaultFilter.vert'; import defaultFragment from './defaultFilter.frag'; @@ -28,7 +28,8 @@ this._blendMode = BLEND_MODES.NORMAL; - this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms; + // || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); /** * An object containing the current values of custom uniforms. diff --git a/packages/core/src/renderers/filters/extractUniformsFromSrc.js b/packages/core/src/renderers/filters/extractUniformsFromSrc.js deleted file mode 100644 index 5ec7007..0000000 --- a/packages/core/src/renderers/filters/extractUniformsFromSrc.js +++ /dev/null @@ -1,58 +0,0 @@ -import glCore from 'pixi-gl-core'; - -const defaultValue = glCore.shader.defaultValue; - -export default function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) -{ - const vertUniforms = extractUniformsFromString(vertexSrc, mask); - const fragUniforms = extractUniformsFromString(fragmentSrc, mask); - - return Object.assign(vertUniforms, fragUniforms); -} - -function extractUniformsFromString(string) -{ - const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea|filterClamp)$'); - - const uniforms = {}; - let nameSplit; - - // clean the lines a little - remove extra spaces / tabs etc - // then split along ';' - const lines = string.replace(/\s+/g, ' ') - .split(/\s*;\s*/); - - // loop through.. - for (let i = 0; i < lines.length; i++) - { - const line = lines[i].trim(); - - if (line.indexOf('uniform') > -1) - { - const splitLine = line.split(' '); - const type = splitLine[1]; - - let name = splitLine[2]; - let size = 1; - - if (name.indexOf('[') > -1) - { - // array! - nameSplit = name.split(/\[|]/); - name = nameSplit[0]; - size *= Number(nameSplit[1]); - } - - if (!name.match(maskRegex)) - { - uniforms[name] = { - value: defaultValue(type, size), - name, - type, - }; - } - } - } - - return uniforms; -} diff --git a/packages/core/src/renderers/managers/BlendModeManager.js b/packages/core/src/renderers/managers/BlendModeManager.js deleted file mode 100644 index 7362ae7..0000000 --- a/packages/core/src/renderers/managers/BlendModeManager.js +++ /dev/null @@ -1,45 +0,0 @@ -import WebGLManager from './WebGLManager'; - -/** - * @class - * @memberof PIXI - * @extends PIXI.WebGLManager - */ -export default class BlendModeManager extends WebGLManager -{ - /** - * @param {PIXI.Renderer} renderer - The renderer this manager works for. - */ - constructor(renderer) - { - super(renderer); - - /** - * @member {number} - */ - this.currentBlendMode = 99999; - } - - /** - * Sets-up the given blendMode from WebGL's point of view. - * - * @param {number} blendMode - the blendMode, should be a PixiJS const, such as - * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. - * @return {boolean} Returns if the blend mode was changed. - */ - setBlendMode(blendMode) - { - if (this.currentBlendMode === blendMode) - { - return false; - } - - this.currentBlendMode = blendMode; - - const mode = this.renderer.blendModes[this.currentBlendMode]; - - this.renderer.gl.blendFunc(mode[0], mode[1]); - - return true; - } -} diff --git a/packages/core/src/renderers/systems/geometry/GLBuffer.js b/packages/core/src/renderers/systems/geometry/GLBuffer.js new file mode 100644 index 0000000..0477e8a --- /dev/null +++ b/packages/core/src/renderers/systems/geometry/GLBuffer.js @@ -0,0 +1,9 @@ +export default class GLBuffer +{ + constructor(buffer) + { + this.buffer = buffer; + this.updateID = -1; + this.byteLength = -1; + } +} diff --git a/packages/core/src/renderers/systems/geometry/GeometrySystem.js b/packages/core/src/renderers/systems/geometry/GeometrySystem.js index a972762..d205a6d 100644 --- a/packages/core/src/renderers/systems/geometry/GeometrySystem.js +++ b/packages/core/src/renderers/systems/geometry/GeometrySystem.js @@ -1,17 +1,8 @@ import WebGLSystem from '../WebGLSystem'; +import GLBuffer from './GLBuffer'; const byteSizeMap = { 5126: 4, 5123: 2, 5121: 1 }; -class GLBufferData -{ - constructor(buffer) - { - this.buffer = buffer; - this.updateID = -1; - this.byteLength = -1; - } -} - /** * @class * @extends PIXI.WebGLSystem @@ -269,7 +260,7 @@ if (!buffer._glBuffers[CONTEXT_UID]) { - buffer._glBuffers[CONTEXT_UID] = new GLBufferData(gl.createBuffer()); + buffer._glBuffers[CONTEXT_UID] = new GLBuffer(gl.createBuffer()); } } diff --git a/packages/core/src/renderers/systems/textures/GLTexture.js b/packages/core/src/renderers/systems/textures/GLTexture.js index ceeb379..3f5bf44 100644 --- a/packages/core/src/renderers/systems/textures/GLTexture.js +++ b/packages/core/src/renderers/systems/textures/GLTexture.js @@ -1,75 +1,16 @@ -let FLOATING_POINT_AVAILABLE = false; - -/** - * Helper class to create a WebGL Texture - * - * @class - * @memberof PIXI.glCore - * @param gl {WebGLRenderingContext} The current WebGL context - * @param width {number} the width of the texture - * @param height {number} the height of the texture - * @param format {number} the pixel format of the texture. defaults to gl.RGBA - * @param type {number} the gl type of the texture. defaults to gl.UNSIGNED_BYTE - */ -export default class Texture +export default class GLTexture { - constructor(gl, width, height, format, type) + constructor(texture) { /** - * The current WebGL rendering context - * - * @member {WebGLRenderingContext} - */ - this.gl = gl; - - /** * The WebGL texture * * @member {WebGLTexture} */ - this.texture = gl.createTexture(); + this.texture = texture; - /** - * GL texture is ready for mipmaps - * - * @member {Boolean} - */ - // some settings.. - this.mipmap = false; - - /** - * Set to true to enable pre-multiplied alpha - * - * @member {Boolean} - */ - this.premultiplyAlpha = false; - - /** - * The width of texture - * - * @member {Number} - */ - this.width = width || -1; - /** - * The height of texture - * - * @member {Number} - */ - this.height = height || -1; - - /** - * The pixel format of the texture. defaults to gl.RGBA - * - * @member {Number} - */ - this.format = format || gl.RGBA; - - /** - * The gl type of the texture. defaults to gl.UNSIGNED_BYTE - * - * @member {Number} - */ - this.type = type || gl.UNSIGNED_BYTE; + this.width = -1; + this.height = -1; /** * Texture contents dirty flag @@ -83,156 +24,4 @@ */ this.dirtyStyleId = -1; } - - /** - * Uploads this texture to the GPU - * @param source {HTMLImageElement|ImageData|HTMLVideoElement} the source image of the texture - */ - upload(source) - { - this.bind(); - - const gl = this.gl; - - gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, this.premultiplyAlpha); - - const newWidth = source.videoWidth || source.width; - const newHeight = source.videoHeight || source.height; - - if (newHeight !== this.height || newWidth !== this.width) - { - gl.texImage2D(gl.TEXTURE_2D, 0, this.format, this.format, this.type, source); - } - else - { - gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, this.format, this.type, source); - } - - // if the source is a video, we need to use the videoWidth / videoHeight - // properties as width / height will be incorrect. - this.width = newWidth; - this.height = newHeight; - } - - /** - * Use a data source and uploads this texture to the GPU - * @param data {TypedArray} the data to upload to the texture - * @param width {number} the new width of the texture - * @param height {number} the new height of the texture - */ - uploadData(data, width, height) - { - this.bind(); - - const gl = this.gl; - - if (data instanceof Float32Array) - { - if (!FLOATING_POINT_AVAILABLE) - { - const ext = gl.getExtension('OES_texture_float'); - - if (ext) - { - FLOATING_POINT_AVAILABLE = true; - } - else - { - throw new Error('floating point textures not available'); - } - } - - this.type = gl.FLOAT; - } - else - { - // TODO support for other types - this.type = this.type || gl.UNSIGNED_BYTE; - } - - // what type of data? - gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, this.premultiplyAlpha); - - if (width !== this.width || height !== this.height) - { - gl.texImage2D(gl.TEXTURE_2D, 0, this.format, width, height, 0, this.format, this.type, data || null); - } - else - { - gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, width, height, this.format, this.type, data || null); - } - - this.width = width; - this.height = height; - } - - /** - * Binds the texture - * @param location - */ - bind(location) - { - const gl = this.gl; - - if (location !== undefined) - { - gl.activeTexture(gl.TEXTURE0 + location); - } - - gl.bindTexture(gl.TEXTURE_2D, this.texture); - } - - /** - * Unbinds the texture - */ - unbind() - { - const gl = this.gl; - - gl.bindTexture(gl.TEXTURE_2D, null); - } - - /** - * Destroys this texture - */ - destroy() - { - const gl = this.gl; - // TODO - - gl.deleteTexture(this.texture); - } - - /** - * @static - * @param gl {WebGLRenderingContext} The current WebGL context - * @param source {HTMLImageElement|ImageData} the source image of the texture - * @param premultiplyAlpha {Boolean} If we want to use pre-multiplied alpha - */ - static fromSource(gl, source, premultiplyAlpha) - { - const texture = new Texture(gl); - - texture.premultiplyAlpha = premultiplyAlpha || false; - texture.upload(source); - - return texture; - } - - /** - * @static - * @param gl {WebGLRenderingContext} The current WebGL context - * @param data {TypedArray} the data to upload to the texture - * @param width {number} the new width of the texture - * @param height {number} the new height of the texture - */ - static fromData(gl, data, width, height) - { - // console.log(data, width, height); - const texture = new Texture(gl); - - texture.uploadData(data, width, height); - - return texture; - } } diff --git a/packages/core/src/renderers/systems/textures/TextureSystem.js b/packages/core/src/renderers/systems/textures/TextureSystem.js index b000db2..5c159e2 100644 --- a/packages/core/src/renderers/systems/textures/TextureSystem.js +++ b/packages/core/src/renderers/systems/textures/TextureSystem.js @@ -56,8 +56,13 @@ // TODO move this.. to a nice make empty textures class.. this.emptyTextures = {}; - this.emptyTextures[gl.TEXTURE_2D] = new GLTexture.fromData(this.gl, null, 1, 1); - this.emptyTextures[gl.TEXTURE_CUBE_MAP] = new GLTexture(this.gl); + const emptyTexture2D = new GLTexture(gl.createTexture()); + + gl.bindTexture(gl.TEXTURE_2D, emptyTexture2D.texture); + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array(4)); + + this.emptyTextures[gl.TEXTURE_2D] = emptyTexture2D; + this.emptyTextures[gl.TEXTURE_CUBE_MAP] = new GLTexture(gl.createTexture()); gl.bindTexture(gl.TEXTURE_CUBE_MAP, this.emptyTextures[gl.TEXTURE_CUBE_MAP].texture); @@ -136,9 +141,8 @@ initTexture(texture) { - const glTexture = new GLTexture(this.gl, -1, -1, texture.format, texture.type); + const glTexture = new GLTexture(this.gl.createTexture()); - glTexture.premultiplyAlpha = texture.premultiplyAlpha; // guarentee an update.. glTexture.dirtyId = -1; @@ -188,7 +192,7 @@ { this.unbind(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + texture._glTextures[this.renderer.CONTEXT_UID].texture.destroy(); texture.off('dispose', this.destroyTexture, this); delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -209,7 +213,6 @@ { const glTexture = texture._glTextures[this.CONTEXT_UID]; - glTexture.mipmap = texture.mipmap && texture.isPowerOfTwo; if (!glTexture) { return; @@ -223,14 +226,15 @@ { this.setStyle(texture, glTexture); } + glTexture.dirtyStyleId = texture.dirtyStyleId; } - setStyle(texture, glTexture) + setStyle(texture) { const gl = this.gl; - if (glTexture.mipmap) + if (texture.mipmap && texture.isPowerOfTwo) { gl.generateMipmap(texture.target); } @@ -238,7 +242,7 @@ gl.texParameteri(texture.target, gl.TEXTURE_WRAP_S, texture.wrapMode); gl.texParameteri(texture.target, gl.TEXTURE_WRAP_T, texture.wrapMode); - if (glTexture.mipmap) + if (texture.mipmap) { /* eslint-disable max-len */ gl.texParameteri(texture.target, gl.TEXTURE_MIN_FILTER, texture.scaleMode ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); diff --git a/packages/core/src/renderers/utils/RenderTarget.js b/packages/core/src/renderers/utils/RenderTarget.js deleted file mode 100644 index 3f129ed..0000000 --- a/packages/core/src/renderers/utils/RenderTarget.js +++ /dev/null @@ -1,326 +0,0 @@ -import { Rectangle, Matrix } from '@pixi/math'; -import { SCALE_MODES } from '@pixi/constants'; -import { settings } from '@pixi/settings'; -import { GLFramebuffer } from 'pixi-gl-core'; - -/** - * @class - * @memberof PIXI - */ -export default class RenderTarget -{ - /** - * @param {WebGLRenderingContext} gl - The current WebGL drawing context - * @param {number} [width=0] - the horizontal range of the filter - * @param {number} [height=0] - the vertical range of the filter - * @param {number} [scaleMode=PIXI.settings.SCALE_MODE] - See {@link PIXI.SCALE_MODES} for possible values - * @param {number} [resolution=1] - The current resolution / device pixel ratio - * @param {boolean} [root=false] - Whether this object is the root element or not - */ - constructor(gl, width, height, scaleMode, resolution, root) - { - // TODO Resolution could go here ( eg low res blurs ) - - /** - * The current WebGL drawing context. - * - * @member {WebGLRenderingContext} - */ - this.gl = gl; - - // next time to create a frame buffer and texture - - /** - * A frame buffer - * - * @member {PIXI.glCore.GLFramebuffer} - */ - this.frameBuffer = null; - - /** - * The texture - * - * @member {PIXI.glCore.GLTexture} - */ - this.texture = null; - - /** - * The background colour of this render target, as an array of [r,g,b,a] values - * - * @member {number[]} - */ - this.clearColor = [0, 0, 0, 0]; - - /** - * The size of the object as a rectangle - * - * @member {PIXI.Rectangle} - */ - this.size = new Rectangle(0, 0, 1, 1); - - /** - * The current resolution / device pixel ratio - * - * @member {number} - * @default 1 - */ - this.resolution = resolution || settings.RESOLUTION; - - /** - * The projection matrix - * - * @member {PIXI.Matrix} - */ - this.projectionMatrix = new Matrix(); - - /** - * The object's transform - * - * @member {PIXI.Matrix} - */ - this.transform = null; - - /** - * The frame. - * - * @member {PIXI.Rectangle} - */ - this.frame = null; - - /** - * The stencil buffer stores masking data for the render target - * - * @member {glCore.GLBuffer} - */ - this.defaultFrame = new Rectangle(); - this.destinationFrame = null; - this.sourceFrame = null; - - /** - * The stencil buffer stores masking data for the render target - * - * @member {glCore.GLBuffer} - */ - this.stencilBuffer = null; - - /** - * The data structure for the stencil masks - * - * @member {PIXI.Graphics[]} - */ - this.stencilMaskStack = []; - - /** - * Stores filter data for the render target - * - * @member {object[]} - */ - this.filterData = null; - - /** - * The scale mode. - * - * @member {number} - * @default PIXI.settings.SCALE_MODE - * @see PIXI.SCALE_MODES - */ - this.scaleMode = scaleMode !== undefined ? scaleMode : settings.SCALE_MODE; - - /** - * Whether this object is the root element or not - * - * @member {boolean} - */ - this.root = root; - - if (!this.root) - { - this.frameBuffer = GLFramebuffer.createRGBA(gl, 100, 100); - - if (this.scaleMode === SCALE_MODES.NEAREST) - { - this.frameBuffer.texture.enableNearestScaling(); - } - else - { - this.frameBuffer.texture.enableLinearScaling(); - } - /* - A frame buffer needs a target to render to.. - create a texture and bind it attach it to the framebuffer.. - */ - - // this is used by the base texture - this.texture = this.frameBuffer.texture; - } - else - { - // make it a null framebuffer.. - this.frameBuffer = new GLFramebuffer(gl, 100, 100); - this.frameBuffer.framebuffer = null; - } - - this.setFrame(); - - this.resize(width, height); - } - - /** - * Clears the filter texture. - * - * @param {number[]} [clearColor=this.clearColor] - Array of [r,g,b,a] to clear the framebuffer - */ - clear(clearColor) - { - const cc = clearColor || this.clearColor; - - this.frameBuffer.clear(cc[0], cc[1], cc[2], cc[3]);// r,g,b,a); - } - - /** - * Binds the stencil buffer. - * - */ - attachStencilBuffer() - { - // TODO check if stencil is done? - /** - * The stencil buffer is used for masking in pixi - * lets create one and then add attach it to the framebuffer.. - */ - if (!this.root) - { - this.frameBuffer.enableStencil(); - } - } - - /** - * Sets the frame of the render target. - * - * @param {Rectangle} destinationFrame - The destination frame. - * @param {Rectangle} sourceFrame - The source frame. - */ - setFrame(destinationFrame, sourceFrame) - { - this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; - } - - /** - * Binds the buffers and initialises the viewport. - * - */ - activate() - { - // TOOD refactor usage of frame.. - const gl = this.gl; - - // make sure the texture is unbound! - this.frameBuffer.bind(); - - this.calculateProjection(this.destinationFrame, this.sourceFrame); - - if (this.transform) - { - this.projectionMatrix.append(this.transform); - } - - // TODO add a check as them may be the same! - if (this.destinationFrame !== this.sourceFrame) - { - // gl.enable(gl.SCISSOR_TEST); - gl.scissor( - this.destinationFrame.x | 0, - this.destinationFrame.y | 0, - (this.destinationFrame.width * this.resolution) | 0, - (this.destinationFrame.height * this.resolution) | 0 - ); - } - else - { - // gl.disable(gl.SCISSOR_TEST); - } - - // TODO - does not need to be updated all the time?? - gl.viewport( - this.destinationFrame.x | 0, - this.destinationFrame.y | 0, - (this.destinationFrame.width * this.resolution) | 0, - (this.destinationFrame.height * this.resolution) | 0 - ); - } - - /** - * Updates the projection matrix based on a projection frame (which is a rectangle) - * - * @param {Rectangle} destinationFrame - The destination frame. - * @param {Rectangle} sourceFrame - The source frame. - */ - calculateProjection(destinationFrame, sourceFrame) - { - const pm = this.projectionMatrix; - - sourceFrame = sourceFrame || destinationFrame; - - pm.identity(); - - // TODO: make dest scale source - if (!this.root) - { - pm.a = 1 / destinationFrame.width * 2; - pm.d = 1 / destinationFrame.height * 2; - - pm.tx = -1 - (sourceFrame.x * pm.a); - pm.ty = -1 - (sourceFrame.y * pm.d); - } - else - { - pm.a = 1 / destinationFrame.width * 2; - pm.d = -1 / destinationFrame.height * 2; - - pm.tx = -1 - (sourceFrame.x * pm.a); - pm.ty = 1 - (sourceFrame.y * pm.d); - } - } - - /** - * Resizes the texture to the specified width and height - * - * @param {number} width - the new width of the texture - * @param {number} height - the new height of the texture - */ - resize(width, height) - { - width = width | 0; - height = height | 0; - - if (this.size.width === width && this.size.height === height) - { - return; - } - - this.size.width = width; - this.size.height = height; - - this.defaultFrame.width = width; - this.defaultFrame.height = height; - - this.frameBuffer.resize(width * this.resolution, height * this.resolution); - - const projectionFrame = this.frame || this.size; - - this.calculateProjection(projectionFrame); - } - - /** - * Destroys the render target. - * - */ - destroy() - { - this.frameBuffer.destroy(); - - this.frameBuffer = null; - this.texture = null; - } -} diff --git a/packages/core/src/shader/defaultValue.js b/packages/core/src/shader/defaultValue.js new file mode 100644 index 0000000..847a069 --- /dev/null +++ b/packages/core/src/shader/defaultValue.js @@ -0,0 +1,78 @@ +function booleanArray(size) +{ + const array = new Array(size); + + for (let i = 0; i < array.length; i++) + { + array[i] = false; + } + + return array; +} + +/** + * @class + * @memberof PIXI.glCore.shader + * @param type {String} Type of value + * @param size {Number} + */ +export default function defaultValue(type, size) +{ + switch (type) + { + case 'float': + return 0; + + case 'vec2': + return new Float32Array(2 * size); + + case 'vec3': + return new Float32Array(3 * size); + + case 'vec4': + return new Float32Array(4 * size); + + case 'int': + case 'sampler2D': + return 0; + + case 'ivec2': + return new Int32Array(2 * size); + + case 'ivec3': + return new Int32Array(3 * size); + + case 'ivec4': + return new Int32Array(4 * size); + + case 'bool': + return false; + + case 'bvec2': + + return booleanArray(2 * size); + + case 'bvec3': + return booleanArray(3 * size); + + case 'bvec4': + return booleanArray(4 * size); + + case 'mat2': + return new Float32Array([1, 0, + 0, 1]); + + case 'mat3': + return new Float32Array([1, 0, 0, + 0, 1, 0, + 0, 0, 1]); + + case 'mat4': + return new Float32Array([1, 0, 0, 0, + 0, 1, 0, 0, + 0, 0, 1, 0, + 0, 0, 0, 1]); + } + + return 0; +} diff --git a/packages/core/src/shader/extractUniformsFromSrc.js b/packages/core/src/shader/extractUniformsFromSrc.js index 39737fd..3d02c0a 100644 --- a/packages/core/src/shader/extractUniformsFromSrc.js +++ b/packages/core/src/shader/extractUniformsFromSrc.js @@ -1,6 +1,4 @@ -import glCore from 'pixi-gl-core'; - -const defaultValue = glCore.shader.defaultValue; +import defaultValue from './defaultValue'; export default function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { diff --git a/packages/core/src/textures/resources/BaseImageResource.js b/packages/core/src/textures/resources/BaseImageResource.js index 6e490fa..c3012b9 100644 --- a/packages/core/src/textures/resources/BaseImageResource.js +++ b/packages/core/src/textures/resources/BaseImageResource.js @@ -48,13 +48,27 @@ * @param {PIXI.Renderer} renderer Upload to the renderer * @param {PIXI.BaseTexture} baseTexture Reference to parent texture * @param {PIXI.glCore.GLTexture} glTexture Reference + * @param {HTMLImageElement|HTMLCanvasElement|HTMLVideoElement|SVGElement} source (optional) */ - upload(renderer, baseTexture, glTexture) + upload(renderer, baseTexture, glTexture, source) { - // TODO: move glTexture.upload somewhere else - glTexture.format = baseTexture.format; - glTexture.type = baseTexture.type; - glTexture.upload(this.source); + const gl = renderer.gl; + + source = source || this.source; + + gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, baseTexture.premultiplyAlpha); + + if (glTexture.width === baseTexture.width && glTexture.height === baseTexture.height) + { + gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, baseTexture.format, baseTexture.type, source); + } + else + { + glTexture.width = baseTexture.width; + glTexture.height = baseTexture.height; + + gl.texImage2D(gl.TEXTURE_2D, 0, baseTexture.format, baseTexture.format, baseTexture.type, source); + } return true; } diff --git a/packages/core/src/textures/resources/BufferResource.js b/packages/core/src/textures/resources/BufferResource.js index 7f1c12c..7ddfd9c 100644 --- a/packages/core/src/textures/resources/BufferResource.js +++ b/packages/core/src/textures/resources/BufferResource.js @@ -39,19 +39,43 @@ * @param {PIXI.Renderer} renderer Upload to the renderer * @param {PIXI.BaseTexture} baseTexture Reference to parent texture */ - upload(renderer, baseTexture) + upload(renderer, baseTexture, glTexture) { - renderer.gl.texImage2D( - baseTexture.target, - 0, - baseTexture.format, - baseTexture.width, - baseTexture.height, - 0, - baseTexture.format, - baseTexture.type, - this.data - ); + const gl = renderer.gl; + + gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, baseTexture.premultiplyAlpha); + + if (glTexture.width === baseTexture.width && glTexture.height === baseTexture.height) + { + gl.texSubImage2D( + baseTexture.target, + 0, + 0, + 0, + baseTexture.width, + baseTexture.height, + baseTexture.format, + baseTexture.type, + this.data + ); + } + else + { + glTexture.width = baseTexture.width; + glTexture.height = baseTexture.height; + + gl.texImage2D( + baseTexture.target, + 0, + baseTexture.format, + baseTexture.width, + baseTexture.height, + 0, + baseTexture.format, + baseTexture.type, + this.data + ); + } return true; } diff --git a/packages/core/src/textures/resources/ImageResource.js b/packages/core/src/textures/resources/ImageResource.js index a4b3ca6..59c391a 100644 --- a/packages/core/src/textures/resources/ImageResource.js +++ b/packages/core/src/textures/resources/ImageResource.js @@ -192,13 +192,16 @@ return false; } } - glTexture.upload(this.bitmap); + + super.upload(renderer, baseTexture, glTexture, this.bitmap); + if (!this.preserveBitmap) { if (this.bitmap.close) { this.bitmap.close(); } + this.bitmap = null; } } diff --git a/packages/core/src/textures/resources/VideoResource.js b/packages/core/src/textures/resources/VideoResource.js index 246c1c8..4094351 100644 --- a/packages/core/src/textures/resources/VideoResource.js +++ b/packages/core/src/textures/resources/VideoResource.js @@ -254,6 +254,7 @@ { return this._autoUpdate; } + set autoUpdate(value) // eslint-disable-line require-jsdoc { if (value !== this._autoUpdate) diff --git a/bundles/pixi.js/src/index.js b/bundles/pixi.js/src/index.js index fb839a0..a879872 100644 --- a/bundles/pixi.js/src/index.js +++ b/bundles/pixi.js/src/index.js @@ -9,7 +9,7 @@ import * as loaders from '@pixi/loaders'; import * as math from '@pixi/math'; import * as mesh from '@pixi/mesh'; -import * as particles from '@pixi/particles'; +// import * as particles from '@pixi/particles'; import * as prepare from '@pixi/prepare'; import * as sprite from '@pixi/sprite'; import * as spriteAnimated from '@pixi/sprite-animated'; @@ -38,7 +38,7 @@ core.Renderer.registerPlugin('graphics', graphics.GraphicsRenderer); core.Renderer.registerPlugin('interaction', interaction.InteractionManager); core.Renderer.registerPlugin('mesh', mesh.MeshRenderer); -core.Renderer.registerPlugin('particle', particles.ParticleRenderer); +// core.Renderer.registerPlugin('particle', particles.ParticleRenderer); core.Renderer.registerPlugin('prepare', prepare.Prepare); core.Renderer.registerPlugin('sprite', sprite.SpriteRenderer); core.Renderer.registerPlugin('tilingSprite', spriteTiling.TilingSpriteRenderer); @@ -120,7 +120,7 @@ loaders, math, mesh, - particles, + // particles, sprite, spriteAnimated, spritesheet, diff --git a/packages/core/package.json b/packages/core/package.json index 30e2e83..7d01377 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -29,7 +29,6 @@ "earcut": "^2.0.7", "eventemitter3": "^2.0.0", "ismobilejs": "^0.4.0", - "pixi-gl-core": "^2.0.0-alpha", "mini-runner": "^1.0.1", "@pixi/math": "^5.0.0-alpha", "@pixi/constants": "^5.0.0-alpha", diff --git a/packages/core/src/index.js b/packages/core/src/index.js index 0951de6..8b8e67c 100644 --- a/packages/core/src/index.js +++ b/packages/core/src/index.js @@ -14,7 +14,6 @@ export { default as WebGLSystem } from './renderers/systems/WebGLSystem'; export { default as State } from './renderers/State'; export { default as ObjectRenderer } from './renderers/utils/ObjectRenderer'; -export { default as RenderTarget } from './renderers/utils/RenderTarget'; export { default as Quad } from './renderers/utils/Quad'; export { default as checkMaxIfStatmentsInShader } from './renderers/utils/checkMaxIfStatmentsInShader'; export { default as Shader } from './shader/Shader'; diff --git a/packages/core/src/renderers/Renderer.js b/packages/core/src/renderers/Renderer.js index 6967107..89ce25f 100644 --- a/packages/core/src/renderers/Renderer.js +++ b/packages/core/src/renderers/Renderer.js @@ -2,7 +2,7 @@ import { sayHello } from '@pixi/utils'; import MaskSystem from './systems/MaskSystem'; import StencilSystem from './systems/StencilSystem'; -import FilterSystem from './systems/FilterSystem'; +// import FilterSystem from './systems/FilterSystem'; import FramebufferSystem from './systems/FramebufferSystem'; import RenderTextureSystem from './systems/RenderTextureSystem'; import TextureSystem from './systems/textures/TextureSystem'; @@ -103,7 +103,7 @@ .addSystem(StencilSystem, 'stencil') .addSystem(ProjectionSystem, 'projection') // .addSystem(TextureGCSystem) - .addSystem(FilterSystem, 'filter') + // .addSystem(FilterSystem, 'filter') .addSystem(RenderTextureSystem, 'renderTexture') .addSystem(BatchSystem, 'batch'); diff --git a/packages/core/src/renderers/filters/Filter.js b/packages/core/src/renderers/filters/Filter.js index 06f1222..2d82c8e 100644 --- a/packages/core/src/renderers/filters/Filter.js +++ b/packages/core/src/renderers/filters/Filter.js @@ -3,7 +3,7 @@ import { BLEND_MODES } from '@pixi/constants'; import { settings } from '@pixi/settings'; import { uid } from '@pixi/utils'; -import extractUniformsFromSrc from './extractUniformsFromSrc'; +// import extractUniformsFromSrc from './extractUniformsFromSrc'; import defaultVertex from './defaultFilter.vert'; import defaultFragment from './defaultFilter.frag'; @@ -28,7 +28,8 @@ this._blendMode = BLEND_MODES.NORMAL; - this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms; + // || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); /** * An object containing the current values of custom uniforms. diff --git a/packages/core/src/renderers/filters/extractUniformsFromSrc.js b/packages/core/src/renderers/filters/extractUniformsFromSrc.js deleted file mode 100644 index 5ec7007..0000000 --- a/packages/core/src/renderers/filters/extractUniformsFromSrc.js +++ /dev/null @@ -1,58 +0,0 @@ -import glCore from 'pixi-gl-core'; - -const defaultValue = glCore.shader.defaultValue; - -export default function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) -{ - const vertUniforms = extractUniformsFromString(vertexSrc, mask); - const fragUniforms = extractUniformsFromString(fragmentSrc, mask); - - return Object.assign(vertUniforms, fragUniforms); -} - -function extractUniformsFromString(string) -{ - const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea|filterClamp)$'); - - const uniforms = {}; - let nameSplit; - - // clean the lines a little - remove extra spaces / tabs etc - // then split along ';' - const lines = string.replace(/\s+/g, ' ') - .split(/\s*;\s*/); - - // loop through.. - for (let i = 0; i < lines.length; i++) - { - const line = lines[i].trim(); - - if (line.indexOf('uniform') > -1) - { - const splitLine = line.split(' '); - const type = splitLine[1]; - - let name = splitLine[2]; - let size = 1; - - if (name.indexOf('[') > -1) - { - // array! - nameSplit = name.split(/\[|]/); - name = nameSplit[0]; - size *= Number(nameSplit[1]); - } - - if (!name.match(maskRegex)) - { - uniforms[name] = { - value: defaultValue(type, size), - name, - type, - }; - } - } - } - - return uniforms; -} diff --git a/packages/core/src/renderers/managers/BlendModeManager.js b/packages/core/src/renderers/managers/BlendModeManager.js deleted file mode 100644 index 7362ae7..0000000 --- a/packages/core/src/renderers/managers/BlendModeManager.js +++ /dev/null @@ -1,45 +0,0 @@ -import WebGLManager from './WebGLManager'; - -/** - * @class - * @memberof PIXI - * @extends PIXI.WebGLManager - */ -export default class BlendModeManager extends WebGLManager -{ - /** - * @param {PIXI.Renderer} renderer - The renderer this manager works for. - */ - constructor(renderer) - { - super(renderer); - - /** - * @member {number} - */ - this.currentBlendMode = 99999; - } - - /** - * Sets-up the given blendMode from WebGL's point of view. - * - * @param {number} blendMode - the blendMode, should be a PixiJS const, such as - * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. - * @return {boolean} Returns if the blend mode was changed. - */ - setBlendMode(blendMode) - { - if (this.currentBlendMode === blendMode) - { - return false; - } - - this.currentBlendMode = blendMode; - - const mode = this.renderer.blendModes[this.currentBlendMode]; - - this.renderer.gl.blendFunc(mode[0], mode[1]); - - return true; - } -} diff --git a/packages/core/src/renderers/systems/geometry/GLBuffer.js b/packages/core/src/renderers/systems/geometry/GLBuffer.js new file mode 100644 index 0000000..0477e8a --- /dev/null +++ b/packages/core/src/renderers/systems/geometry/GLBuffer.js @@ -0,0 +1,9 @@ +export default class GLBuffer +{ + constructor(buffer) + { + this.buffer = buffer; + this.updateID = -1; + this.byteLength = -1; + } +} diff --git a/packages/core/src/renderers/systems/geometry/GeometrySystem.js b/packages/core/src/renderers/systems/geometry/GeometrySystem.js index a972762..d205a6d 100644 --- a/packages/core/src/renderers/systems/geometry/GeometrySystem.js +++ b/packages/core/src/renderers/systems/geometry/GeometrySystem.js @@ -1,17 +1,8 @@ import WebGLSystem from '../WebGLSystem'; +import GLBuffer from './GLBuffer'; const byteSizeMap = { 5126: 4, 5123: 2, 5121: 1 }; -class GLBufferData -{ - constructor(buffer) - { - this.buffer = buffer; - this.updateID = -1; - this.byteLength = -1; - } -} - /** * @class * @extends PIXI.WebGLSystem @@ -269,7 +260,7 @@ if (!buffer._glBuffers[CONTEXT_UID]) { - buffer._glBuffers[CONTEXT_UID] = new GLBufferData(gl.createBuffer()); + buffer._glBuffers[CONTEXT_UID] = new GLBuffer(gl.createBuffer()); } } diff --git a/packages/core/src/renderers/systems/textures/GLTexture.js b/packages/core/src/renderers/systems/textures/GLTexture.js index ceeb379..3f5bf44 100644 --- a/packages/core/src/renderers/systems/textures/GLTexture.js +++ b/packages/core/src/renderers/systems/textures/GLTexture.js @@ -1,75 +1,16 @@ -let FLOATING_POINT_AVAILABLE = false; - -/** - * Helper class to create a WebGL Texture - * - * @class - * @memberof PIXI.glCore - * @param gl {WebGLRenderingContext} The current WebGL context - * @param width {number} the width of the texture - * @param height {number} the height of the texture - * @param format {number} the pixel format of the texture. defaults to gl.RGBA - * @param type {number} the gl type of the texture. defaults to gl.UNSIGNED_BYTE - */ -export default class Texture +export default class GLTexture { - constructor(gl, width, height, format, type) + constructor(texture) { /** - * The current WebGL rendering context - * - * @member {WebGLRenderingContext} - */ - this.gl = gl; - - /** * The WebGL texture * * @member {WebGLTexture} */ - this.texture = gl.createTexture(); + this.texture = texture; - /** - * GL texture is ready for mipmaps - * - * @member {Boolean} - */ - // some settings.. - this.mipmap = false; - - /** - * Set to true to enable pre-multiplied alpha - * - * @member {Boolean} - */ - this.premultiplyAlpha = false; - - /** - * The width of texture - * - * @member {Number} - */ - this.width = width || -1; - /** - * The height of texture - * - * @member {Number} - */ - this.height = height || -1; - - /** - * The pixel format of the texture. defaults to gl.RGBA - * - * @member {Number} - */ - this.format = format || gl.RGBA; - - /** - * The gl type of the texture. defaults to gl.UNSIGNED_BYTE - * - * @member {Number} - */ - this.type = type || gl.UNSIGNED_BYTE; + this.width = -1; + this.height = -1; /** * Texture contents dirty flag @@ -83,156 +24,4 @@ */ this.dirtyStyleId = -1; } - - /** - * Uploads this texture to the GPU - * @param source {HTMLImageElement|ImageData|HTMLVideoElement} the source image of the texture - */ - upload(source) - { - this.bind(); - - const gl = this.gl; - - gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, this.premultiplyAlpha); - - const newWidth = source.videoWidth || source.width; - const newHeight = source.videoHeight || source.height; - - if (newHeight !== this.height || newWidth !== this.width) - { - gl.texImage2D(gl.TEXTURE_2D, 0, this.format, this.format, this.type, source); - } - else - { - gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, this.format, this.type, source); - } - - // if the source is a video, we need to use the videoWidth / videoHeight - // properties as width / height will be incorrect. - this.width = newWidth; - this.height = newHeight; - } - - /** - * Use a data source and uploads this texture to the GPU - * @param data {TypedArray} the data to upload to the texture - * @param width {number} the new width of the texture - * @param height {number} the new height of the texture - */ - uploadData(data, width, height) - { - this.bind(); - - const gl = this.gl; - - if (data instanceof Float32Array) - { - if (!FLOATING_POINT_AVAILABLE) - { - const ext = gl.getExtension('OES_texture_float'); - - if (ext) - { - FLOATING_POINT_AVAILABLE = true; - } - else - { - throw new Error('floating point textures not available'); - } - } - - this.type = gl.FLOAT; - } - else - { - // TODO support for other types - this.type = this.type || gl.UNSIGNED_BYTE; - } - - // what type of data? - gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, this.premultiplyAlpha); - - if (width !== this.width || height !== this.height) - { - gl.texImage2D(gl.TEXTURE_2D, 0, this.format, width, height, 0, this.format, this.type, data || null); - } - else - { - gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, width, height, this.format, this.type, data || null); - } - - this.width = width; - this.height = height; - } - - /** - * Binds the texture - * @param location - */ - bind(location) - { - const gl = this.gl; - - if (location !== undefined) - { - gl.activeTexture(gl.TEXTURE0 + location); - } - - gl.bindTexture(gl.TEXTURE_2D, this.texture); - } - - /** - * Unbinds the texture - */ - unbind() - { - const gl = this.gl; - - gl.bindTexture(gl.TEXTURE_2D, null); - } - - /** - * Destroys this texture - */ - destroy() - { - const gl = this.gl; - // TODO - - gl.deleteTexture(this.texture); - } - - /** - * @static - * @param gl {WebGLRenderingContext} The current WebGL context - * @param source {HTMLImageElement|ImageData} the source image of the texture - * @param premultiplyAlpha {Boolean} If we want to use pre-multiplied alpha - */ - static fromSource(gl, source, premultiplyAlpha) - { - const texture = new Texture(gl); - - texture.premultiplyAlpha = premultiplyAlpha || false; - texture.upload(source); - - return texture; - } - - /** - * @static - * @param gl {WebGLRenderingContext} The current WebGL context - * @param data {TypedArray} the data to upload to the texture - * @param width {number} the new width of the texture - * @param height {number} the new height of the texture - */ - static fromData(gl, data, width, height) - { - // console.log(data, width, height); - const texture = new Texture(gl); - - texture.uploadData(data, width, height); - - return texture; - } } diff --git a/packages/core/src/renderers/systems/textures/TextureSystem.js b/packages/core/src/renderers/systems/textures/TextureSystem.js index b000db2..5c159e2 100644 --- a/packages/core/src/renderers/systems/textures/TextureSystem.js +++ b/packages/core/src/renderers/systems/textures/TextureSystem.js @@ -56,8 +56,13 @@ // TODO move this.. to a nice make empty textures class.. this.emptyTextures = {}; - this.emptyTextures[gl.TEXTURE_2D] = new GLTexture.fromData(this.gl, null, 1, 1); - this.emptyTextures[gl.TEXTURE_CUBE_MAP] = new GLTexture(this.gl); + const emptyTexture2D = new GLTexture(gl.createTexture()); + + gl.bindTexture(gl.TEXTURE_2D, emptyTexture2D.texture); + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array(4)); + + this.emptyTextures[gl.TEXTURE_2D] = emptyTexture2D; + this.emptyTextures[gl.TEXTURE_CUBE_MAP] = new GLTexture(gl.createTexture()); gl.bindTexture(gl.TEXTURE_CUBE_MAP, this.emptyTextures[gl.TEXTURE_CUBE_MAP].texture); @@ -136,9 +141,8 @@ initTexture(texture) { - const glTexture = new GLTexture(this.gl, -1, -1, texture.format, texture.type); + const glTexture = new GLTexture(this.gl.createTexture()); - glTexture.premultiplyAlpha = texture.premultiplyAlpha; // guarentee an update.. glTexture.dirtyId = -1; @@ -188,7 +192,7 @@ { this.unbind(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + texture._glTextures[this.renderer.CONTEXT_UID].texture.destroy(); texture.off('dispose', this.destroyTexture, this); delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -209,7 +213,6 @@ { const glTexture = texture._glTextures[this.CONTEXT_UID]; - glTexture.mipmap = texture.mipmap && texture.isPowerOfTwo; if (!glTexture) { return; @@ -223,14 +226,15 @@ { this.setStyle(texture, glTexture); } + glTexture.dirtyStyleId = texture.dirtyStyleId; } - setStyle(texture, glTexture) + setStyle(texture) { const gl = this.gl; - if (glTexture.mipmap) + if (texture.mipmap && texture.isPowerOfTwo) { gl.generateMipmap(texture.target); } @@ -238,7 +242,7 @@ gl.texParameteri(texture.target, gl.TEXTURE_WRAP_S, texture.wrapMode); gl.texParameteri(texture.target, gl.TEXTURE_WRAP_T, texture.wrapMode); - if (glTexture.mipmap) + if (texture.mipmap) { /* eslint-disable max-len */ gl.texParameteri(texture.target, gl.TEXTURE_MIN_FILTER, texture.scaleMode ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); diff --git a/packages/core/src/renderers/utils/RenderTarget.js b/packages/core/src/renderers/utils/RenderTarget.js deleted file mode 100644 index 3f129ed..0000000 --- a/packages/core/src/renderers/utils/RenderTarget.js +++ /dev/null @@ -1,326 +0,0 @@ -import { Rectangle, Matrix } from '@pixi/math'; -import { SCALE_MODES } from '@pixi/constants'; -import { settings } from '@pixi/settings'; -import { GLFramebuffer } from 'pixi-gl-core'; - -/** - * @class - * @memberof PIXI - */ -export default class RenderTarget -{ - /** - * @param {WebGLRenderingContext} gl - The current WebGL drawing context - * @param {number} [width=0] - the horizontal range of the filter - * @param {number} [height=0] - the vertical range of the filter - * @param {number} [scaleMode=PIXI.settings.SCALE_MODE] - See {@link PIXI.SCALE_MODES} for possible values - * @param {number} [resolution=1] - The current resolution / device pixel ratio - * @param {boolean} [root=false] - Whether this object is the root element or not - */ - constructor(gl, width, height, scaleMode, resolution, root) - { - // TODO Resolution could go here ( eg low res blurs ) - - /** - * The current WebGL drawing context. - * - * @member {WebGLRenderingContext} - */ - this.gl = gl; - - // next time to create a frame buffer and texture - - /** - * A frame buffer - * - * @member {PIXI.glCore.GLFramebuffer} - */ - this.frameBuffer = null; - - /** - * The texture - * - * @member {PIXI.glCore.GLTexture} - */ - this.texture = null; - - /** - * The background colour of this render target, as an array of [r,g,b,a] values - * - * @member {number[]} - */ - this.clearColor = [0, 0, 0, 0]; - - /** - * The size of the object as a rectangle - * - * @member {PIXI.Rectangle} - */ - this.size = new Rectangle(0, 0, 1, 1); - - /** - * The current resolution / device pixel ratio - * - * @member {number} - * @default 1 - */ - this.resolution = resolution || settings.RESOLUTION; - - /** - * The projection matrix - * - * @member {PIXI.Matrix} - */ - this.projectionMatrix = new Matrix(); - - /** - * The object's transform - * - * @member {PIXI.Matrix} - */ - this.transform = null; - - /** - * The frame. - * - * @member {PIXI.Rectangle} - */ - this.frame = null; - - /** - * The stencil buffer stores masking data for the render target - * - * @member {glCore.GLBuffer} - */ - this.defaultFrame = new Rectangle(); - this.destinationFrame = null; - this.sourceFrame = null; - - /** - * The stencil buffer stores masking data for the render target - * - * @member {glCore.GLBuffer} - */ - this.stencilBuffer = null; - - /** - * The data structure for the stencil masks - * - * @member {PIXI.Graphics[]} - */ - this.stencilMaskStack = []; - - /** - * Stores filter data for the render target - * - * @member {object[]} - */ - this.filterData = null; - - /** - * The scale mode. - * - * @member {number} - * @default PIXI.settings.SCALE_MODE - * @see PIXI.SCALE_MODES - */ - this.scaleMode = scaleMode !== undefined ? scaleMode : settings.SCALE_MODE; - - /** - * Whether this object is the root element or not - * - * @member {boolean} - */ - this.root = root; - - if (!this.root) - { - this.frameBuffer = GLFramebuffer.createRGBA(gl, 100, 100); - - if (this.scaleMode === SCALE_MODES.NEAREST) - { - this.frameBuffer.texture.enableNearestScaling(); - } - else - { - this.frameBuffer.texture.enableLinearScaling(); - } - /* - A frame buffer needs a target to render to.. - create a texture and bind it attach it to the framebuffer.. - */ - - // this is used by the base texture - this.texture = this.frameBuffer.texture; - } - else - { - // make it a null framebuffer.. - this.frameBuffer = new GLFramebuffer(gl, 100, 100); - this.frameBuffer.framebuffer = null; - } - - this.setFrame(); - - this.resize(width, height); - } - - /** - * Clears the filter texture. - * - * @param {number[]} [clearColor=this.clearColor] - Array of [r,g,b,a] to clear the framebuffer - */ - clear(clearColor) - { - const cc = clearColor || this.clearColor; - - this.frameBuffer.clear(cc[0], cc[1], cc[2], cc[3]);// r,g,b,a); - } - - /** - * Binds the stencil buffer. - * - */ - attachStencilBuffer() - { - // TODO check if stencil is done? - /** - * The stencil buffer is used for masking in pixi - * lets create one and then add attach it to the framebuffer.. - */ - if (!this.root) - { - this.frameBuffer.enableStencil(); - } - } - - /** - * Sets the frame of the render target. - * - * @param {Rectangle} destinationFrame - The destination frame. - * @param {Rectangle} sourceFrame - The source frame. - */ - setFrame(destinationFrame, sourceFrame) - { - this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; - } - - /** - * Binds the buffers and initialises the viewport. - * - */ - activate() - { - // TOOD refactor usage of frame.. - const gl = this.gl; - - // make sure the texture is unbound! - this.frameBuffer.bind(); - - this.calculateProjection(this.destinationFrame, this.sourceFrame); - - if (this.transform) - { - this.projectionMatrix.append(this.transform); - } - - // TODO add a check as them may be the same! - if (this.destinationFrame !== this.sourceFrame) - { - // gl.enable(gl.SCISSOR_TEST); - gl.scissor( - this.destinationFrame.x | 0, - this.destinationFrame.y | 0, - (this.destinationFrame.width * this.resolution) | 0, - (this.destinationFrame.height * this.resolution) | 0 - ); - } - else - { - // gl.disable(gl.SCISSOR_TEST); - } - - // TODO - does not need to be updated all the time?? - gl.viewport( - this.destinationFrame.x | 0, - this.destinationFrame.y | 0, - (this.destinationFrame.width * this.resolution) | 0, - (this.destinationFrame.height * this.resolution) | 0 - ); - } - - /** - * Updates the projection matrix based on a projection frame (which is a rectangle) - * - * @param {Rectangle} destinationFrame - The destination frame. - * @param {Rectangle} sourceFrame - The source frame. - */ - calculateProjection(destinationFrame, sourceFrame) - { - const pm = this.projectionMatrix; - - sourceFrame = sourceFrame || destinationFrame; - - pm.identity(); - - // TODO: make dest scale source - if (!this.root) - { - pm.a = 1 / destinationFrame.width * 2; - pm.d = 1 / destinationFrame.height * 2; - - pm.tx = -1 - (sourceFrame.x * pm.a); - pm.ty = -1 - (sourceFrame.y * pm.d); - } - else - { - pm.a = 1 / destinationFrame.width * 2; - pm.d = -1 / destinationFrame.height * 2; - - pm.tx = -1 - (sourceFrame.x * pm.a); - pm.ty = 1 - (sourceFrame.y * pm.d); - } - } - - /** - * Resizes the texture to the specified width and height - * - * @param {number} width - the new width of the texture - * @param {number} height - the new height of the texture - */ - resize(width, height) - { - width = width | 0; - height = height | 0; - - if (this.size.width === width && this.size.height === height) - { - return; - } - - this.size.width = width; - this.size.height = height; - - this.defaultFrame.width = width; - this.defaultFrame.height = height; - - this.frameBuffer.resize(width * this.resolution, height * this.resolution); - - const projectionFrame = this.frame || this.size; - - this.calculateProjection(projectionFrame); - } - - /** - * Destroys the render target. - * - */ - destroy() - { - this.frameBuffer.destroy(); - - this.frameBuffer = null; - this.texture = null; - } -} diff --git a/packages/core/src/shader/defaultValue.js b/packages/core/src/shader/defaultValue.js new file mode 100644 index 0000000..847a069 --- /dev/null +++ b/packages/core/src/shader/defaultValue.js @@ -0,0 +1,78 @@ +function booleanArray(size) +{ + const array = new Array(size); + + for (let i = 0; i < array.length; i++) + { + array[i] = false; + } + + return array; +} + +/** + * @class + * @memberof PIXI.glCore.shader + * @param type {String} Type of value + * @param size {Number} + */ +export default function defaultValue(type, size) +{ + switch (type) + { + case 'float': + return 0; + + case 'vec2': + return new Float32Array(2 * size); + + case 'vec3': + return new Float32Array(3 * size); + + case 'vec4': + return new Float32Array(4 * size); + + case 'int': + case 'sampler2D': + return 0; + + case 'ivec2': + return new Int32Array(2 * size); + + case 'ivec3': + return new Int32Array(3 * size); + + case 'ivec4': + return new Int32Array(4 * size); + + case 'bool': + return false; + + case 'bvec2': + + return booleanArray(2 * size); + + case 'bvec3': + return booleanArray(3 * size); + + case 'bvec4': + return booleanArray(4 * size); + + case 'mat2': + return new Float32Array([1, 0, + 0, 1]); + + case 'mat3': + return new Float32Array([1, 0, 0, + 0, 1, 0, + 0, 0, 1]); + + case 'mat4': + return new Float32Array([1, 0, 0, 0, + 0, 1, 0, 0, + 0, 0, 1, 0, + 0, 0, 0, 1]); + } + + return 0; +} diff --git a/packages/core/src/shader/extractUniformsFromSrc.js b/packages/core/src/shader/extractUniformsFromSrc.js index 39737fd..3d02c0a 100644 --- a/packages/core/src/shader/extractUniformsFromSrc.js +++ b/packages/core/src/shader/extractUniformsFromSrc.js @@ -1,6 +1,4 @@ -import glCore from 'pixi-gl-core'; - -const defaultValue = glCore.shader.defaultValue; +import defaultValue from './defaultValue'; export default function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { diff --git a/packages/core/src/textures/resources/BaseImageResource.js b/packages/core/src/textures/resources/BaseImageResource.js index 6e490fa..c3012b9 100644 --- a/packages/core/src/textures/resources/BaseImageResource.js +++ b/packages/core/src/textures/resources/BaseImageResource.js @@ -48,13 +48,27 @@ * @param {PIXI.Renderer} renderer Upload to the renderer * @param {PIXI.BaseTexture} baseTexture Reference to parent texture * @param {PIXI.glCore.GLTexture} glTexture Reference + * @param {HTMLImageElement|HTMLCanvasElement|HTMLVideoElement|SVGElement} source (optional) */ - upload(renderer, baseTexture, glTexture) + upload(renderer, baseTexture, glTexture, source) { - // TODO: move glTexture.upload somewhere else - glTexture.format = baseTexture.format; - glTexture.type = baseTexture.type; - glTexture.upload(this.source); + const gl = renderer.gl; + + source = source || this.source; + + gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, baseTexture.premultiplyAlpha); + + if (glTexture.width === baseTexture.width && glTexture.height === baseTexture.height) + { + gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, baseTexture.format, baseTexture.type, source); + } + else + { + glTexture.width = baseTexture.width; + glTexture.height = baseTexture.height; + + gl.texImage2D(gl.TEXTURE_2D, 0, baseTexture.format, baseTexture.format, baseTexture.type, source); + } return true; } diff --git a/packages/core/src/textures/resources/BufferResource.js b/packages/core/src/textures/resources/BufferResource.js index 7f1c12c..7ddfd9c 100644 --- a/packages/core/src/textures/resources/BufferResource.js +++ b/packages/core/src/textures/resources/BufferResource.js @@ -39,19 +39,43 @@ * @param {PIXI.Renderer} renderer Upload to the renderer * @param {PIXI.BaseTexture} baseTexture Reference to parent texture */ - upload(renderer, baseTexture) + upload(renderer, baseTexture, glTexture) { - renderer.gl.texImage2D( - baseTexture.target, - 0, - baseTexture.format, - baseTexture.width, - baseTexture.height, - 0, - baseTexture.format, - baseTexture.type, - this.data - ); + const gl = renderer.gl; + + gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, baseTexture.premultiplyAlpha); + + if (glTexture.width === baseTexture.width && glTexture.height === baseTexture.height) + { + gl.texSubImage2D( + baseTexture.target, + 0, + 0, + 0, + baseTexture.width, + baseTexture.height, + baseTexture.format, + baseTexture.type, + this.data + ); + } + else + { + glTexture.width = baseTexture.width; + glTexture.height = baseTexture.height; + + gl.texImage2D( + baseTexture.target, + 0, + baseTexture.format, + baseTexture.width, + baseTexture.height, + 0, + baseTexture.format, + baseTexture.type, + this.data + ); + } return true; } diff --git a/packages/core/src/textures/resources/ImageResource.js b/packages/core/src/textures/resources/ImageResource.js index a4b3ca6..59c391a 100644 --- a/packages/core/src/textures/resources/ImageResource.js +++ b/packages/core/src/textures/resources/ImageResource.js @@ -192,13 +192,16 @@ return false; } } - glTexture.upload(this.bitmap); + + super.upload(renderer, baseTexture, glTexture, this.bitmap); + if (!this.preserveBitmap) { if (this.bitmap.close) { this.bitmap.close(); } + this.bitmap = null; } } diff --git a/packages/core/src/textures/resources/VideoResource.js b/packages/core/src/textures/resources/VideoResource.js index 246c1c8..4094351 100644 --- a/packages/core/src/textures/resources/VideoResource.js +++ b/packages/core/src/textures/resources/VideoResource.js @@ -254,6 +254,7 @@ { return this._autoUpdate; } + set autoUpdate(value) // eslint-disable-line require-jsdoc { if (value !== this._autoUpdate) diff --git a/packages/particles/package.json b/packages/particles/package.json index 8f7187e..1040b20 100644 --- a/packages/particles/package.json +++ b/packages/particles/package.json @@ -26,8 +26,7 @@ "@pixi/constants": "^5.0.0-alpha", "@pixi/utils": "^5.0.0-alpha", "@pixi/display": "^5.0.0-alpha", - "@pixi/math": "^5.0.0-alpha", - "pixi-gl-core": "^2.0.0-alpha" + "@pixi/math": "^5.0.0-alpha" }, "devDependencies": { "floss": "^2.1.3" diff --git a/bundles/pixi.js/src/index.js b/bundles/pixi.js/src/index.js index fb839a0..a879872 100644 --- a/bundles/pixi.js/src/index.js +++ b/bundles/pixi.js/src/index.js @@ -9,7 +9,7 @@ import * as loaders from '@pixi/loaders'; import * as math from '@pixi/math'; import * as mesh from '@pixi/mesh'; -import * as particles from '@pixi/particles'; +// import * as particles from '@pixi/particles'; import * as prepare from '@pixi/prepare'; import * as sprite from '@pixi/sprite'; import * as spriteAnimated from '@pixi/sprite-animated'; @@ -38,7 +38,7 @@ core.Renderer.registerPlugin('graphics', graphics.GraphicsRenderer); core.Renderer.registerPlugin('interaction', interaction.InteractionManager); core.Renderer.registerPlugin('mesh', mesh.MeshRenderer); -core.Renderer.registerPlugin('particle', particles.ParticleRenderer); +// core.Renderer.registerPlugin('particle', particles.ParticleRenderer); core.Renderer.registerPlugin('prepare', prepare.Prepare); core.Renderer.registerPlugin('sprite', sprite.SpriteRenderer); core.Renderer.registerPlugin('tilingSprite', spriteTiling.TilingSpriteRenderer); @@ -120,7 +120,7 @@ loaders, math, mesh, - particles, + // particles, sprite, spriteAnimated, spritesheet, diff --git a/packages/core/package.json b/packages/core/package.json index 30e2e83..7d01377 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -29,7 +29,6 @@ "earcut": "^2.0.7", "eventemitter3": "^2.0.0", "ismobilejs": "^0.4.0", - "pixi-gl-core": "^2.0.0-alpha", "mini-runner": "^1.0.1", "@pixi/math": "^5.0.0-alpha", "@pixi/constants": "^5.0.0-alpha", diff --git a/packages/core/src/index.js b/packages/core/src/index.js index 0951de6..8b8e67c 100644 --- a/packages/core/src/index.js +++ b/packages/core/src/index.js @@ -14,7 +14,6 @@ export { default as WebGLSystem } from './renderers/systems/WebGLSystem'; export { default as State } from './renderers/State'; export { default as ObjectRenderer } from './renderers/utils/ObjectRenderer'; -export { default as RenderTarget } from './renderers/utils/RenderTarget'; export { default as Quad } from './renderers/utils/Quad'; export { default as checkMaxIfStatmentsInShader } from './renderers/utils/checkMaxIfStatmentsInShader'; export { default as Shader } from './shader/Shader'; diff --git a/packages/core/src/renderers/Renderer.js b/packages/core/src/renderers/Renderer.js index 6967107..89ce25f 100644 --- a/packages/core/src/renderers/Renderer.js +++ b/packages/core/src/renderers/Renderer.js @@ -2,7 +2,7 @@ import { sayHello } from '@pixi/utils'; import MaskSystem from './systems/MaskSystem'; import StencilSystem from './systems/StencilSystem'; -import FilterSystem from './systems/FilterSystem'; +// import FilterSystem from './systems/FilterSystem'; import FramebufferSystem from './systems/FramebufferSystem'; import RenderTextureSystem from './systems/RenderTextureSystem'; import TextureSystem from './systems/textures/TextureSystem'; @@ -103,7 +103,7 @@ .addSystem(StencilSystem, 'stencil') .addSystem(ProjectionSystem, 'projection') // .addSystem(TextureGCSystem) - .addSystem(FilterSystem, 'filter') + // .addSystem(FilterSystem, 'filter') .addSystem(RenderTextureSystem, 'renderTexture') .addSystem(BatchSystem, 'batch'); diff --git a/packages/core/src/renderers/filters/Filter.js b/packages/core/src/renderers/filters/Filter.js index 06f1222..2d82c8e 100644 --- a/packages/core/src/renderers/filters/Filter.js +++ b/packages/core/src/renderers/filters/Filter.js @@ -3,7 +3,7 @@ import { BLEND_MODES } from '@pixi/constants'; import { settings } from '@pixi/settings'; import { uid } from '@pixi/utils'; -import extractUniformsFromSrc from './extractUniformsFromSrc'; +// import extractUniformsFromSrc from './extractUniformsFromSrc'; import defaultVertex from './defaultFilter.vert'; import defaultFragment from './defaultFilter.frag'; @@ -28,7 +28,8 @@ this._blendMode = BLEND_MODES.NORMAL; - this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms; + // || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); /** * An object containing the current values of custom uniforms. diff --git a/packages/core/src/renderers/filters/extractUniformsFromSrc.js b/packages/core/src/renderers/filters/extractUniformsFromSrc.js deleted file mode 100644 index 5ec7007..0000000 --- a/packages/core/src/renderers/filters/extractUniformsFromSrc.js +++ /dev/null @@ -1,58 +0,0 @@ -import glCore from 'pixi-gl-core'; - -const defaultValue = glCore.shader.defaultValue; - -export default function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) -{ - const vertUniforms = extractUniformsFromString(vertexSrc, mask); - const fragUniforms = extractUniformsFromString(fragmentSrc, mask); - - return Object.assign(vertUniforms, fragUniforms); -} - -function extractUniformsFromString(string) -{ - const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea|filterClamp)$'); - - const uniforms = {}; - let nameSplit; - - // clean the lines a little - remove extra spaces / tabs etc - // then split along ';' - const lines = string.replace(/\s+/g, ' ') - .split(/\s*;\s*/); - - // loop through.. - for (let i = 0; i < lines.length; i++) - { - const line = lines[i].trim(); - - if (line.indexOf('uniform') > -1) - { - const splitLine = line.split(' '); - const type = splitLine[1]; - - let name = splitLine[2]; - let size = 1; - - if (name.indexOf('[') > -1) - { - // array! - nameSplit = name.split(/\[|]/); - name = nameSplit[0]; - size *= Number(nameSplit[1]); - } - - if (!name.match(maskRegex)) - { - uniforms[name] = { - value: defaultValue(type, size), - name, - type, - }; - } - } - } - - return uniforms; -} diff --git a/packages/core/src/renderers/managers/BlendModeManager.js b/packages/core/src/renderers/managers/BlendModeManager.js deleted file mode 100644 index 7362ae7..0000000 --- a/packages/core/src/renderers/managers/BlendModeManager.js +++ /dev/null @@ -1,45 +0,0 @@ -import WebGLManager from './WebGLManager'; - -/** - * @class - * @memberof PIXI - * @extends PIXI.WebGLManager - */ -export default class BlendModeManager extends WebGLManager -{ - /** - * @param {PIXI.Renderer} renderer - The renderer this manager works for. - */ - constructor(renderer) - { - super(renderer); - - /** - * @member {number} - */ - this.currentBlendMode = 99999; - } - - /** - * Sets-up the given blendMode from WebGL's point of view. - * - * @param {number} blendMode - the blendMode, should be a PixiJS const, such as - * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. - * @return {boolean} Returns if the blend mode was changed. - */ - setBlendMode(blendMode) - { - if (this.currentBlendMode === blendMode) - { - return false; - } - - this.currentBlendMode = blendMode; - - const mode = this.renderer.blendModes[this.currentBlendMode]; - - this.renderer.gl.blendFunc(mode[0], mode[1]); - - return true; - } -} diff --git a/packages/core/src/renderers/systems/geometry/GLBuffer.js b/packages/core/src/renderers/systems/geometry/GLBuffer.js new file mode 100644 index 0000000..0477e8a --- /dev/null +++ b/packages/core/src/renderers/systems/geometry/GLBuffer.js @@ -0,0 +1,9 @@ +export default class GLBuffer +{ + constructor(buffer) + { + this.buffer = buffer; + this.updateID = -1; + this.byteLength = -1; + } +} diff --git a/packages/core/src/renderers/systems/geometry/GeometrySystem.js b/packages/core/src/renderers/systems/geometry/GeometrySystem.js index a972762..d205a6d 100644 --- a/packages/core/src/renderers/systems/geometry/GeometrySystem.js +++ b/packages/core/src/renderers/systems/geometry/GeometrySystem.js @@ -1,17 +1,8 @@ import WebGLSystem from '../WebGLSystem'; +import GLBuffer from './GLBuffer'; const byteSizeMap = { 5126: 4, 5123: 2, 5121: 1 }; -class GLBufferData -{ - constructor(buffer) - { - this.buffer = buffer; - this.updateID = -1; - this.byteLength = -1; - } -} - /** * @class * @extends PIXI.WebGLSystem @@ -269,7 +260,7 @@ if (!buffer._glBuffers[CONTEXT_UID]) { - buffer._glBuffers[CONTEXT_UID] = new GLBufferData(gl.createBuffer()); + buffer._glBuffers[CONTEXT_UID] = new GLBuffer(gl.createBuffer()); } } diff --git a/packages/core/src/renderers/systems/textures/GLTexture.js b/packages/core/src/renderers/systems/textures/GLTexture.js index ceeb379..3f5bf44 100644 --- a/packages/core/src/renderers/systems/textures/GLTexture.js +++ b/packages/core/src/renderers/systems/textures/GLTexture.js @@ -1,75 +1,16 @@ -let FLOATING_POINT_AVAILABLE = false; - -/** - * Helper class to create a WebGL Texture - * - * @class - * @memberof PIXI.glCore - * @param gl {WebGLRenderingContext} The current WebGL context - * @param width {number} the width of the texture - * @param height {number} the height of the texture - * @param format {number} the pixel format of the texture. defaults to gl.RGBA - * @param type {number} the gl type of the texture. defaults to gl.UNSIGNED_BYTE - */ -export default class Texture +export default class GLTexture { - constructor(gl, width, height, format, type) + constructor(texture) { /** - * The current WebGL rendering context - * - * @member {WebGLRenderingContext} - */ - this.gl = gl; - - /** * The WebGL texture * * @member {WebGLTexture} */ - this.texture = gl.createTexture(); + this.texture = texture; - /** - * GL texture is ready for mipmaps - * - * @member {Boolean} - */ - // some settings.. - this.mipmap = false; - - /** - * Set to true to enable pre-multiplied alpha - * - * @member {Boolean} - */ - this.premultiplyAlpha = false; - - /** - * The width of texture - * - * @member {Number} - */ - this.width = width || -1; - /** - * The height of texture - * - * @member {Number} - */ - this.height = height || -1; - - /** - * The pixel format of the texture. defaults to gl.RGBA - * - * @member {Number} - */ - this.format = format || gl.RGBA; - - /** - * The gl type of the texture. defaults to gl.UNSIGNED_BYTE - * - * @member {Number} - */ - this.type = type || gl.UNSIGNED_BYTE; + this.width = -1; + this.height = -1; /** * Texture contents dirty flag @@ -83,156 +24,4 @@ */ this.dirtyStyleId = -1; } - - /** - * Uploads this texture to the GPU - * @param source {HTMLImageElement|ImageData|HTMLVideoElement} the source image of the texture - */ - upload(source) - { - this.bind(); - - const gl = this.gl; - - gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, this.premultiplyAlpha); - - const newWidth = source.videoWidth || source.width; - const newHeight = source.videoHeight || source.height; - - if (newHeight !== this.height || newWidth !== this.width) - { - gl.texImage2D(gl.TEXTURE_2D, 0, this.format, this.format, this.type, source); - } - else - { - gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, this.format, this.type, source); - } - - // if the source is a video, we need to use the videoWidth / videoHeight - // properties as width / height will be incorrect. - this.width = newWidth; - this.height = newHeight; - } - - /** - * Use a data source and uploads this texture to the GPU - * @param data {TypedArray} the data to upload to the texture - * @param width {number} the new width of the texture - * @param height {number} the new height of the texture - */ - uploadData(data, width, height) - { - this.bind(); - - const gl = this.gl; - - if (data instanceof Float32Array) - { - if (!FLOATING_POINT_AVAILABLE) - { - const ext = gl.getExtension('OES_texture_float'); - - if (ext) - { - FLOATING_POINT_AVAILABLE = true; - } - else - { - throw new Error('floating point textures not available'); - } - } - - this.type = gl.FLOAT; - } - else - { - // TODO support for other types - this.type = this.type || gl.UNSIGNED_BYTE; - } - - // what type of data? - gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, this.premultiplyAlpha); - - if (width !== this.width || height !== this.height) - { - gl.texImage2D(gl.TEXTURE_2D, 0, this.format, width, height, 0, this.format, this.type, data || null); - } - else - { - gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, width, height, this.format, this.type, data || null); - } - - this.width = width; - this.height = height; - } - - /** - * Binds the texture - * @param location - */ - bind(location) - { - const gl = this.gl; - - if (location !== undefined) - { - gl.activeTexture(gl.TEXTURE0 + location); - } - - gl.bindTexture(gl.TEXTURE_2D, this.texture); - } - - /** - * Unbinds the texture - */ - unbind() - { - const gl = this.gl; - - gl.bindTexture(gl.TEXTURE_2D, null); - } - - /** - * Destroys this texture - */ - destroy() - { - const gl = this.gl; - // TODO - - gl.deleteTexture(this.texture); - } - - /** - * @static - * @param gl {WebGLRenderingContext} The current WebGL context - * @param source {HTMLImageElement|ImageData} the source image of the texture - * @param premultiplyAlpha {Boolean} If we want to use pre-multiplied alpha - */ - static fromSource(gl, source, premultiplyAlpha) - { - const texture = new Texture(gl); - - texture.premultiplyAlpha = premultiplyAlpha || false; - texture.upload(source); - - return texture; - } - - /** - * @static - * @param gl {WebGLRenderingContext} The current WebGL context - * @param data {TypedArray} the data to upload to the texture - * @param width {number} the new width of the texture - * @param height {number} the new height of the texture - */ - static fromData(gl, data, width, height) - { - // console.log(data, width, height); - const texture = new Texture(gl); - - texture.uploadData(data, width, height); - - return texture; - } } diff --git a/packages/core/src/renderers/systems/textures/TextureSystem.js b/packages/core/src/renderers/systems/textures/TextureSystem.js index b000db2..5c159e2 100644 --- a/packages/core/src/renderers/systems/textures/TextureSystem.js +++ b/packages/core/src/renderers/systems/textures/TextureSystem.js @@ -56,8 +56,13 @@ // TODO move this.. to a nice make empty textures class.. this.emptyTextures = {}; - this.emptyTextures[gl.TEXTURE_2D] = new GLTexture.fromData(this.gl, null, 1, 1); - this.emptyTextures[gl.TEXTURE_CUBE_MAP] = new GLTexture(this.gl); + const emptyTexture2D = new GLTexture(gl.createTexture()); + + gl.bindTexture(gl.TEXTURE_2D, emptyTexture2D.texture); + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array(4)); + + this.emptyTextures[gl.TEXTURE_2D] = emptyTexture2D; + this.emptyTextures[gl.TEXTURE_CUBE_MAP] = new GLTexture(gl.createTexture()); gl.bindTexture(gl.TEXTURE_CUBE_MAP, this.emptyTextures[gl.TEXTURE_CUBE_MAP].texture); @@ -136,9 +141,8 @@ initTexture(texture) { - const glTexture = new GLTexture(this.gl, -1, -1, texture.format, texture.type); + const glTexture = new GLTexture(this.gl.createTexture()); - glTexture.premultiplyAlpha = texture.premultiplyAlpha; // guarentee an update.. glTexture.dirtyId = -1; @@ -188,7 +192,7 @@ { this.unbind(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + texture._glTextures[this.renderer.CONTEXT_UID].texture.destroy(); texture.off('dispose', this.destroyTexture, this); delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -209,7 +213,6 @@ { const glTexture = texture._glTextures[this.CONTEXT_UID]; - glTexture.mipmap = texture.mipmap && texture.isPowerOfTwo; if (!glTexture) { return; @@ -223,14 +226,15 @@ { this.setStyle(texture, glTexture); } + glTexture.dirtyStyleId = texture.dirtyStyleId; } - setStyle(texture, glTexture) + setStyle(texture) { const gl = this.gl; - if (glTexture.mipmap) + if (texture.mipmap && texture.isPowerOfTwo) { gl.generateMipmap(texture.target); } @@ -238,7 +242,7 @@ gl.texParameteri(texture.target, gl.TEXTURE_WRAP_S, texture.wrapMode); gl.texParameteri(texture.target, gl.TEXTURE_WRAP_T, texture.wrapMode); - if (glTexture.mipmap) + if (texture.mipmap) { /* eslint-disable max-len */ gl.texParameteri(texture.target, gl.TEXTURE_MIN_FILTER, texture.scaleMode ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); diff --git a/packages/core/src/renderers/utils/RenderTarget.js b/packages/core/src/renderers/utils/RenderTarget.js deleted file mode 100644 index 3f129ed..0000000 --- a/packages/core/src/renderers/utils/RenderTarget.js +++ /dev/null @@ -1,326 +0,0 @@ -import { Rectangle, Matrix } from '@pixi/math'; -import { SCALE_MODES } from '@pixi/constants'; -import { settings } from '@pixi/settings'; -import { GLFramebuffer } from 'pixi-gl-core'; - -/** - * @class - * @memberof PIXI - */ -export default class RenderTarget -{ - /** - * @param {WebGLRenderingContext} gl - The current WebGL drawing context - * @param {number} [width=0] - the horizontal range of the filter - * @param {number} [height=0] - the vertical range of the filter - * @param {number} [scaleMode=PIXI.settings.SCALE_MODE] - See {@link PIXI.SCALE_MODES} for possible values - * @param {number} [resolution=1] - The current resolution / device pixel ratio - * @param {boolean} [root=false] - Whether this object is the root element or not - */ - constructor(gl, width, height, scaleMode, resolution, root) - { - // TODO Resolution could go here ( eg low res blurs ) - - /** - * The current WebGL drawing context. - * - * @member {WebGLRenderingContext} - */ - this.gl = gl; - - // next time to create a frame buffer and texture - - /** - * A frame buffer - * - * @member {PIXI.glCore.GLFramebuffer} - */ - this.frameBuffer = null; - - /** - * The texture - * - * @member {PIXI.glCore.GLTexture} - */ - this.texture = null; - - /** - * The background colour of this render target, as an array of [r,g,b,a] values - * - * @member {number[]} - */ - this.clearColor = [0, 0, 0, 0]; - - /** - * The size of the object as a rectangle - * - * @member {PIXI.Rectangle} - */ - this.size = new Rectangle(0, 0, 1, 1); - - /** - * The current resolution / device pixel ratio - * - * @member {number} - * @default 1 - */ - this.resolution = resolution || settings.RESOLUTION; - - /** - * The projection matrix - * - * @member {PIXI.Matrix} - */ - this.projectionMatrix = new Matrix(); - - /** - * The object's transform - * - * @member {PIXI.Matrix} - */ - this.transform = null; - - /** - * The frame. - * - * @member {PIXI.Rectangle} - */ - this.frame = null; - - /** - * The stencil buffer stores masking data for the render target - * - * @member {glCore.GLBuffer} - */ - this.defaultFrame = new Rectangle(); - this.destinationFrame = null; - this.sourceFrame = null; - - /** - * The stencil buffer stores masking data for the render target - * - * @member {glCore.GLBuffer} - */ - this.stencilBuffer = null; - - /** - * The data structure for the stencil masks - * - * @member {PIXI.Graphics[]} - */ - this.stencilMaskStack = []; - - /** - * Stores filter data for the render target - * - * @member {object[]} - */ - this.filterData = null; - - /** - * The scale mode. - * - * @member {number} - * @default PIXI.settings.SCALE_MODE - * @see PIXI.SCALE_MODES - */ - this.scaleMode = scaleMode !== undefined ? scaleMode : settings.SCALE_MODE; - - /** - * Whether this object is the root element or not - * - * @member {boolean} - */ - this.root = root; - - if (!this.root) - { - this.frameBuffer = GLFramebuffer.createRGBA(gl, 100, 100); - - if (this.scaleMode === SCALE_MODES.NEAREST) - { - this.frameBuffer.texture.enableNearestScaling(); - } - else - { - this.frameBuffer.texture.enableLinearScaling(); - } - /* - A frame buffer needs a target to render to.. - create a texture and bind it attach it to the framebuffer.. - */ - - // this is used by the base texture - this.texture = this.frameBuffer.texture; - } - else - { - // make it a null framebuffer.. - this.frameBuffer = new GLFramebuffer(gl, 100, 100); - this.frameBuffer.framebuffer = null; - } - - this.setFrame(); - - this.resize(width, height); - } - - /** - * Clears the filter texture. - * - * @param {number[]} [clearColor=this.clearColor] - Array of [r,g,b,a] to clear the framebuffer - */ - clear(clearColor) - { - const cc = clearColor || this.clearColor; - - this.frameBuffer.clear(cc[0], cc[1], cc[2], cc[3]);// r,g,b,a); - } - - /** - * Binds the stencil buffer. - * - */ - attachStencilBuffer() - { - // TODO check if stencil is done? - /** - * The stencil buffer is used for masking in pixi - * lets create one and then add attach it to the framebuffer.. - */ - if (!this.root) - { - this.frameBuffer.enableStencil(); - } - } - - /** - * Sets the frame of the render target. - * - * @param {Rectangle} destinationFrame - The destination frame. - * @param {Rectangle} sourceFrame - The source frame. - */ - setFrame(destinationFrame, sourceFrame) - { - this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; - } - - /** - * Binds the buffers and initialises the viewport. - * - */ - activate() - { - // TOOD refactor usage of frame.. - const gl = this.gl; - - // make sure the texture is unbound! - this.frameBuffer.bind(); - - this.calculateProjection(this.destinationFrame, this.sourceFrame); - - if (this.transform) - { - this.projectionMatrix.append(this.transform); - } - - // TODO add a check as them may be the same! - if (this.destinationFrame !== this.sourceFrame) - { - // gl.enable(gl.SCISSOR_TEST); - gl.scissor( - this.destinationFrame.x | 0, - this.destinationFrame.y | 0, - (this.destinationFrame.width * this.resolution) | 0, - (this.destinationFrame.height * this.resolution) | 0 - ); - } - else - { - // gl.disable(gl.SCISSOR_TEST); - } - - // TODO - does not need to be updated all the time?? - gl.viewport( - this.destinationFrame.x | 0, - this.destinationFrame.y | 0, - (this.destinationFrame.width * this.resolution) | 0, - (this.destinationFrame.height * this.resolution) | 0 - ); - } - - /** - * Updates the projection matrix based on a projection frame (which is a rectangle) - * - * @param {Rectangle} destinationFrame - The destination frame. - * @param {Rectangle} sourceFrame - The source frame. - */ - calculateProjection(destinationFrame, sourceFrame) - { - const pm = this.projectionMatrix; - - sourceFrame = sourceFrame || destinationFrame; - - pm.identity(); - - // TODO: make dest scale source - if (!this.root) - { - pm.a = 1 / destinationFrame.width * 2; - pm.d = 1 / destinationFrame.height * 2; - - pm.tx = -1 - (sourceFrame.x * pm.a); - pm.ty = -1 - (sourceFrame.y * pm.d); - } - else - { - pm.a = 1 / destinationFrame.width * 2; - pm.d = -1 / destinationFrame.height * 2; - - pm.tx = -1 - (sourceFrame.x * pm.a); - pm.ty = 1 - (sourceFrame.y * pm.d); - } - } - - /** - * Resizes the texture to the specified width and height - * - * @param {number} width - the new width of the texture - * @param {number} height - the new height of the texture - */ - resize(width, height) - { - width = width | 0; - height = height | 0; - - if (this.size.width === width && this.size.height === height) - { - return; - } - - this.size.width = width; - this.size.height = height; - - this.defaultFrame.width = width; - this.defaultFrame.height = height; - - this.frameBuffer.resize(width * this.resolution, height * this.resolution); - - const projectionFrame = this.frame || this.size; - - this.calculateProjection(projectionFrame); - } - - /** - * Destroys the render target. - * - */ - destroy() - { - this.frameBuffer.destroy(); - - this.frameBuffer = null; - this.texture = null; - } -} diff --git a/packages/core/src/shader/defaultValue.js b/packages/core/src/shader/defaultValue.js new file mode 100644 index 0000000..847a069 --- /dev/null +++ b/packages/core/src/shader/defaultValue.js @@ -0,0 +1,78 @@ +function booleanArray(size) +{ + const array = new Array(size); + + for (let i = 0; i < array.length; i++) + { + array[i] = false; + } + + return array; +} + +/** + * @class + * @memberof PIXI.glCore.shader + * @param type {String} Type of value + * @param size {Number} + */ +export default function defaultValue(type, size) +{ + switch (type) + { + case 'float': + return 0; + + case 'vec2': + return new Float32Array(2 * size); + + case 'vec3': + return new Float32Array(3 * size); + + case 'vec4': + return new Float32Array(4 * size); + + case 'int': + case 'sampler2D': + return 0; + + case 'ivec2': + return new Int32Array(2 * size); + + case 'ivec3': + return new Int32Array(3 * size); + + case 'ivec4': + return new Int32Array(4 * size); + + case 'bool': + return false; + + case 'bvec2': + + return booleanArray(2 * size); + + case 'bvec3': + return booleanArray(3 * size); + + case 'bvec4': + return booleanArray(4 * size); + + case 'mat2': + return new Float32Array([1, 0, + 0, 1]); + + case 'mat3': + return new Float32Array([1, 0, 0, + 0, 1, 0, + 0, 0, 1]); + + case 'mat4': + return new Float32Array([1, 0, 0, 0, + 0, 1, 0, 0, + 0, 0, 1, 0, + 0, 0, 0, 1]); + } + + return 0; +} diff --git a/packages/core/src/shader/extractUniformsFromSrc.js b/packages/core/src/shader/extractUniformsFromSrc.js index 39737fd..3d02c0a 100644 --- a/packages/core/src/shader/extractUniformsFromSrc.js +++ b/packages/core/src/shader/extractUniformsFromSrc.js @@ -1,6 +1,4 @@ -import glCore from 'pixi-gl-core'; - -const defaultValue = glCore.shader.defaultValue; +import defaultValue from './defaultValue'; export default function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { diff --git a/packages/core/src/textures/resources/BaseImageResource.js b/packages/core/src/textures/resources/BaseImageResource.js index 6e490fa..c3012b9 100644 --- a/packages/core/src/textures/resources/BaseImageResource.js +++ b/packages/core/src/textures/resources/BaseImageResource.js @@ -48,13 +48,27 @@ * @param {PIXI.Renderer} renderer Upload to the renderer * @param {PIXI.BaseTexture} baseTexture Reference to parent texture * @param {PIXI.glCore.GLTexture} glTexture Reference + * @param {HTMLImageElement|HTMLCanvasElement|HTMLVideoElement|SVGElement} source (optional) */ - upload(renderer, baseTexture, glTexture) + upload(renderer, baseTexture, glTexture, source) { - // TODO: move glTexture.upload somewhere else - glTexture.format = baseTexture.format; - glTexture.type = baseTexture.type; - glTexture.upload(this.source); + const gl = renderer.gl; + + source = source || this.source; + + gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, baseTexture.premultiplyAlpha); + + if (glTexture.width === baseTexture.width && glTexture.height === baseTexture.height) + { + gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, baseTexture.format, baseTexture.type, source); + } + else + { + glTexture.width = baseTexture.width; + glTexture.height = baseTexture.height; + + gl.texImage2D(gl.TEXTURE_2D, 0, baseTexture.format, baseTexture.format, baseTexture.type, source); + } return true; } diff --git a/packages/core/src/textures/resources/BufferResource.js b/packages/core/src/textures/resources/BufferResource.js index 7f1c12c..7ddfd9c 100644 --- a/packages/core/src/textures/resources/BufferResource.js +++ b/packages/core/src/textures/resources/BufferResource.js @@ -39,19 +39,43 @@ * @param {PIXI.Renderer} renderer Upload to the renderer * @param {PIXI.BaseTexture} baseTexture Reference to parent texture */ - upload(renderer, baseTexture) + upload(renderer, baseTexture, glTexture) { - renderer.gl.texImage2D( - baseTexture.target, - 0, - baseTexture.format, - baseTexture.width, - baseTexture.height, - 0, - baseTexture.format, - baseTexture.type, - this.data - ); + const gl = renderer.gl; + + gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, baseTexture.premultiplyAlpha); + + if (glTexture.width === baseTexture.width && glTexture.height === baseTexture.height) + { + gl.texSubImage2D( + baseTexture.target, + 0, + 0, + 0, + baseTexture.width, + baseTexture.height, + baseTexture.format, + baseTexture.type, + this.data + ); + } + else + { + glTexture.width = baseTexture.width; + glTexture.height = baseTexture.height; + + gl.texImage2D( + baseTexture.target, + 0, + baseTexture.format, + baseTexture.width, + baseTexture.height, + 0, + baseTexture.format, + baseTexture.type, + this.data + ); + } return true; } diff --git a/packages/core/src/textures/resources/ImageResource.js b/packages/core/src/textures/resources/ImageResource.js index a4b3ca6..59c391a 100644 --- a/packages/core/src/textures/resources/ImageResource.js +++ b/packages/core/src/textures/resources/ImageResource.js @@ -192,13 +192,16 @@ return false; } } - glTexture.upload(this.bitmap); + + super.upload(renderer, baseTexture, glTexture, this.bitmap); + if (!this.preserveBitmap) { if (this.bitmap.close) { this.bitmap.close(); } + this.bitmap = null; } } diff --git a/packages/core/src/textures/resources/VideoResource.js b/packages/core/src/textures/resources/VideoResource.js index 246c1c8..4094351 100644 --- a/packages/core/src/textures/resources/VideoResource.js +++ b/packages/core/src/textures/resources/VideoResource.js @@ -254,6 +254,7 @@ { return this._autoUpdate; } + set autoUpdate(value) // eslint-disable-line require-jsdoc { if (value !== this._autoUpdate) diff --git a/packages/particles/package.json b/packages/particles/package.json index 8f7187e..1040b20 100644 --- a/packages/particles/package.json +++ b/packages/particles/package.json @@ -26,8 +26,7 @@ "@pixi/constants": "^5.0.0-alpha", "@pixi/utils": "^5.0.0-alpha", "@pixi/display": "^5.0.0-alpha", - "@pixi/math": "^5.0.0-alpha", - "pixi-gl-core": "^2.0.0-alpha" + "@pixi/math": "^5.0.0-alpha" }, "devDependencies": { "floss": "^2.1.3" diff --git a/packages/particles/src/index.js b/packages/particles/src/index.js index d315119..b3abe5c 100644 --- a/packages/particles/src/index.js +++ b/packages/particles/src/index.js @@ -1,2 +1,2 @@ -export { default as ParticleContainer } from './ParticleContainer'; -export { default as ParticleRenderer } from './ParticleRenderer'; +// export { default as ParticleContainer } from './ParticleContainer'; +// export { default as ParticleRenderer } from './ParticleRenderer'; diff --git a/bundles/pixi.js/src/index.js b/bundles/pixi.js/src/index.js index fb839a0..a879872 100644 --- a/bundles/pixi.js/src/index.js +++ b/bundles/pixi.js/src/index.js @@ -9,7 +9,7 @@ import * as loaders from '@pixi/loaders'; import * as math from '@pixi/math'; import * as mesh from '@pixi/mesh'; -import * as particles from '@pixi/particles'; +// import * as particles from '@pixi/particles'; import * as prepare from '@pixi/prepare'; import * as sprite from '@pixi/sprite'; import * as spriteAnimated from '@pixi/sprite-animated'; @@ -38,7 +38,7 @@ core.Renderer.registerPlugin('graphics', graphics.GraphicsRenderer); core.Renderer.registerPlugin('interaction', interaction.InteractionManager); core.Renderer.registerPlugin('mesh', mesh.MeshRenderer); -core.Renderer.registerPlugin('particle', particles.ParticleRenderer); +// core.Renderer.registerPlugin('particle', particles.ParticleRenderer); core.Renderer.registerPlugin('prepare', prepare.Prepare); core.Renderer.registerPlugin('sprite', sprite.SpriteRenderer); core.Renderer.registerPlugin('tilingSprite', spriteTiling.TilingSpriteRenderer); @@ -120,7 +120,7 @@ loaders, math, mesh, - particles, + // particles, sprite, spriteAnimated, spritesheet, diff --git a/packages/core/package.json b/packages/core/package.json index 30e2e83..7d01377 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -29,7 +29,6 @@ "earcut": "^2.0.7", "eventemitter3": "^2.0.0", "ismobilejs": "^0.4.0", - "pixi-gl-core": "^2.0.0-alpha", "mini-runner": "^1.0.1", "@pixi/math": "^5.0.0-alpha", "@pixi/constants": "^5.0.0-alpha", diff --git a/packages/core/src/index.js b/packages/core/src/index.js index 0951de6..8b8e67c 100644 --- a/packages/core/src/index.js +++ b/packages/core/src/index.js @@ -14,7 +14,6 @@ export { default as WebGLSystem } from './renderers/systems/WebGLSystem'; export { default as State } from './renderers/State'; export { default as ObjectRenderer } from './renderers/utils/ObjectRenderer'; -export { default as RenderTarget } from './renderers/utils/RenderTarget'; export { default as Quad } from './renderers/utils/Quad'; export { default as checkMaxIfStatmentsInShader } from './renderers/utils/checkMaxIfStatmentsInShader'; export { default as Shader } from './shader/Shader'; diff --git a/packages/core/src/renderers/Renderer.js b/packages/core/src/renderers/Renderer.js index 6967107..89ce25f 100644 --- a/packages/core/src/renderers/Renderer.js +++ b/packages/core/src/renderers/Renderer.js @@ -2,7 +2,7 @@ import { sayHello } from '@pixi/utils'; import MaskSystem from './systems/MaskSystem'; import StencilSystem from './systems/StencilSystem'; -import FilterSystem from './systems/FilterSystem'; +// import FilterSystem from './systems/FilterSystem'; import FramebufferSystem from './systems/FramebufferSystem'; import RenderTextureSystem from './systems/RenderTextureSystem'; import TextureSystem from './systems/textures/TextureSystem'; @@ -103,7 +103,7 @@ .addSystem(StencilSystem, 'stencil') .addSystem(ProjectionSystem, 'projection') // .addSystem(TextureGCSystem) - .addSystem(FilterSystem, 'filter') + // .addSystem(FilterSystem, 'filter') .addSystem(RenderTextureSystem, 'renderTexture') .addSystem(BatchSystem, 'batch'); diff --git a/packages/core/src/renderers/filters/Filter.js b/packages/core/src/renderers/filters/Filter.js index 06f1222..2d82c8e 100644 --- a/packages/core/src/renderers/filters/Filter.js +++ b/packages/core/src/renderers/filters/Filter.js @@ -3,7 +3,7 @@ import { BLEND_MODES } from '@pixi/constants'; import { settings } from '@pixi/settings'; import { uid } from '@pixi/utils'; -import extractUniformsFromSrc from './extractUniformsFromSrc'; +// import extractUniformsFromSrc from './extractUniformsFromSrc'; import defaultVertex from './defaultFilter.vert'; import defaultFragment from './defaultFilter.frag'; @@ -28,7 +28,8 @@ this._blendMode = BLEND_MODES.NORMAL; - this.uniformData = uniforms || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); + this.uniformData = uniforms; + // || extractUniformsFromSrc(this.vertexSrc, this.fragmentSrc, 'projectionMatrix|uSampler'); /** * An object containing the current values of custom uniforms. diff --git a/packages/core/src/renderers/filters/extractUniformsFromSrc.js b/packages/core/src/renderers/filters/extractUniformsFromSrc.js deleted file mode 100644 index 5ec7007..0000000 --- a/packages/core/src/renderers/filters/extractUniformsFromSrc.js +++ /dev/null @@ -1,58 +0,0 @@ -import glCore from 'pixi-gl-core'; - -const defaultValue = glCore.shader.defaultValue; - -export default function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) -{ - const vertUniforms = extractUniformsFromString(vertexSrc, mask); - const fragUniforms = extractUniformsFromString(fragmentSrc, mask); - - return Object.assign(vertUniforms, fragUniforms); -} - -function extractUniformsFromString(string) -{ - const maskRegex = new RegExp('^(projectionMatrix|uSampler|filterArea|filterClamp)$'); - - const uniforms = {}; - let nameSplit; - - // clean the lines a little - remove extra spaces / tabs etc - // then split along ';' - const lines = string.replace(/\s+/g, ' ') - .split(/\s*;\s*/); - - // loop through.. - for (let i = 0; i < lines.length; i++) - { - const line = lines[i].trim(); - - if (line.indexOf('uniform') > -1) - { - const splitLine = line.split(' '); - const type = splitLine[1]; - - let name = splitLine[2]; - let size = 1; - - if (name.indexOf('[') > -1) - { - // array! - nameSplit = name.split(/\[|]/); - name = nameSplit[0]; - size *= Number(nameSplit[1]); - } - - if (!name.match(maskRegex)) - { - uniforms[name] = { - value: defaultValue(type, size), - name, - type, - }; - } - } - } - - return uniforms; -} diff --git a/packages/core/src/renderers/managers/BlendModeManager.js b/packages/core/src/renderers/managers/BlendModeManager.js deleted file mode 100644 index 7362ae7..0000000 --- a/packages/core/src/renderers/managers/BlendModeManager.js +++ /dev/null @@ -1,45 +0,0 @@ -import WebGLManager from './WebGLManager'; - -/** - * @class - * @memberof PIXI - * @extends PIXI.WebGLManager - */ -export default class BlendModeManager extends WebGLManager -{ - /** - * @param {PIXI.Renderer} renderer - The renderer this manager works for. - */ - constructor(renderer) - { - super(renderer); - - /** - * @member {number} - */ - this.currentBlendMode = 99999; - } - - /** - * Sets-up the given blendMode from WebGL's point of view. - * - * @param {number} blendMode - the blendMode, should be a PixiJS const, such as - * `PIXI.BLEND_MODES.ADD`. See {@link PIXI.BLEND_MODES} for possible values. - * @return {boolean} Returns if the blend mode was changed. - */ - setBlendMode(blendMode) - { - if (this.currentBlendMode === blendMode) - { - return false; - } - - this.currentBlendMode = blendMode; - - const mode = this.renderer.blendModes[this.currentBlendMode]; - - this.renderer.gl.blendFunc(mode[0], mode[1]); - - return true; - } -} diff --git a/packages/core/src/renderers/systems/geometry/GLBuffer.js b/packages/core/src/renderers/systems/geometry/GLBuffer.js new file mode 100644 index 0000000..0477e8a --- /dev/null +++ b/packages/core/src/renderers/systems/geometry/GLBuffer.js @@ -0,0 +1,9 @@ +export default class GLBuffer +{ + constructor(buffer) + { + this.buffer = buffer; + this.updateID = -1; + this.byteLength = -1; + } +} diff --git a/packages/core/src/renderers/systems/geometry/GeometrySystem.js b/packages/core/src/renderers/systems/geometry/GeometrySystem.js index a972762..d205a6d 100644 --- a/packages/core/src/renderers/systems/geometry/GeometrySystem.js +++ b/packages/core/src/renderers/systems/geometry/GeometrySystem.js @@ -1,17 +1,8 @@ import WebGLSystem from '../WebGLSystem'; +import GLBuffer from './GLBuffer'; const byteSizeMap = { 5126: 4, 5123: 2, 5121: 1 }; -class GLBufferData -{ - constructor(buffer) - { - this.buffer = buffer; - this.updateID = -1; - this.byteLength = -1; - } -} - /** * @class * @extends PIXI.WebGLSystem @@ -269,7 +260,7 @@ if (!buffer._glBuffers[CONTEXT_UID]) { - buffer._glBuffers[CONTEXT_UID] = new GLBufferData(gl.createBuffer()); + buffer._glBuffers[CONTEXT_UID] = new GLBuffer(gl.createBuffer()); } } diff --git a/packages/core/src/renderers/systems/textures/GLTexture.js b/packages/core/src/renderers/systems/textures/GLTexture.js index ceeb379..3f5bf44 100644 --- a/packages/core/src/renderers/systems/textures/GLTexture.js +++ b/packages/core/src/renderers/systems/textures/GLTexture.js @@ -1,75 +1,16 @@ -let FLOATING_POINT_AVAILABLE = false; - -/** - * Helper class to create a WebGL Texture - * - * @class - * @memberof PIXI.glCore - * @param gl {WebGLRenderingContext} The current WebGL context - * @param width {number} the width of the texture - * @param height {number} the height of the texture - * @param format {number} the pixel format of the texture. defaults to gl.RGBA - * @param type {number} the gl type of the texture. defaults to gl.UNSIGNED_BYTE - */ -export default class Texture +export default class GLTexture { - constructor(gl, width, height, format, type) + constructor(texture) { /** - * The current WebGL rendering context - * - * @member {WebGLRenderingContext} - */ - this.gl = gl; - - /** * The WebGL texture * * @member {WebGLTexture} */ - this.texture = gl.createTexture(); + this.texture = texture; - /** - * GL texture is ready for mipmaps - * - * @member {Boolean} - */ - // some settings.. - this.mipmap = false; - - /** - * Set to true to enable pre-multiplied alpha - * - * @member {Boolean} - */ - this.premultiplyAlpha = false; - - /** - * The width of texture - * - * @member {Number} - */ - this.width = width || -1; - /** - * The height of texture - * - * @member {Number} - */ - this.height = height || -1; - - /** - * The pixel format of the texture. defaults to gl.RGBA - * - * @member {Number} - */ - this.format = format || gl.RGBA; - - /** - * The gl type of the texture. defaults to gl.UNSIGNED_BYTE - * - * @member {Number} - */ - this.type = type || gl.UNSIGNED_BYTE; + this.width = -1; + this.height = -1; /** * Texture contents dirty flag @@ -83,156 +24,4 @@ */ this.dirtyStyleId = -1; } - - /** - * Uploads this texture to the GPU - * @param source {HTMLImageElement|ImageData|HTMLVideoElement} the source image of the texture - */ - upload(source) - { - this.bind(); - - const gl = this.gl; - - gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, this.premultiplyAlpha); - - const newWidth = source.videoWidth || source.width; - const newHeight = source.videoHeight || source.height; - - if (newHeight !== this.height || newWidth !== this.width) - { - gl.texImage2D(gl.TEXTURE_2D, 0, this.format, this.format, this.type, source); - } - else - { - gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, this.format, this.type, source); - } - - // if the source is a video, we need to use the videoWidth / videoHeight - // properties as width / height will be incorrect. - this.width = newWidth; - this.height = newHeight; - } - - /** - * Use a data source and uploads this texture to the GPU - * @param data {TypedArray} the data to upload to the texture - * @param width {number} the new width of the texture - * @param height {number} the new height of the texture - */ - uploadData(data, width, height) - { - this.bind(); - - const gl = this.gl; - - if (data instanceof Float32Array) - { - if (!FLOATING_POINT_AVAILABLE) - { - const ext = gl.getExtension('OES_texture_float'); - - if (ext) - { - FLOATING_POINT_AVAILABLE = true; - } - else - { - throw new Error('floating point textures not available'); - } - } - - this.type = gl.FLOAT; - } - else - { - // TODO support for other types - this.type = this.type || gl.UNSIGNED_BYTE; - } - - // what type of data? - gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, this.premultiplyAlpha); - - if (width !== this.width || height !== this.height) - { - gl.texImage2D(gl.TEXTURE_2D, 0, this.format, width, height, 0, this.format, this.type, data || null); - } - else - { - gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, width, height, this.format, this.type, data || null); - } - - this.width = width; - this.height = height; - } - - /** - * Binds the texture - * @param location - */ - bind(location) - { - const gl = this.gl; - - if (location !== undefined) - { - gl.activeTexture(gl.TEXTURE0 + location); - } - - gl.bindTexture(gl.TEXTURE_2D, this.texture); - } - - /** - * Unbinds the texture - */ - unbind() - { - const gl = this.gl; - - gl.bindTexture(gl.TEXTURE_2D, null); - } - - /** - * Destroys this texture - */ - destroy() - { - const gl = this.gl; - // TODO - - gl.deleteTexture(this.texture); - } - - /** - * @static - * @param gl {WebGLRenderingContext} The current WebGL context - * @param source {HTMLImageElement|ImageData} the source image of the texture - * @param premultiplyAlpha {Boolean} If we want to use pre-multiplied alpha - */ - static fromSource(gl, source, premultiplyAlpha) - { - const texture = new Texture(gl); - - texture.premultiplyAlpha = premultiplyAlpha || false; - texture.upload(source); - - return texture; - } - - /** - * @static - * @param gl {WebGLRenderingContext} The current WebGL context - * @param data {TypedArray} the data to upload to the texture - * @param width {number} the new width of the texture - * @param height {number} the new height of the texture - */ - static fromData(gl, data, width, height) - { - // console.log(data, width, height); - const texture = new Texture(gl); - - texture.uploadData(data, width, height); - - return texture; - } } diff --git a/packages/core/src/renderers/systems/textures/TextureSystem.js b/packages/core/src/renderers/systems/textures/TextureSystem.js index b000db2..5c159e2 100644 --- a/packages/core/src/renderers/systems/textures/TextureSystem.js +++ b/packages/core/src/renderers/systems/textures/TextureSystem.js @@ -56,8 +56,13 @@ // TODO move this.. to a nice make empty textures class.. this.emptyTextures = {}; - this.emptyTextures[gl.TEXTURE_2D] = new GLTexture.fromData(this.gl, null, 1, 1); - this.emptyTextures[gl.TEXTURE_CUBE_MAP] = new GLTexture(this.gl); + const emptyTexture2D = new GLTexture(gl.createTexture()); + + gl.bindTexture(gl.TEXTURE_2D, emptyTexture2D.texture); + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array(4)); + + this.emptyTextures[gl.TEXTURE_2D] = emptyTexture2D; + this.emptyTextures[gl.TEXTURE_CUBE_MAP] = new GLTexture(gl.createTexture()); gl.bindTexture(gl.TEXTURE_CUBE_MAP, this.emptyTextures[gl.TEXTURE_CUBE_MAP].texture); @@ -136,9 +141,8 @@ initTexture(texture) { - const glTexture = new GLTexture(this.gl, -1, -1, texture.format, texture.type); + const glTexture = new GLTexture(this.gl.createTexture()); - glTexture.premultiplyAlpha = texture.premultiplyAlpha; // guarentee an update.. glTexture.dirtyId = -1; @@ -188,7 +192,7 @@ { this.unbind(texture); - texture._glTextures[this.renderer.CONTEXT_UID].destroy(); + texture._glTextures[this.renderer.CONTEXT_UID].texture.destroy(); texture.off('dispose', this.destroyTexture, this); delete texture._glTextures[this.renderer.CONTEXT_UID]; @@ -209,7 +213,6 @@ { const glTexture = texture._glTextures[this.CONTEXT_UID]; - glTexture.mipmap = texture.mipmap && texture.isPowerOfTwo; if (!glTexture) { return; @@ -223,14 +226,15 @@ { this.setStyle(texture, glTexture); } + glTexture.dirtyStyleId = texture.dirtyStyleId; } - setStyle(texture, glTexture) + setStyle(texture) { const gl = this.gl; - if (glTexture.mipmap) + if (texture.mipmap && texture.isPowerOfTwo) { gl.generateMipmap(texture.target); } @@ -238,7 +242,7 @@ gl.texParameteri(texture.target, gl.TEXTURE_WRAP_S, texture.wrapMode); gl.texParameteri(texture.target, gl.TEXTURE_WRAP_T, texture.wrapMode); - if (glTexture.mipmap) + if (texture.mipmap) { /* eslint-disable max-len */ gl.texParameteri(texture.target, gl.TEXTURE_MIN_FILTER, texture.scaleMode ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST); diff --git a/packages/core/src/renderers/utils/RenderTarget.js b/packages/core/src/renderers/utils/RenderTarget.js deleted file mode 100644 index 3f129ed..0000000 --- a/packages/core/src/renderers/utils/RenderTarget.js +++ /dev/null @@ -1,326 +0,0 @@ -import { Rectangle, Matrix } from '@pixi/math'; -import { SCALE_MODES } from '@pixi/constants'; -import { settings } from '@pixi/settings'; -import { GLFramebuffer } from 'pixi-gl-core'; - -/** - * @class - * @memberof PIXI - */ -export default class RenderTarget -{ - /** - * @param {WebGLRenderingContext} gl - The current WebGL drawing context - * @param {number} [width=0] - the horizontal range of the filter - * @param {number} [height=0] - the vertical range of the filter - * @param {number} [scaleMode=PIXI.settings.SCALE_MODE] - See {@link PIXI.SCALE_MODES} for possible values - * @param {number} [resolution=1] - The current resolution / device pixel ratio - * @param {boolean} [root=false] - Whether this object is the root element or not - */ - constructor(gl, width, height, scaleMode, resolution, root) - { - // TODO Resolution could go here ( eg low res blurs ) - - /** - * The current WebGL drawing context. - * - * @member {WebGLRenderingContext} - */ - this.gl = gl; - - // next time to create a frame buffer and texture - - /** - * A frame buffer - * - * @member {PIXI.glCore.GLFramebuffer} - */ - this.frameBuffer = null; - - /** - * The texture - * - * @member {PIXI.glCore.GLTexture} - */ - this.texture = null; - - /** - * The background colour of this render target, as an array of [r,g,b,a] values - * - * @member {number[]} - */ - this.clearColor = [0, 0, 0, 0]; - - /** - * The size of the object as a rectangle - * - * @member {PIXI.Rectangle} - */ - this.size = new Rectangle(0, 0, 1, 1); - - /** - * The current resolution / device pixel ratio - * - * @member {number} - * @default 1 - */ - this.resolution = resolution || settings.RESOLUTION; - - /** - * The projection matrix - * - * @member {PIXI.Matrix} - */ - this.projectionMatrix = new Matrix(); - - /** - * The object's transform - * - * @member {PIXI.Matrix} - */ - this.transform = null; - - /** - * The frame. - * - * @member {PIXI.Rectangle} - */ - this.frame = null; - - /** - * The stencil buffer stores masking data for the render target - * - * @member {glCore.GLBuffer} - */ - this.defaultFrame = new Rectangle(); - this.destinationFrame = null; - this.sourceFrame = null; - - /** - * The stencil buffer stores masking data for the render target - * - * @member {glCore.GLBuffer} - */ - this.stencilBuffer = null; - - /** - * The data structure for the stencil masks - * - * @member {PIXI.Graphics[]} - */ - this.stencilMaskStack = []; - - /** - * Stores filter data for the render target - * - * @member {object[]} - */ - this.filterData = null; - - /** - * The scale mode. - * - * @member {number} - * @default PIXI.settings.SCALE_MODE - * @see PIXI.SCALE_MODES - */ - this.scaleMode = scaleMode !== undefined ? scaleMode : settings.SCALE_MODE; - - /** - * Whether this object is the root element or not - * - * @member {boolean} - */ - this.root = root; - - if (!this.root) - { - this.frameBuffer = GLFramebuffer.createRGBA(gl, 100, 100); - - if (this.scaleMode === SCALE_MODES.NEAREST) - { - this.frameBuffer.texture.enableNearestScaling(); - } - else - { - this.frameBuffer.texture.enableLinearScaling(); - } - /* - A frame buffer needs a target to render to.. - create a texture and bind it attach it to the framebuffer.. - */ - - // this is used by the base texture - this.texture = this.frameBuffer.texture; - } - else - { - // make it a null framebuffer.. - this.frameBuffer = new GLFramebuffer(gl, 100, 100); - this.frameBuffer.framebuffer = null; - } - - this.setFrame(); - - this.resize(width, height); - } - - /** - * Clears the filter texture. - * - * @param {number[]} [clearColor=this.clearColor] - Array of [r,g,b,a] to clear the framebuffer - */ - clear(clearColor) - { - const cc = clearColor || this.clearColor; - - this.frameBuffer.clear(cc[0], cc[1], cc[2], cc[3]);// r,g,b,a); - } - - /** - * Binds the stencil buffer. - * - */ - attachStencilBuffer() - { - // TODO check if stencil is done? - /** - * The stencil buffer is used for masking in pixi - * lets create one and then add attach it to the framebuffer.. - */ - if (!this.root) - { - this.frameBuffer.enableStencil(); - } - } - - /** - * Sets the frame of the render target. - * - * @param {Rectangle} destinationFrame - The destination frame. - * @param {Rectangle} sourceFrame - The source frame. - */ - setFrame(destinationFrame, sourceFrame) - { - this.destinationFrame = destinationFrame || this.destinationFrame || this.defaultFrame; - this.sourceFrame = sourceFrame || this.sourceFrame || this.destinationFrame; - } - - /** - * Binds the buffers and initialises the viewport. - * - */ - activate() - { - // TOOD refactor usage of frame.. - const gl = this.gl; - - // make sure the texture is unbound! - this.frameBuffer.bind(); - - this.calculateProjection(this.destinationFrame, this.sourceFrame); - - if (this.transform) - { - this.projectionMatrix.append(this.transform); - } - - // TODO add a check as them may be the same! - if (this.destinationFrame !== this.sourceFrame) - { - // gl.enable(gl.SCISSOR_TEST); - gl.scissor( - this.destinationFrame.x | 0, - this.destinationFrame.y | 0, - (this.destinationFrame.width * this.resolution) | 0, - (this.destinationFrame.height * this.resolution) | 0 - ); - } - else - { - // gl.disable(gl.SCISSOR_TEST); - } - - // TODO - does not need to be updated all the time?? - gl.viewport( - this.destinationFrame.x | 0, - this.destinationFrame.y | 0, - (this.destinationFrame.width * this.resolution) | 0, - (this.destinationFrame.height * this.resolution) | 0 - ); - } - - /** - * Updates the projection matrix based on a projection frame (which is a rectangle) - * - * @param {Rectangle} destinationFrame - The destination frame. - * @param {Rectangle} sourceFrame - The source frame. - */ - calculateProjection(destinationFrame, sourceFrame) - { - const pm = this.projectionMatrix; - - sourceFrame = sourceFrame || destinationFrame; - - pm.identity(); - - // TODO: make dest scale source - if (!this.root) - { - pm.a = 1 / destinationFrame.width * 2; - pm.d = 1 / destinationFrame.height * 2; - - pm.tx = -1 - (sourceFrame.x * pm.a); - pm.ty = -1 - (sourceFrame.y * pm.d); - } - else - { - pm.a = 1 / destinationFrame.width * 2; - pm.d = -1 / destinationFrame.height * 2; - - pm.tx = -1 - (sourceFrame.x * pm.a); - pm.ty = 1 - (sourceFrame.y * pm.d); - } - } - - /** - * Resizes the texture to the specified width and height - * - * @param {number} width - the new width of the texture - * @param {number} height - the new height of the texture - */ - resize(width, height) - { - width = width | 0; - height = height | 0; - - if (this.size.width === width && this.size.height === height) - { - return; - } - - this.size.width = width; - this.size.height = height; - - this.defaultFrame.width = width; - this.defaultFrame.height = height; - - this.frameBuffer.resize(width * this.resolution, height * this.resolution); - - const projectionFrame = this.frame || this.size; - - this.calculateProjection(projectionFrame); - } - - /** - * Destroys the render target. - * - */ - destroy() - { - this.frameBuffer.destroy(); - - this.frameBuffer = null; - this.texture = null; - } -} diff --git a/packages/core/src/shader/defaultValue.js b/packages/core/src/shader/defaultValue.js new file mode 100644 index 0000000..847a069 --- /dev/null +++ b/packages/core/src/shader/defaultValue.js @@ -0,0 +1,78 @@ +function booleanArray(size) +{ + const array = new Array(size); + + for (let i = 0; i < array.length; i++) + { + array[i] = false; + } + + return array; +} + +/** + * @class + * @memberof PIXI.glCore.shader + * @param type {String} Type of value + * @param size {Number} + */ +export default function defaultValue(type, size) +{ + switch (type) + { + case 'float': + return 0; + + case 'vec2': + return new Float32Array(2 * size); + + case 'vec3': + return new Float32Array(3 * size); + + case 'vec4': + return new Float32Array(4 * size); + + case 'int': + case 'sampler2D': + return 0; + + case 'ivec2': + return new Int32Array(2 * size); + + case 'ivec3': + return new Int32Array(3 * size); + + case 'ivec4': + return new Int32Array(4 * size); + + case 'bool': + return false; + + case 'bvec2': + + return booleanArray(2 * size); + + case 'bvec3': + return booleanArray(3 * size); + + case 'bvec4': + return booleanArray(4 * size); + + case 'mat2': + return new Float32Array([1, 0, + 0, 1]); + + case 'mat3': + return new Float32Array([1, 0, 0, + 0, 1, 0, + 0, 0, 1]); + + case 'mat4': + return new Float32Array([1, 0, 0, 0, + 0, 1, 0, 0, + 0, 0, 1, 0, + 0, 0, 0, 1]); + } + + return 0; +} diff --git a/packages/core/src/shader/extractUniformsFromSrc.js b/packages/core/src/shader/extractUniformsFromSrc.js index 39737fd..3d02c0a 100644 --- a/packages/core/src/shader/extractUniformsFromSrc.js +++ b/packages/core/src/shader/extractUniformsFromSrc.js @@ -1,6 +1,4 @@ -import glCore from 'pixi-gl-core'; - -const defaultValue = glCore.shader.defaultValue; +import defaultValue from './defaultValue'; export default function extractUniformsFromSrc(vertexSrc, fragmentSrc, mask) { diff --git a/packages/core/src/textures/resources/BaseImageResource.js b/packages/core/src/textures/resources/BaseImageResource.js index 6e490fa..c3012b9 100644 --- a/packages/core/src/textures/resources/BaseImageResource.js +++ b/packages/core/src/textures/resources/BaseImageResource.js @@ -48,13 +48,27 @@ * @param {PIXI.Renderer} renderer Upload to the renderer * @param {PIXI.BaseTexture} baseTexture Reference to parent texture * @param {PIXI.glCore.GLTexture} glTexture Reference + * @param {HTMLImageElement|HTMLCanvasElement|HTMLVideoElement|SVGElement} source (optional) */ - upload(renderer, baseTexture, glTexture) + upload(renderer, baseTexture, glTexture, source) { - // TODO: move glTexture.upload somewhere else - glTexture.format = baseTexture.format; - glTexture.type = baseTexture.type; - glTexture.upload(this.source); + const gl = renderer.gl; + + source = source || this.source; + + gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, baseTexture.premultiplyAlpha); + + if (glTexture.width === baseTexture.width && glTexture.height === baseTexture.height) + { + gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, baseTexture.format, baseTexture.type, source); + } + else + { + glTexture.width = baseTexture.width; + glTexture.height = baseTexture.height; + + gl.texImage2D(gl.TEXTURE_2D, 0, baseTexture.format, baseTexture.format, baseTexture.type, source); + } return true; } diff --git a/packages/core/src/textures/resources/BufferResource.js b/packages/core/src/textures/resources/BufferResource.js index 7f1c12c..7ddfd9c 100644 --- a/packages/core/src/textures/resources/BufferResource.js +++ b/packages/core/src/textures/resources/BufferResource.js @@ -39,19 +39,43 @@ * @param {PIXI.Renderer} renderer Upload to the renderer * @param {PIXI.BaseTexture} baseTexture Reference to parent texture */ - upload(renderer, baseTexture) + upload(renderer, baseTexture, glTexture) { - renderer.gl.texImage2D( - baseTexture.target, - 0, - baseTexture.format, - baseTexture.width, - baseTexture.height, - 0, - baseTexture.format, - baseTexture.type, - this.data - ); + const gl = renderer.gl; + + gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, baseTexture.premultiplyAlpha); + + if (glTexture.width === baseTexture.width && glTexture.height === baseTexture.height) + { + gl.texSubImage2D( + baseTexture.target, + 0, + 0, + 0, + baseTexture.width, + baseTexture.height, + baseTexture.format, + baseTexture.type, + this.data + ); + } + else + { + glTexture.width = baseTexture.width; + glTexture.height = baseTexture.height; + + gl.texImage2D( + baseTexture.target, + 0, + baseTexture.format, + baseTexture.width, + baseTexture.height, + 0, + baseTexture.format, + baseTexture.type, + this.data + ); + } return true; } diff --git a/packages/core/src/textures/resources/ImageResource.js b/packages/core/src/textures/resources/ImageResource.js index a4b3ca6..59c391a 100644 --- a/packages/core/src/textures/resources/ImageResource.js +++ b/packages/core/src/textures/resources/ImageResource.js @@ -192,13 +192,16 @@ return false; } } - glTexture.upload(this.bitmap); + + super.upload(renderer, baseTexture, glTexture, this.bitmap); + if (!this.preserveBitmap) { if (this.bitmap.close) { this.bitmap.close(); } + this.bitmap = null; } } diff --git a/packages/core/src/textures/resources/VideoResource.js b/packages/core/src/textures/resources/VideoResource.js index 246c1c8..4094351 100644 --- a/packages/core/src/textures/resources/VideoResource.js +++ b/packages/core/src/textures/resources/VideoResource.js @@ -254,6 +254,7 @@ { return this._autoUpdate; } + set autoUpdate(value) // eslint-disable-line require-jsdoc { if (value !== this._autoUpdate) diff --git a/packages/particles/package.json b/packages/particles/package.json index 8f7187e..1040b20 100644 --- a/packages/particles/package.json +++ b/packages/particles/package.json @@ -26,8 +26,7 @@ "@pixi/constants": "^5.0.0-alpha", "@pixi/utils": "^5.0.0-alpha", "@pixi/display": "^5.0.0-alpha", - "@pixi/math": "^5.0.0-alpha", - "pixi-gl-core": "^2.0.0-alpha" + "@pixi/math": "^5.0.0-alpha" }, "devDependencies": { "floss": "^2.1.3" diff --git a/packages/particles/src/index.js b/packages/particles/src/index.js index d315119..b3abe5c 100644 --- a/packages/particles/src/index.js +++ b/packages/particles/src/index.js @@ -1,2 +1,2 @@ -export { default as ParticleContainer } from './ParticleContainer'; -export { default as ParticleRenderer } from './ParticleRenderer'; +// export { default as ParticleContainer } from './ParticleContainer'; +// export { default as ParticleRenderer } from './ParticleRenderer'; diff --git a/rollup.config.js b/rollup.config.js index 6d4bba5..baccd2e 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -39,7 +39,6 @@ commonjs({ namedExports: { 'resource-loader': ['Resource'], - 'pixi-gl-core': ['GLFramebuffer', 'GLShader', 'GLBuffer'], // TODO: remove pixi-gl-core }, }), string({