• Content Count

  • Joined

  • Last visited

Everything posted by trusktr

  1. I wonder how much performance cost that incurs, rendering to one canvas (with the GPU) then taking the image data to Three.js texture, and rendering to another canvas (with GPU). Seems like a lot going on there. Maybe there is an optimized code path underneath in the browsers, for that case?
  2. The best solution is for library authors (f.e. you Deltakosh) to implement this functionality. App devs can do it too, but I think when someone uses libraries similar to Babylon, they usually intend to make the entire app with that library or framework, so it is nice when such a library provides options. It would be great to turn this on/off in Babylon for example.
  3. I'm curious to learn how to draw a Pixi scene as a texture on an object of a custom webgl 3D app (not using Three.js, just plain WebGL). I think I have to render a Pixi.js scene onto a framebuffer somehow. but I'm not sure how yet. Any suggestions and/or small examples?
  4. Hehe, well, now there's an answer. :}
  5. This is easy to do! So, you presumably have a Sprite that contains the Google logo image. Now, you can create a white-to-black linear gradient and apply that as a texture. Here's a function I made that creates a gradient using a new canvas: function createLinearGradient(width, height, stops, mapFn) { mapFn = typeof mapFn == 'function' ? mapFn : function(canvas) {return canvas} var canvas = document.createElement('canvas') canvas.width = width canvas.height = height var ctx = canvas.getContext('2d') var gradient = ctx.createLinearGradient(0, 0, width, 0) var stopPoints = Object.keys(stops) for (var i=0, n=stopPoints.length; i<n; i+=1) gradient.addColorStop(parseFloat(stopPoints[i]), stops[stopPoints[i]]) ctx.fillStyle = gradient ctx.fillRect(0, 0, width, height) return mapFn(canvas) } Now, create a Sprite using that function, the Sprite will contain the gradient that we'll use as a mask: var gradient = createLinearGradient(googleSpriteWidth, googleSpriteWidth, { // These are the gradients stops, starting at the beginning (0.0) with white and ending with black at the end (1.0). 0.0: 'white', 1.0: 'black', // black color will make pixels transparent. }, function mapToSprite(canvas) { return new PIXI.Sprite(new PIXI.Texture(new PIXI.BaseTexture(canvas))) }) Assuming that your sprite is called "google", and "googleSpriteWidth/Height" are the width and height of the Sprite. Then you can apply the mask: google.mask = gradient Lastly, make sure that the mask is positioned at the same place as the "google" Sprite. So, for example, if you are adding the "google" Sprite to a container, you can also add the gradient Sprite to the same container: someContainer.addChild(google) someContainer.addChild(gradient) // then you can move both sprites around at the same time someContainer.position.x = 100 someContainer.position.y = 100 That will do the trick!
  6. Can you explain how this works? I don't see how the trail stays behind and slowly fades out. I see you are drawing a new rect and ellipse every frame, but I'm not sure how that results in a fade. Thanks in advance! :} - Joe
  7. Are there any examples of how to make a scene graph? Something similar to adding child objects to Object3D instances in Three.js with the Object3D.add method?