Sign in to follow this  
Italianbadboy

use canvas as texture in pixi v3

Recommended Posts

hi, my problem is  that i'm not able to use canvas as texture for my sprite. i tried to write the following code, someone can help me telling what i wrong?

 the code:

    <body>        <script src="file:///C|/Program Files (x86)/js/pixi.js/bin/pixi.js"></script>        <script src="file:///C|/Program Files (x86)/js/pixi.js/pixi-lights-master/bin/pixi-lights.js"></script>        <script>           var LightRenderer = new PIXI.lights.WebGLDeferredRenderer(1355, 700),           MainRenderer = new PIXI.autoDetectRenderer(1355, 700),			LightStage = new PIXI.Container(),			MainStage = new PIXI.Stage(0x000000),                        lightOnDeveloper = new PIXI.lights.PointLight(0xffffff,4)            								    PIXI.loader			                .add('bg','maschera.png')				.add('bg_normal','maschera_n.png')                .add('block_diffuse', 'developer_2.png')                .add('block_normal', 'developer_normal.png')                              .load(function (loader, res) {                    		var bg = new PIXI.Sprite(res.bg.texture);                var block = new PIXI.Sprite(res.block_diffuse.texture);                   					                    bg.normalTexture = res.bg_normal.texture;                    block.normalTexture = res.block_normal.texture;                                                       block.position.set(100,70);		LightStage.addChild(bg);                LightStage.addChild(block);                                      				                var ambientLight = new PIXI.lights.AmbientLight(0xFFFFFF,0.7);             ambientLight.position.set(100,100);                   LightStage.addChild(ambientLight);                   LightStage.addChild(lightOnDeveloper);                   LightRenderer.view.addEventListener('mousemove', function (e) {                   var rect = e.target.getBoundingClientRect();                        lightOnDeveloper.position.x = e.clientX - rect.left;                        lightOnDeveloper.position.y = e.clientY - rect.top;                    });                                       animate();                }); function animate() {                								                                               requestAnimationFrame(animate);		 LightRenderer.render(LightStage);            }  document.body.appendChild(MainRenderer.view);			var canvas = LightRenderer.view;			           	var LightStageBaseTexture = new PIXI.BaseTexture.fromCanvas(canvas,PIXI.SCALE_MODES.LINEAR);		    var LightStageTexture = new PIXI.Texture(LightStageBaseTexture);var spriteLightStage = new PIXI.Sprite.(LightStageTexture);MainStage.addChild(LightStageTexture);// other code to add sprite to  MainStageanimateMainStage();function animateMainStage() {		requestAnimationFrame(animateMainStage);MainRenderer.render(MainStage);}                   </script>           </body>

i would like to know why the canvas don't display and why it isn't update. thanks in advance!

Share this post


Link to post
Share on other sites

No error ...only a white page appear. If Someone have understood on the mainstage of pixi should be a sprite1.this sprite1's texture is the stage ( or container) of pixi-light.js. i do so because pixi-light.js is limited in order of metod and function respect pixi version 3.xx and don't let me rotate a little star who scroll from right to left of a text.when the star scroll each char must be light. It's a wonderful effect with normal map in pixi-light.js. then the sprite2 of the mainstage is the little star who scroll. Now i post the new test i have written using rendertexture function. In this case background image and text sprite are diplayed., the little star too but the normale map effect isn't diplayed.

Share this post


Link to post
Share on other sites

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" />

        <title>Pixi Lighting</title>
        <style>
            html, body { margin:0; padding: 0 }
        </style>
    </head>

    <body>
        <script src="file:///C|/Program Files (x86)/three.js/examples/js/libs/stats.min.js"></script>
        <script src="file:///C|/Program Files (x86)/js/pixi.js/bin/pixi.js"></script>
        <script src="file:///C|/Program Files (x86)/js/pixi.js/pixi-lights-master/bin/pixi-lights.js"></script>
        <script>
           var LightRenderer = new PIXI.lights.WebGLDeferredRenderer(1355, 700),
           MainRenderer = new PIXI.autoDetectRenderer(1355, 700),
            LightStage = new PIXI.Container(),
            MainStage = new PIXI.Stage(0x000000);
            //MainStage = new PIXI.Container(),
                lightOnDeveloper = new PIXI.lights.PointLight(0xffffff,4),
            stats = new Stats();

