[HTML5, Starling + Away3D] Stage resizing issues with shared context

If we start application with small browser window at first, then maximize it, stage will be cutted
I’ve just modified basic/Particles sample Main class, so you can easily reproduce it.
How in can be fixed? Or are there any work arounds?

Just copy this code to basic/Particles/Main.hx and add <haxelib name="starling" /> to project.xml

/*

Basic GPU-based particle animation example in Away3d

Demonstrates:

How to use the ParticleAnimationSet to define static particle behaviour.
How to create particle geometry using the ParticleGeometryHelper class.
How to apply a particle animation to a particle geometry set using ParticleAnimator.
How to create a random spray of particles eminating from a central point.

Code by Rob Bateman & Liao Cheng
[email protected]
http://www.infiniteturtles.co.uk
[email protected]


This code is distributed under the MIT License

Copyright (c) The Away Foundation http://www.theawayfoundation.org

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the “Software”), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

*/

package;

import starling.display.Quad;
import openfl.display3D.Context3DRenderMode;
import starling.core.Starling;
import away3d.events.Stage3DEvent;
import away3d.core.managers.Stage3DProxy;
import away3d.core.managers.Stage3DManager;
import away3d.animators.*;
import away3d.animators.data.*;
import away3d.animators.nodes.*;
import away3d.containers.*;
import away3d.controllers.*;
import away3d.core.base.*;
import away3d.debug.*;
import away3d.entities.*;
import away3d.materials.*;
import away3d.primitives.*;
import away3d.tools.helpers.*;
import away3d.utils.*;

import openfl.display.*;
import openfl.events.*;
import openfl.geom.*;
import openfl.Vector;

class Main extends Sprite
{		
	//engine variables
	private var _view:View3D;
	private var _cameraController:HoverController;
	
	//particle variables
	private var _particleAnimationSet:ParticleAnimationSet;
	private var _particleMesh:Mesh;
	private var _particleAnimator:ParticleAnimator;
	
	//navigation variables
	private var _move:Bool = false;
	private var _lastPanAngle:Float;
	private var _lastTiltAngle:Float;
	private var _lastMouseX:Float;
	private var _lastMouseY:Float;
	
	/**
	 * Constructor
	 */
	public function new()
	{
		super();
		
		initProxies();
	}

	private function onContextCreated(event:Stage3DEvent):Void
	{
		initStarling();
		initAway3D();
	}

	var _starling:Starling;

	private function initStarling():Void
	{
		_starling = new Starling(AppDisplay, stage, stage3DProxy.viewPort, stage3DProxy.stage3D, Context3DRenderMode.AUTO);
		_starling.showStats = true;

		stage.addEventListener(openfl.events.Event.ENTER_FRAME, e -> {
			stage3DProxy.clear();

			_starling.nextFrame();
			_view.render();

			stage3DProxy.present();
		});

		_starling.start();
	}

	private function initAway3D():Void
	{
		stage.scaleMode = StageScaleMode.NO_SCALE;
		stage.align = StageAlign.TOP_LEFT;

		_view = new View3D();
		_view.stage3DProxy = stage3DProxy;
		_view.shareContext = true;
		addChild(_view);

		_cameraController = new HoverController(_view.camera, null, 45, 20, 1000);

//		addChild(new AwayStats(_view));

		//setup the particle geometry
		var plane:Geometry = new PlaneGeometry(10, 10, 1, 1, false);
		var geometrySet:Vector<Geometry> = new Vector<Geometry>();
		for (i in 0...20000)
			geometrySet.push(plane);

		//setup the particle animation set
		_particleAnimationSet = new ParticleAnimationSet(true, true);
		_particleAnimationSet.addAnimation(new ParticleBillboardNode());
		_particleAnimationSet.addAnimation(new ParticleVelocityNode(ParticlePropertiesMode.LOCAL_STATIC));
		_particleAnimationSet.initParticleFunc = initParticleFunc;

		//setup the particle material
		var material:TextureMaterial = new TextureMaterial(Cast.bitmapTexture("assets/blue.png"));
		material.blendMode = BlendMode.ADD;

		//setup the particle animator and mesh
		_particleAnimator = new ParticleAnimator(_particleAnimationSet);
		_particleMesh = new Mesh(ParticleGeometryHelper.generateGeometry(geometrySet), material);
		_particleMesh.animator = _particleAnimator;
		_view.scene.addChild(_particleMesh);

		//start the animation
//		_particleAnimator.start();

		//add listeners
		addEventListener(Event.ENTER_FRAME, onEnterFrame);
		stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
		stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
		stage.addEventListener(Event.RESIZE, onResize);
		onResize();
	}

