pixi.js

问题 I would really like to use normal maps in pixi.js but I don't know how. I've came across a good example with THREE.js and using webgl shaders - clickOnDemo (sometimes it's necessary to click once on the image to work). So I really wanted to replicate it but using pixi, I gave it a shot aand black screen - myDemo . I don't get errors and I'm not sure what I'm doing wrong. Could the problem be in the way I'm creating the mesh or the shader? var material = new PIXI.Shader.from(null, shaderCode,

问题 I would really like to use normal maps in pixi.js but I don't know how. I've came across a good example with THREE.js and using webgl shaders - clickOnDemo (sometimes it's necessary to click once on the image to work). So I really wanted to replicate it but using pixi, I gave it a shot aand black screen - myDemo . I don't get errors and I'm not sure what I'm doing wrong. Could the problem be in the way I'm creating the mesh or the shader? var material = new PIXI.Shader.from(null, shaderCode,

问题 I'm new to PixiJS and I'm trying something simple like a painting application. I'm having difficulty trying to capture a collection of shapes as a single grouping. I'm not interested in working code for this as I'd like to figure that out on my own; I'm simply interested in knowing whether I'm on the right track or if I need to explore some other PixiJS concepts to get what I need. I have one canvas in which I can drag shapes such as rectangles, ellipse, and lines. These "strokes" are being

问题 I'm currently working on a website with a list of items. Each item has a thumbnail, and I'm adding a shader effect on all of them using PixiJS . The problem is that there's more than 16 items on the list, so I'm getting the following error : WARNING: Too many active WebGL contexts. Oldest context will be lost. Is there a way to increase this limit ? I can't make the whole page on WebGL, and the usage is so limited (no interaction, lite effect) that I think more WebGL contexts will not make

问题 I'm currently working on a website with a list of items. Each item has a thumbnail, and I'm adding a shader effect on all of them using PixiJS . The problem is that there's more than 16 items on the list, so I'm getting the following error : WARNING: Too many active WebGL contexts. Oldest context will be lost. Is there a way to increase this limit ? I can't make the whole page on WebGL, and the usage is so limited (no interaction, lite effect) that I think more WebGL contexts will not make

问题 I can not connect a pixi to an angular I add to angular.json "scripts": [ "../node_modules/pixi.js/lib/index.js" ], In Class: import * as PIXI from 'pixi.js'; export class Render { public app: any; constructor(el) { this.app = new PIXI.Application({ width: 800, height: 600 }); el.nativeElement.insertAdjacentHTML('beforeend', this.app.view); } } At compilation, I receive an error ERROR in ./node_modules/pixi.js/lib/mesh/webgl/MeshRenderer.js Module not found: Error: Can't resolve 'path' in '

问题 I'm trying to write a fragment-shader that functions as a chroma-key filter for a specific color (for example make all pixels with a specific green transparent). The shader I'm writing is for use in WebGL trough PIXI.js. JSFiddle: https://jsfiddle.net/IbeVanmeenen/hexec6eg/14/ So far, I wrote this code for the shader, based on the shader I've found here. varying vec2 vTextureCoord; uniform float thresholdSensitivity; uniform float smoothing; uniform vec3 colorToReplace; uniform sampler2D

问题 I'm trying to write a fragment-shader that functions as a chroma-key filter for a specific color (for example make all pixels with a specific green transparent). The shader I'm writing is for use in WebGL trough PIXI.js. JSFiddle: https://jsfiddle.net/IbeVanmeenen/hexec6eg/14/ So far, I wrote this code for the shader, based on the shader I've found here. varying vec2 vTextureCoord; uniform float thresholdSensitivity; uniform float smoothing; uniform vec3 colorToReplace; uniform sampler2D

问题 I'd like to draw some kind of popyline chart using pixijs lineTo method. The problem is the lines are rendered outside dedicated area. Sample: var stage = new PIXI.Stage(0xFFFFFE); var renderer = new PIXI.WebGLRenderer(600, 600); document.body.appendChild(renderer.view); var graphics = new PIXI.Graphics(); graphics.lineStyle(1, 0x0000FF, 1); graphics.moveTo(0, 50); graphics.lineTo(50, 50);//draw min Y line graphics.moveTo(0, 100); graphics.lineTo(50, 100);//draw max Y line graphics.moveTo(60,

问题 I'm making a game in Phaser using some large images that I want to scale down in the actual game: create() { //Create the sprite group and scale it down to 30% this.pieces = this.add.group(undefined, "pieces", true); this.pieces.scale.x = 0.3; this.pieces.scale.y = 0.3; //Add the players to the middle of the stage and add them to the 'pieces' group var middle = new Phaser.Point( game.stage.width/2, game.stage.height/2); var player_two = this.add.sprite(middle.x - 50, middle.y, 'image1',