can webclient use zoom?

ID:1772491
 
Jan 28 2015, 3:19 pm
(See the best response by Kaiochao.)
Code:


Problem description:If not, cause it currently ignores it what are my other altneratives. I want zoom to be 2.

Jan 28 2015, 4:17 pm
I'm pretty sure it does because I've done it before and I believe Severed World does it as well. Are you doing it like so?:

winset(usr, "main.map", "zoom=2")


If that doesn't work then try:
winset(usr, "main.map", "icon-size=WHATEVER_YOUR_WORLD.ICON_SIZE_IS_DOUBLED")
Jan 28 2015, 4:28 pm
In response to Xirre
yea no zoom won't work for me. It's done that way. It works fine non webclient but with webclient it just pretends that line isnt their
Jan 28 2015, 4:36 pm
Best response
So far, the webclient only supports zoom=0 (stretch to fit) and zoom=1 (no scaling). This is documented, in the webclient reference.
Jan 29 2015, 4:40 am
In response to Kaiochao
will it ever be able to do zoom 2? it just looks really great. Of course i could just double every single icon size if I really was desperate in not finding another view i liked.

Jan 29 2015, 6:35 am
Kaiochao is correct: Per the documentation, only zoom=0 and zoom=1 are currently supported.

I would like to support custom zoom levels eventually. To do that we need to add more modifications to StageXL, if the author himself doesn't do so. Currently all it understands for scale modes are no scaling (1:1), stretch to fit with letterboxing, stretch to fit without letterboxing, and stretch to fit without respect to aspect ratio (not supported by BYOND).

I can't help but wonder if it'd be feasible to cheat by playing with CSS scaling in the map control, something I hadn't considered before. I have no idea what that'd result in as far as performance. My gut says having StageXL do the scaling is cleaner, but having CSS do it is certainly easier.
Jan 29 2015, 6:54 am
I can't help but wonder if it'd be feasible to cheat by playing with CSS scaling in the map control, something I hadn't considered before. I have no idea what that'd result in as far as performance. My gut says having StageXL do the scaling is cleaner, but having CSS do it is certainly easier.

CSS scaling of the canvas doesn't play nice with most browsers. You wind up with pretty terrible anti-aliasing in some cases. It does work in Chrome.

Give me five minutes and I'll give you some revisions to push to StageXL. Updating it to do arbitrary zoom is pretty easy.
Jan 29 2015, 7:13 am (Edited on Jan 29 2015, 7:34 am)
StageXL/stage_scale_mode.dart
part of stagexl.display;

/// The StageScaleMode defines how the Stage is scaled inside of the Canvas.

class StageScaleMode {

  final int index;
  final double scaleX = 1.0;
  final double scaleY = 1.0;
  const StageScaleMode(this.index,[double scaleX,double scaleY]) {
      if(?scaleX) { this.scaleX = scaleX; }
      if(?scaleY) { this.scaleY = scaleY; }
  }

  static const StageScaleMode EXACT_FIT = const StageScaleMode._(0);
  static const StageScaleMode NO_BORDER = const StageScaleMode._(1);
  static const StageScaleMode NO_SCALE = const StageScaleMode._(2);
  static const StageScaleMode SHOW_ALL = const StageScaleMode._(3);
}


StageXL/stage.dart replace lines 348-362
    switch(_stageScaleMode) {
      case StageScaleMode.EXACT_FIT:
        scaleX = ratioWidth;
        scaleY = ratioHeight;
        break;
      case StageScaleMode.NO_BORDER:
        scaleX = scaleY = (ratioWidth > ratioHeight) ? ratioWidth : ratioHeight;
        break;
      case StageScaleMode.NO_SCALE:
        scaleX = scaleY = 1.0;
        break;
      case StageScaleMode.SHOW_ALL:
        scaleX = scaleY = (ratioWidth < ratioHeight) ? ratioWidth : ratioHeight;
        break;
      default:
        scaleX = _stageScaleMode.scaleX;
        scaleY = _stageScaleMode.scaleY;
    }