	private var stage3DManager:Stage3DManager;
	private var stage3DProxy:Stage3DProxy;

	private function initProxies():Void
	{
		// Define a new Stage3DManager for the Stage3D objects
		stage3DManager = Stage3DManager.getInstance(stage);

		// Create a new Stage3D proxy to contain the separate views
		stage3DProxy = stage3DManager.getFreeStage3DProxy(false, "enhanced");
		stage3DProxy.addEventListener(Stage3DEvent.CONTEXT3D_CREATED, onContextCreated);
	}

	/**
	 * Initialiser function for particle properties
	 */
	private function initParticleFunc(prop:ParticleProperties):Void
	{
		prop.startTime = Math.random()*5 - 5;
		prop.duration = 5;
		var degree1:Float = Math.random() * Math.PI ;
		var degree2:Float = Math.random() * Math.PI * 2;
		var r:Float = Math.random() * 50 + 400;
		prop.nodes[ParticleVelocityNode.VELOCITY_VECTOR3D] = new Vector3D(r * Math.sin(degree1) * Math.cos(degree2), r * Math.cos(degree1) * Math.cos(degree2), r * Math.sin(degree2));
	}
	
	/**
	 * Navigation and render loop
	 */		
	private function onEnterFrame(event:Event):Void
	{
		if (_move)
		{
			_cameraController.panAngle = 0.3*(stage.mouseX - _lastMouseX) + _lastPanAngle;
			_cameraController.tiltAngle = 0.3*(stage.mouseY - _lastMouseY) + _lastTiltAngle;
		}
//		_view.render();
	}
	
	/**
	 * Mouse down listener for navigation
	 */		
	private function onMouseDown(event:MouseEvent):Void
	{
		_lastPanAngle = _cameraController.panAngle;
		_lastTiltAngle = _cameraController.tiltAngle;
		_lastMouseX = stage.mouseX;
		_lastMouseY = stage.mouseY;
		_move = true;
		stage.addEventListener(Event.MOUSE_LEAVE, onStageMouseLeave);
	}
	
	/**
	 * Mouse up listener for navigation
	 */		
	private function onMouseUp(event:MouseEvent):Void
	{
		_move = false;
		stage.removeEventListener(Event.MOUSE_LEAVE, onStageMouseLeave);
	}
	
	/**
	 * Mouse stage leave listener for navigation
	 */
	private function onStageMouseLeave(event:Event):Void
	{
		_move = false;
		stage.removeEventListener(Event.MOUSE_LEAVE, onStageMouseLeave);
	}
	
	/**
	 * stage listener for resize events
	 */
	private function onResize(event:Event = null):Void
	{
		_view.width = stage.stageWidth;
		_view.height = stage.stageHeight;
	}
}

class AppDisplay extends starling.display.Sprite
{
	public function new()
	{
		super();

		var q:Quad = new Quad(500, 500, 0xFF0000);

		addChild(q);
	}
}

OpenFL, Starling and Away3D all need to handle the Event.RESIZE event from the stage and (I assume) resize to map fully to the new resolution instead of stretching.

Starling is not set to resize to match the new screen resolution by default (in my understanding) and instead wants to use a hard-coded width/height value. Perhaps try to resize Starling first. I think there is some information here:

https://forum.starling-framework.org/d/14744-starling-game-resizing-for-multiple-devices/2

I don’t know how this works when using a stage3D proxy but I think Starling may still need to be told to resize

It’s OK if I use pure Starling without sharing context with Away3D.
I found old posts about the issue. But no solution found :frowning:
https://forum.starling-framework.org/d/10526-bug-with-starling-shared-context-stageviewport-resize
https://forum.starling-framework.org/d/14070-starling-away3d-proxy-resize
http://away3d.com/forum/viewthread/3851/
https://forum.starling-framework.org/d/4345-starlingaway3d-stage-resize-problem

@CrazyFlasher Were you able to solve this? I’m having a similar issue.