IWMBrowser/iwmlib
4
0
Fork 0
Code Issues 6 Pull Requests Releases Wiki Activity

Updated to PixiJS v5.

Browse Source
This commit is contained in:
Sebastian Kupke
2019-09-10 16:34:59 +02:00
parent a775126f9c
commit ebe0b1253f
29 changed files with 46482 additions and 67844 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/pixi/app.js
+1 -2
View File
@@ -116,8 +116,7 @@ export default class PIXIApp extends PIXI.Application {
resolution,
autoResize,
backgroundColor,
forceCanvas,
roundPixels // not needed for PixiJS >= 5
forceCanvas
})
this.width = width
lib/pixi/application.html
+1 -1
View File
@@ -23,7 +23,7 @@
document.body.appendChild(app.view)
// ex, add display objects
const sprite = PIXI.Sprite.fromImage('./assets/app-circle.png')
const sprite = PIXI.Sprite.from('./assets/app-circle.png')
sprite.scale.set(.3, .3)
app.stage.addChild(sprite)
lib/pixi/badge.html
+2 -2
View File
@@ -121,11 +121,11 @@
})
let sprite1 = new PIXI.Sprite(
PIXI.Texture.fromVideo('./assets/badge-1.mp4')
PIXI.Texture.from('./assets/badge-1.mp4')
)
sprite1.scale.set(0.05, 0.05)
let texture1 = PIXI.Texture.fromVideo('./assets/badge-1.mp4')
let texture1 = PIXI.Texture.from('./assets/badge-1.mp4')
texture1.baseTexture.on('loaded', e => {
let sprite1 = new PIXI.Sprite(texture1)
sprite1.scale.set(0.05, 0.05)
lib/pixi/blurfilter.html
+1 -1
View File
@@ -36,7 +36,7 @@ const app = new PIXIApp({
}).setup().run()
// Load a video and add it to the scene
const videoSprite = new PIXI.Sprite(PIXI.Texture.fromVideo("assets/blurfilter.mp4"))
const videoSprite = new PIXI.Sprite(PIXI.Texture.from("assets/blurfilter.mp4"))
videoSprite.width = app.size.width
videoSprite.height = app.size.height
app.scene.addChild(videoSprite)
lib/pixi/blurfilter.js
+16 -10
View File
@@ -15,7 +15,7 @@
* }).setup().run()
*
* // Add a video sprite
* const sprite = new PIXI.Sprite(PIXI.Texture.fromVideo("assets/blurfilter.mp4"))
* const sprite = new PIXI.Sprite(PIXI.Texture.from("assets/blurfilter.mp4"))
* sprite.width = app.size.width
* sprite.height = app.size.height
* app.scene.addChild(sprite)
@@ -41,10 +41,15 @@ export default class BlurFilter extends PIXI.Filter {
}
apply(filterManager, input, output) {
let renderTarget = filterManager.getRenderTarget(true)
let renderTarget = filterManager.getFilterTexture()
this.tiltShiftXFilter.apply(filterManager, input, renderTarget)
this.tiltShiftYFilter.apply(filterManager, renderTarget, output)
filterManager.returnRenderTarget(renderTarget)
filterManager.returnFilterTexture(renderTarget)
// let renderTarget = filterManager.getRenderTarget(true)
// this.tiltShiftXFilter.apply(filterManager, input, renderTarget)
// this.tiltShiftYFilter.apply(filterManager, renderTarget, output)
// filterManager.returnRenderTarget(renderTarget)
}
/**
@@ -121,19 +126,23 @@ class TiltShiftAxisFilter extends PIXI.Filter {
uniform mat3 projectionMatrix;
varying vec2 vVertexPosition;
varying vec2 vTextureCoord;
void main(void) {
gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);
vVertexPosition = aVertexPosition;
vTextureCoord = aTextureCoord;
gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);
}
`
const fragment = `
varying vec2 vVertexPosition;
varying vec2 vTextureCoord;
uniform vec4 filterArea;
uniform sampler2D uSampler;
uniform int shape;
uniform vec4 rectangle;
uniform vec3 circle;
@@ -146,15 +155,12 @@ class TiltShiftAxisFilter extends PIXI.Filter {
}
void main(void) {
// textureCoord to pixelCoord
vec2 pixelCoord = vTextureCoord * filterArea.xy - vec2(4.0, 4.0); // FIXME: There's a shift of 4 * 4 pixels, don't know why...
bool inside = false;
if (shape == 1) {
inside = distance(pixelCoord, circle.xy) <= circle.z;
inside = distance(vVertexPosition, circle.xy) <= circle.z;
} else if (shape == 2) {
inside = pixelCoord.x >= rectangle.x && pixelCoord.x <= rectangle.z && pixelCoord.y >= rectangle.y && pixelCoord.y <= rectangle.w;
inside = vVertexPosition.x >= rectangle.x && vVertexPosition.x <= rectangle.z && vVertexPosition.y >= rectangle.y && vVertexPosition.y <= rectangle.w;
}
if (inside) {
lib/pixi/button.js
+1 -1
View File
@@ -664,7 +664,7 @@ export default class Button extends PIXI.Container {
}
const url = Button.iconIsUrl(icon) ? icon : `../../assets/icons/${icon}.png`
const iconTexture = PIXI.Texture.fromImage(url, true)
const iconTexture = PIXI.Texture.from(url)
const sprite = new PIXI.Sprite(iconTexture)
sprite.tint = color
lib/pixi/coordinates.html
+1 -1
View File
@@ -64,7 +64,7 @@
super.setup()
let x = 30
let y = 30
let sprite = PIXI.Sprite.fromImage('../examples/women.jpeg')
let sprite = PIXI.Sprite.from('../examples/women.jpeg')
sprite.interactive = true
let scatter = new DisplayObjectScatter(sprite, this.renderer,
{
lib/pixi/deepzoom/image.html
+1 -1
View File
@@ -126,7 +126,7 @@
app.scene.addChild(deepZoomImage)
//Set info text.
info.innerHTML = "resolution: " + app._options.resolution +
info.innerHTML = "resolution: " + app.renderer.resolution +
"<br>high resolution: " + !!state;
}
lib/pixi/deepzoom/image.js
+1 -1
View File
@@ -595,7 +595,7 @@ export class DeepZoomImage extends PIXI.Container {
* @return {Sprite} sprite - A sprite with a single tile texture
*/
thumbnail() {
return new PIXI.Sprite.fromImage(this.info.baseURL)
return new PIXI.Sprite.from(this.info.baseURL)
}
/** Returns a list of all tiles of a given level.
lib/pixi/deepzoom/loader.js
+2 -2
View File
@@ -84,7 +84,7 @@ export class PIXITileLoader extends TileLoader {
constructor(tiles, compression) {
super(tiles)
this.destroyed = false
this.loader = new PIXI.loaders.Loader()
this.loader = new PIXI.Loader()
this.loader.on('load', this._onLoaded.bind(this))
this.loader.on('error', this._onError.bind(this))
if (compression) {
@@ -256,7 +256,7 @@ export class RequestTileLoader extends TileLoader {
}
xhr.send()
} else {
let texture = PIXI.Texture.fromImage('assets/image.png')
let texture = PIXI.Texture.from('assets/image.png')
this._textureAvailable(url, col, row, texture)
if (callback) callback()
}
lib/pixi/deepzoom/tile.js
+2 -2
View File
@@ -52,7 +52,7 @@ export default class Tile extends PIXI.Sprite {
}
/**
* Loads a tile from image using the PIXI.Texture.fromImage method.
* Loads a tile from image using the PIXI.Texture.from method.
*
* @static
* @param {*} imageId
@@ -62,7 +62,7 @@ export default class Tile extends PIXI.Sprite {
* @memberof Tile
*/
static fromImage(imageId, crossorigin, scaleMode) {
return new Tile(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode), imageId)
return new Tile(PIXI.Texture.from(imageId, crossorigin, scaleMode), imageId)
}
/**
lib/pixi/flipeffect.html
+2 -2
View File
@@ -75,13 +75,13 @@ class ScatterApp extends PIXIApp {
setup() {
super.setup()
let urls = ['../examples/women.jpeg', '../examples/king.jpeg']
PIXI.loader.add(urls).load((loader) => {
PIXI.Loader.shared.add(urls).load((loader) => {
// We need a loader because the size of the sprite must be known
// when the scatter is defined
let x = 30
let y = 30
for(let url in loader.resources) {
let sprite = PIXI.Sprite.fromImage(url)
let sprite = PIXI.Sprite.from(url)
sprite.interactive = true
let scatter = new DisplayObjectScatter(sprite, this.renderer,
{ x: x, y: y,
lib/pixi/flipeffect.js
+1 -1
View File
@@ -45,7 +45,7 @@ export class ScatterLoader extends CardLoader {
let canvas = globalScatterLoaderCanvas
canvas.width = w
canvas.height = h
let renderer = new PIXI.WebGLRenderer(w, h, {
let renderer = new PIXI.Renderer(w, h, {
view: canvas,
resolution: resolution
})
lib/pixi/flippable.js
+4 -4
View File
@@ -26,8 +26,8 @@
* Class that represents a PixiJS Flippable.
*
* @example
* const front = PIXI.Sprite.fromImage('./assets/front.jpg')
* const back = PIXI.Sprite.fromImage('./assets/back.jpg')
* const front = PIXI.Sprite.from('./assets/front.jpg')
* const back = PIXI.Sprite.from('./assets/back.jpg')
* app.scene.addChild(front)
*
* // Create the flippable
@@ -48,7 +48,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
* @constructor
* @param {PIXI.DisplayObject} front - The object to show initially. Should have been added to the scene.
* @param {PIXI.DisplayObject} back - The object to show on the backside. Should have not been added to the scene.
* @param {PIXI.WebGLRenderer|PIXI.CanvasRenderer} renderer - The renderer of the application.
* @param {PIXI.Renderer|PIXI.CanvasRenderer} renderer - The renderer of the application.
* @param {object} [opts] - An options object which can contain the following properties.
* @param {number} [opts.duration=1] - The duration of the flip animation in seconds.
* @param {GSAP.Ease} [opts.ease=Power2.easeOut] - The ease of the flip animation.
@@ -132,7 +132,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
// shadow
//--------------------
const shadow = new PIXI.projection.Sprite3d(PIXI.Texture.fromImage('../../assets/images/shadow.png'))
const shadow = new PIXI.projection.Sprite3d(PIXI.Texture.from('../../assets/images/shadow.png'))
shadow.renderable = false
shadow.anchor.set(0.5)
shadow.scale3d.set(0.98)
lib/pixi/flippable.test.html
+2 -2
View File
@@ -68,7 +68,7 @@ app.scene.addChild(scatterContainer)
// scatter
//--------------------
const sprite1 = PIXI.Sprite.fromImage('./assets/fruit-1.jpg')
const sprite1 = PIXI.Sprite.from('./assets/fruit-1.jpg')
sprite1.interactive = true
sprite1.scatter = new DisplayObjectScatter(sprite1, app.renderer, {
x: 20,
@@ -81,7 +81,7 @@ scatterContainer.addChild(sprite1)
// flippable
//--------------------
const sprite2 = PIXI.Sprite.fromImage('./assets/fruit-2.jpg')
const sprite2 = PIXI.Sprite.from('./assets/fruit-2.jpg')
const flippable = new Flippable(sprite1, sprite2, app.renderer)
// button1
lib/pixi/list.js
+2 -2
View File
@@ -7,8 +7,8 @@ import Events from '../events.js'
* Class that represents a PixiJS List.
*
* @example
* const elephant1 = PIXI.Sprite.fromImage('./assets/elephant-1.jpg')
* const elephant2 = PIXI.Sprite.fromImage('./assets/elephant-2.jpg')
* const elephant1 = PIXI.Sprite.from('./assets/elephant-1.jpg')
* const elephant2 = PIXI.Sprite.from('./assets/elephant-2.jpg')
*
* // Create the list
* const list = new List([elephant1, elephant2])
lib/pixi/modal.html
+1 -1
View File
@@ -129,7 +129,7 @@ let button6 = new Button({
}
})
let img = PIXI.Sprite.fromImage('./assets/modal-1.jpg')
let img = PIXI.Sprite.from('./assets/modal-1.jpg')
img.scale.set(.2, .2)
let button7 = new Button({
lib/pixi/popup.js
+1 -1
View File
@@ -73,7 +73,7 @@ export class InteractivePopup extends AbstractPopup {
// closeButton
//-----------------
if (this.opts.closeButton) {
let closeButton = PIXI.Sprite.fromImage('../../assets/icons/close.png', true)
let closeButton = PIXI.Sprite.from('../../assets/icons/close.png')
closeButton.width = this.headerStyle.fontSize
closeButton.height = closeButton.width
closeButton.tint = this.theme.color2
lib/pixi/scatter.html
+7 -7
View File
@@ -43,7 +43,7 @@
let x = 30
let y = 30
for (let key of ['women', 'king']) {
let sprite = PIXI.Sprite.fromImage('../examples/' + key + '.jpeg')
let sprite = PIXI.Sprite.from('../examples/' + key + '.jpeg')
sprite.interactive = true
let scatter = new DisplayObjectScatter(sprite, this.renderer,
{
@@ -98,7 +98,7 @@
this.scene.addChild(this.scatterContainerFront)
// Add the queen to ScatterContainer one
let sprite1 = PIXI.Sprite.fromImage('../examples/women.jpeg')
let sprite1 = PIXI.Sprite.from('../examples/women.jpeg')
sprite1.interactive = true
let scatter1 = new DisplayObjectScatter(sprite1, this.renderer, {
x: 20,
@@ -108,7 +108,7 @@
this.scatterContainerBack.addChild(sprite1)
// Add the king to ScatterContainer two
let sprite2 = PIXI.Sprite.fromImage('../examples/king.jpeg')
let sprite2 = PIXI.Sprite.from('../examples/king.jpeg')
sprite2.interactive = true
let scatter2 = new DisplayObjectScatter(sprite2, this.renderer, {
x: 280,
@@ -151,7 +151,7 @@
// Add the queen to ScatterContainer one
let woman = PIXI.Sprite.fromImage('../examples/women.jpeg')
let woman = PIXI.Sprite.from('../examples/women.jpeg')
woman.interactive = true
new DisplayObjectScatter(woman, this.renderer, {
x: 20,
@@ -161,21 +161,21 @@
})
this.scene.addChild(woman)
let nestedKing = PIXI.Sprite.fromImage('../examples/king.jpeg')
let nestedKing = PIXI.Sprite.from('../examples/king.jpeg')
nestedKing.interactive = true
new DisplayObjectScatter(nestedKing, this.renderer, {
x: 20, y: 20, startScale: 0.3
})
woman.addChild(nestedKing)
let nestedQueen = PIXI.Sprite.fromImage('../examples/women.jpeg')
let nestedQueen = PIXI.Sprite.from('../examples/women.jpeg')
nestedQueen.interactive = true
new DisplayObjectScatter(nestedQueen, this.renderer, {
x: 40, y: 40, startScale: 0.3
})
woman.addChild(nestedQueen)
let king = PIXI.Sprite.fromImage('../examples/king.jpeg')
let king = PIXI.Sprite.from('../examples/king.jpeg')
king.interactive = true
new DisplayObjectScatter(king, this.renderer, {
x: 200, y: 20, startScale: 1
lib/pixi/scatter.js
+1 -1
View File
@@ -137,7 +137,7 @@ export class ScatterContainer extends PIXI.Graphics {
if (child.scatter) {
let polygon = child.scatter.polygon
let shape = new PIXI.Polygon(polygon.flatAbsolutePoints())
shape.close()
//shape.close() not possible in PixiJS v5
this.drawShape(shape)
}
}
lib/pixi/text.html
+2 -2
View File
@@ -58,9 +58,9 @@ app.loadSprites([
text.pivot.set(text.width / 2, text.height / 2)
container.addChild(text)
// PIXI.extras.BitmapText
// PIXI.BitmapText
//--------------------
const bitmapText = new PIXI.extras.BitmapText('Bibliothek\nStuttgart', {
const bitmapText = new PIXI.BitmapText('Bibliothek\nStuttgart', {
font: '50px Arial',
align: 'left'
})
lib/pixi/tooltip.html
+1 -1
View File
@@ -143,7 +143,7 @@ app.loadSprites([
textStyle: {lineHeight: 22, fontSize: 18, fill: ['#843d39','#ae4a4a', '#d7626c'], fontStyle: 'italic'}
})
let texture1 = PIXI.Texture.fromVideo('./assets/tooltip-3.mp4')
let texture1 = PIXI.Texture.from('./assets/tooltip-3.mp4')
texture1.baseTexture.on('loaded', e => {