trsh

Members
  • Content Count

    82
  • Joined

  • Last visited

About trsh

  • Rank
    Advanced Member

Recent Profile Visitors

1359 profile views
  1. Ehh, never mind, got the sizes wrong.. Somehave I was thinking that `app.renderer.render(container, rtt);` would squeeze the whole thing into 200, 200 render texture
  2. My code (you can paste it in PIXI's examples) I expect in a `smallScreen` in corner to show what's going on on stage. But no :/ const app = new PIXI.Application(); document.body.appendChild(app.view); const geometry = new PIXI.Geometry() .addAttribute('aVertexPosition', [-100, -50, 100, -50, 0, 100]); const shader = PIXI.Shader.from(` precision mediump float; attribute vec2 aVertexPosition; uniform mat3 translationMatrix; uniform mat3 projectionMatrix; void main() { gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); }`, `precision mediump float; void main() { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); } `); const triangle = new PIXI.Mesh(geometry, shader); const container = new PIXI.Container(); container.addChild(triangle); const rtt = PIXI.RenderTexture.create(200,200); const smallSCreen = PIXI.Sprite.from(rtt); smallSCreen.x = 0; smallSCreen.y = 0; smallSCreen.width = 100; smallSCreen.height = 100; triangle.position.set(400, 300); app.stage.addChild(container); app.stage.addChild(smallSCreen); app.ticker.add((delta) => { triangle.rotation += 0.01; app.renderer.render(container, rtt); });
  3. I needed to add: const myLuckyVideoElTmp = document.createElement('video'); myLuckyVideoElTmp.preload = "auto"; myLuckyVideoElTmp.setAttribute('crossorigin', 'anonymous'); Now it works
  4. Seems like this bug is only when using : const videoResource = new PIXI.resources.VideoResource(videoEl, { autoPlay: false, autoLoad: true, crossorigin: true });
  5. `Failed to execute 'texImage2D' on 'WebGL2RenderingContext': The video element contains cross-origin data, and may not be loaded.` How to fix this? The response header for my video delivered seems to be OK: Access-Control-Allow-Headers: DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range Access-Control-Allow-Methods: GET Access-Control-Allow-Origin: http://localhost:3000 Access-Control-Expose-Headers: Content-Length,Content-Range
  6. Doing pause right after play results in an error. Or how do u mean it?
  7. Alternatively can paste the below code in "https://pixijs.io/examples/#/sprite/video.js" and crank the numbers up in input. Only some frames will appear const app = new PIXI.Application(); document.body.appendChild(app.view); const fs = document.createElement('input'); fs.type = 'number'; fs.style.position = 'absolute'; fs.style.top = '0px'; fs.style.left = '0px'; document.body.appendChild(fs); const videoEl = document.createElement('video'); videoEl.preload = "auto"; videoEl.controls = true; videoEl.addEventListener("canplaythrough", function() { process(); }, {once : true}); videoEl.src = 'examples/assets/video.mp4'; function process(){ const videoResource = new PIXI.resources.VideoResource(videoEl, { autoPlay: false, autoLoad: true, crossorigin: true }); const baseTexture = new PIXI.BaseTexture(videoResource, { mipmap: false }); const mediaTexture = new PIXI.Texture(baseTexture); const mediaSprite = new PIXI.Sprite(mediaTexture); app.stage.addChild(mediaSprite); fs.onchange = function(e){ videoEl.currentTime = e.target.value; console.log(videoEl.currentTime); mediaTexture.update(); } }
  8. Not sure why cross origin stuff. The video works in vanilla HTML+JS https://codepen.io/andryjohn/pen/xNWvdo
  9. I try, but then there is another issue , where PIXI is complaining about cross origin https://codepen.io/TrshMan/pen/GRpPQgm P.S. test it on FF, Chrome has issues with setting currentTime
  10. My setup is like const videoResource = new PIXI.resources.VideoResource(videoEl, { autoPlay: false, autoLoad: true, crossorigin: true }); const baseTexture = new PIXI.BaseTexture(videoResource, { mipmap: false }); const mediaTexture = new PIXI.Texture(baseTexture); const mediaSprite = new PIXI.Sprite(mediaTexture); app.stage.addChild(mediaSprite); What then I try todo is : frameEl.onchange = function(e){ const frame = parseInt(e.target.value); videoEl.currentTime = e.target.value/fps; mediaTexture.update(); }; But it doesn't work . I got lot's of black screens.
  11. I do something like this to loop trough video frame by frame: frameEl.onchange = function(e){ const frame = parseInt(e.target.value); videoEl.currentTime = e.target.value/fps; }; But the PIXI canvas is not updating. It updated only on `play`. Are there options?
  12. Ok thanks. Got it working
  13. How do I re-render one to second? Sorry I did not understand that from ur examples.