document.body.appendChild(MainRenderer.view);
//document.body.appendChild(Lightrenderer.view);
            /*var canvas = document.getElementsByName(canvas);
            var context = canvas.getContext('2d');
               var LightStageBaseTexture = new PIXI.BaseTexture(canvas);
            var LightStageTexture = new PIXI.Texture(LightStageBaseTexture);*/
            
            
            PIXI.loader
            
                .add('bg','maschera.png')
                .add('bg_normal','maschera_n.png')
                .add('block_diffuse', 'dewveloper_2.png')
                .add('block_normal', 'dewveloper_normal.png')
              
                .load(function (loader, res) {
                    
                    var bg = new PIXI.Sprite(res.bg.texture);
                    var block = new PIXI.Sprite(res.block_diffuse.texture);
                   
                    /*stella1.normalTexture = res.stella1_normal.texture;
                    stella2.normalTexture = res.stella2_normal.texture;*/
                    bg.normalTexture = res.bg_normal.texture;
                    block.normalTexture = res.block_normal.texture;
                   
                    
                    block.position.set(100,70);
                    LightStage.addChild(bg);
                   LightStage.addChild(block);
                    
                  

                   
var ambientLight = new PIXI.lights.AmbientLight(0xFFFFFF,0.7);
ambientLight.position.set(100,100);
                   LightStage.addChild(ambientLight);
                   // LightStage.addChild(new PIXI.lights.DirectionalLight(0xffffff, 1, block));
                    LightStage.addChild(lightOnDeveloper);
               LightRenderer.view.addEventListener('mousemove', function (e) {
                        var rect = e.target.getBoundingClientRect();

                        lightOnDeveloper.position.x = e.clientX - rect.left;
                        lightOnDeveloper.position.y = e.clientY - rect.top;
                    });

                   /* renderer.view.addEventListener('click', function (e) {
                        var rect = e.target.getBoundingClientRect();

                        var clickLight = new PIXI.lights.PointLight(0xffffff);

                        clickLight.position.x = e.clientX - rect.left;
                        clickLight.position.y = e.clientY - rect.top;

                        stage.addChild(clickLight);

                       
                    });*/

                  animate();
                });
 function animate() {
                
                LightRenderer.render(LightStage);
                
                //stats.begin();
                
               requestAnimationFrame(animate);
            }

var LightStageObjRenderTexture = new PIXI.RenderTexture(MainRenderer, 1355, 700, PIXI.SCALE_MODES.LINEAR, 1);

var LightStageSprite = new PIXI.Sprite(LightStageObjRenderTexture);

LightStageSprite.x=0;
LightStageSprite.y=0;
MainStage.addChild(LightStageSprite);          



var texturestella1 = PIXI.Texture.fromImage('stella1_.png');

// create a new Sprite using the texture
var stella1 = new PIXI.Sprite(texturestella1);
stella1.height=8;
stella1.weight=8;
var texturestella2 = PIXI.Texture.fromImage('stella2_.png');

// create a new Sprite using the texture
var stella2 = new PIXI.Sprite(texturestella2);
stella2.height=8;
stella2.weight=8;
// center the sprite's anchor point
stella1.anchor.x = 0.5;
stella1.anchor.y = 0.5;
// center the sprite's anchor point
stella2.anchor.x = 0.5;
stella2.anchor.y = 0.5;
                  stella2.position.set(405,74);
                    MainStage.addChild(stella2);
                     stella1.position.set(405, 75);
                   MainStage.addChild(stella1);
animateMainStage();

function animateMainStage() {
    
    LightStageObjRenderTexture.render(LightStage);
    
    requestAnimationFrame(animateMainStage);
MainRenderer.render(MainStage);

}




           
        </script>
       
    </body>
</html>
 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.