Pretty sure that should do you. Might be a few small issues. I've never used Dart or StageXL before, but I'm pretty spun up on EMCA6 & 7 and I'm pretty handy with WebGL.

EDIT: Trying to get the sugar right. Also had to make the StageScaleMode's constructor public for you.
Jan 29 2015, 8:13 am
In response to 8BitParagon
never used anything like this before. You say its part of stagex1.display. So it sounds like that file should already be on my computer? If so where do i go to modify it
Jan 29 2015, 8:17 am
In response to DanteVFenris
DanteVFenris wrote:
never used anything like this before. You say its part of stagex1.display. So it sounds like that file should already be on my computer? If so where do i go to modify it

Ignore my posts. StageXL/Dart are what Tom/Lummox are writing the web client in. I was giving Lummox some code that would hopefully allow them to implement Zoom levels into the web client so they could fix your issue.
Jan 29 2015, 9:05 am
That's clever, 8Bit. When I get back to the webclient I might push that into our mods.
Jan 29 2015, 9:15 am
In response to 8BitParagon
oh okay sweet thanks for helping then, i'd really like zoom.
Jan 29 2015, 12:39 pm
Hey, Lummox, I took a bit of a pry into your web client... I'm not 100% sure what's causing the blurriness, but I'm pretty sure it's the way you guys are loading textures.

When you initialize your WebGL context from the canvas, make sure the antialiasing flag is set to off. Also, your texture loading should go a little bit like this:

function Texture(gl,source) {
    var image = new Image();
    this.texture = gl.createTexture();
    this.loaded = false;
    gl.bindTexture(gl.TEXTURE_2D,this.texture);
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL,true);
    gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MAG_FILTER,gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.NEAREST);
    gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,1,1,0,gl.RGBA,gl.UNSIGNED_BYTE,new Uint8Array([0,0,0,255]));
    gl.bindTexture(gl.TEXTURE_2D,null);
    var self = this;
    image.addEventListener("load",function() {
        gl.bindTexture(gl.TEXTURE_2D,self.texture);
        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL,true);
        gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,gl.RGBA,gl.UNSIGNED_BYTE,image);
        gl.bindTexture(gl.TEXTURE_2D,null);
        self.loaded = true;
    });
    image.src = source;
}


Notice that the TEXTURE_MAG/MIN_FILTERs are set to gl.NEAREST?

That ought to get rid of your anti-aliasing and blurriness in the web client.

Also, you can fully get rid of BLEND_MODEs with a good shader. Make sure you guys are using proper shader code.

function initShaders(renderer,gl)
{
    var vertexShader = createShaderFromScriptElement(gl,"2d-vertex-shader");
    var fragmentShader = createShaderFromScriptElement(gl,"2d-fragment-shader");

    var shader = new Shader(gl,createProgram(gl,[vertexShader, fragmentShader]),["u_resolution","u_sampler"],["a_position","a_texcoord"]);

    renderer.setShader(shader);

    //TODO: set uniforms based on batch properties instead of manually.
    gl.uniform4f(shader.uniforms["uniformColor"],1,0,0,1);
    gl.uniform2f(shader.uniforms["u_resolution"],renderer.width,renderer.height);
    
    renderer.shaders.push(shader);

    shader = new Shader(gl,createProgram(gl,[vertexShader, fragmentShader]),["u_resolution","u_sampler"],["a_position","a_texcoord"]);

    renderer.setShader(shader);

    gl.uniform4f(shader.uniforms["uniformColor"],0,0,1,1);
    gl.uniform2f(shader.uniforms["u_resolution"],256,256);

    renderer.shaders.push(shader);
}


You'll also want to make sure you are building megatextures where you can using FBOs on the client-side. This will help get some of the major problems with the web client under control.
Jan 29 2015, 12:49 pm
We're not using WebGL directly; we're using StageXL to handle all of this.
Jan 29 2015, 1:08 pm
Thanks for the excellent technical info, 8bit! We can look at how StageXL is translating this stuff. I recall messing with the texture filter flags, so I'm sure we can override that appropriately.

I would like to opensource the dart code pretty soon so you and others can look under the hood to improve it.