Jump to content
  • Advertisement
Sign in to follow this  

2D Smooth "infinity" ortho zoom

Recommended Posts

I'm wondering if I'm missing any steps or making incorrect assumptions anywhere in creating an "infinite zoom" effect in a viewport similar to what happens in the software Mischief where you can pan LRUD and zoom in and out. Mischief claims trillions of levels of zoom.


In this prototype in Maya as you can see I have a front facing orthographic camera and a tree-like structure of 1x1 planes that have been scaled down and/or translated in Z. Imagine the planes as having arbitrarily sized textures on them. Later I want this to be in 3D stereo or VR with depth playing a factor as well as size. I am prototyping this in Maya before I move it to my engine in GL with GLM.


I can successfully zoom the ortho camera and set camera bookmarks that I can recall. However I quickly run out of camera zoom resolution as the zoom parameter approaches zero. For example in this scene pictured above I only have 24 1x1 planes but when I'm zoomed far enough in that I can only see the smallest one, the camera zoom is near zero, (even if I query the internal double value), everything starts to shake, and I can't really go any smaller than 0. With mischief, I can zoom in way deeper, to where I haven't found a limit, and do it smoothly.


How can I keep on zooming in more with ortho? I tried using a perspective cam and just transforming it, but the perspective distortion warps the perceived position of the planes too much to where once you zoom in far enough everything begins drifting behind each other. 


They could also be moving objects back in world space with a real flat perspective cam as they "zoom" in...?

Anotherquestion is why have I only seen this implemented in Mischief out of all the other programs? Is the implementation that difficult or not useful and if its not useful, why did the Foundry buy out the program?

Edited by mrMatrix

Share this post

Link to post
Share on other sites

I'm making some progress. From what I've read so far basically the algorithm is scaling individual objects up and down and disabling ortho zoom while retaining the ability to move L/R. This gives the benefit of having an ortho camera in regards to 2d plane placement always lining up and makes it so you aren't limited by hitting zero on the ortho zoom parameter.

You can write a function to calculate if the plane has scaled so much that it surrounds the screen meaning you can now cull it. Also if it gets too small you can cull it. Of course you can still move the ortho cam L/R

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Advertisement
  • Advertisement
  • Popular Tags

  • Popular Now

  • Advertisement
  • Similar Content

    • By lucky6969b
      like this?

      const D3DXMATRIX robertx = D3DXMATRIX(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1);
    • By bojanzarnoski@gmx.de
      I want to get into coding again by programming a 2D platformer to get started, but i don't know if i should use Java or C# with the unity engine.
      I am pretty fit with Java, but with c# i have to start from scratch. What do you recommend and why?
    • By 3dmodelerguy
      So I have this code to create a textbox ui element with SDL2 and for the most part it works:
      #include <iostream> #include "TextboxUi.hpp" #include "../Engine/Text.hpp"; #include "../Utility/SdlUtility.hpp"; #include "../Engine/Game.hpp"; TextboxUi::TextboxUi(int x, int y, int width, int height, SDL_Color backgroundColor, SDL_Color textColor) { _background = {x, y, width, height}; _backgroundColor = backgroundColor; _textColor = textColor; } void TextboxUi::setValue(std::string value) { _value = value; } void TextboxUi::handleInput(SDL_Event &event) { switch (event.type) { case SDL_TEXTINPUT: { if (_isActive) { _value += event.text.text; _cursorPosition += 1; } break; } case SDL_TEXTEDITING: { break; } case SDL_KEYUP: { switch (event.key.keysym.sym) { case SDLK_BACKSPACE: if (_value.size() == 0) { break; } _cursorPosition -= 1; _value.erase(_cursorPosition, 1); break; case SDLK_s: { if (!_isActive) { _isActive = true; } break; } case SDLK_LEFT: { if (_cursorPosition == 0) { break; } _cursorPosition -= 1; break; } case SDLK_RIGHT: { if (_cursorPosition == _value.size()) { break; } _cursorPosition += 1; break; } case SDLK_ESCAPE: _isActive = false; _value = ""; break; default: break; } break; } default: break; } } void TextboxUi::enable() { _isActive = true; } void TextboxUi::disable() { _isActive = false; } void TextboxUi::draw(SDL_Renderer* renderer) { SdlUtility::setRenderDrawColor(Game::renderer, _backgroundColor); SDL_RenderFillRect(Game::renderer, &_background); // if there is no text Text would fail to create the surface and texture (not quite sure why) if (_value.size() == 0) { return; } Text text = Text("Assets/Fonts/Vera.ttf", 12, _value, _textColor); text.display(_background.x + 5, _background.y + 2); // @todo implement visual for text cursor } The one last thing I want to do before I call this textbox done for the time being is try to figure out how to simulate a cursor. At this point just getting a solid cursor would be final (though ultimately I would like to have it blinking. I have the cursor position so I know between which characters the cursor should be however I am not sure how to calculate that.
      Is there a way to calculate the width of a given string without actually rendering said sting to the screen with SDL2 / SDL2_ttf?
    • By DevAndroid
      Hello everyone,
      I'm trying to display a 2D texture to screen but the rendering isn't working correctly.
      First of all I did follow this tutorial to be able to render a Text to screen (I adapted it to render with OpenGL ES 2.0) : https://learnopengl.com/code_viewer.php?code=in-practice/text_rendering
      So here is the shader I'm using :
      const char gVertexShader[] = "#version 320 es\n" "layout (location = 0) in vec4 vertex;\n" "out vec2 TexCoords;\n" "uniform mat4 projection;\n" "void main() {\n" " gl_Position = projection * vec4(vertex.xy, 0.0, 1.0);\n" " TexCoords = vertex.zw;\n" "}\n"; const char gFragmentShader[] = "#version 320 es\n" "precision mediump float;\n" "in vec2 TexCoords;\n" "out vec4 color;\n" "uniform sampler2D text;\n" "uniform vec3 textColor;\n" "void main() {\n" " vec4 sampled = vec4(1.0, 1.0, 1.0, texture(text, TexCoords).r);\n" " color = vec4(textColor, 1.0) * sampled;\n" "}\n"; The render text works very well so I would like to keep those Shaders program to render a texture loaded from PNG.
      For that I'm using libPNG to load the PNG to a texture, here is my code :
      GLuint Cluster::loadPngFromPath(const char *file_name, int *width, int *height) { png_byte header[8]; FILE *fp = fopen(file_name, "rb"); if (fp == 0) { return 0; } fread(header, 1, 8, fp); if (png_sig_cmp(header, 0, 8)) { fclose(fp); return 0; } png_structp png_ptr = png_create_read_struct(PNG_LIBPNG_VER_STRING, NULL, NULL, NULL); if (!png_ptr) { fclose(fp); return 0; } png_infop info_ptr = png_create_info_struct(png_ptr); if (!info_ptr) { png_destroy_read_struct(&png_ptr, (png_infopp)NULL, (png_infopp)NULL); fclose(fp); return 0; } png_infop end_info = png_create_info_struct(png_ptr); if (!end_info) { png_destroy_read_struct(&png_ptr, &info_ptr, (png_infopp) NULL); fclose(fp); return 0; } if (setjmp(png_jmpbuf(png_ptr))) { png_destroy_read_struct(&png_ptr, &info_ptr, &end_info); fclose(fp); return 0; } png_init_io(png_ptr, fp); png_set_sig_bytes(png_ptr, 8); png_read_info(png_ptr, info_ptr); int bit_depth, color_type; png_uint_32 temp_width, temp_height; png_get_IHDR(png_ptr, info_ptr, &temp_width, &temp_height, &bit_depth, &color_type, NULL, NULL, NULL); if (width) { *width = temp_width; } if (height) { *height = temp_height; } png_read_update_info(png_ptr, info_ptr); int rowbytes = png_get_rowbytes(png_ptr, info_ptr); rowbytes += 3 - ((rowbytes-1) % 4); png_byte * image_data; image_data = (png_byte *) malloc(rowbytes * temp_height * sizeof(png_byte)+15); if (image_data == NULL) { png_destroy_read_struct(&png_ptr, &info_ptr, &end_info); fclose(fp); return 0; } png_bytep * row_pointers = (png_bytep *) malloc(temp_height * sizeof(png_bytep)); if (row_pointers == NULL) { png_destroy_read_struct(&png_ptr, &info_ptr, &end_info); free(image_data); fclose(fp); return 0; } int i; for (i = 0; i < temp_height; i++) { row_pointers[temp_height - 1 - i] = image_data + i * rowbytes; } png_read_image(png_ptr, row_pointers); GLuint texture; glGenTextures(1, &texture); glBindTexture(GL_TEXTURE_2D, texture); glPixelStorei(GL_UNPACK_ALIGNMENT, 1); glTexImage2D(GL_TEXTURE_2D, GL_ZERO, GL_RGB, temp_width, temp_height, GL_ZERO, GL_RGB, GL_UNSIGNED_BYTE, image_data); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_R, GL_CLAMP_TO_EDGE); png_destroy_read_struct(&png_ptr, &info_ptr, &end_info); free(image_data); free(row_pointers); fclose(fp); return texture; } This code just generates the texture and I store the id on memory
      And then I want to display my texture on any position (X, Y) of my screen so I did the following (That's works, at least the positioning).
      //MY TEXTURE IS 32x32 pixels ! void Cluster::printTexture(GLuint idTexture, GLfloat x, GLfloat y) { glActiveTexture(GL_TEXTURE0); glBindVertexArray(VAO); GLfloat vertices[6][4] = { { x, y + 32, 0.0, 0.0 }, { x, y, 0.0, 1.0 }, { x + 32, y, 1.0, 1.0 }, { x, y + 32, 0.0, 0.0 }, { x + 32, y, 1.0, 1.0 }, { x + 32, y + 32, 1.0, 0.0 } }; glBindTexture(GL_TEXTURE_2D, idTexture); glBindBuffer(GL_ARRAY_BUFFER, VBO); glBufferSubData(GL_ARRAY_BUFFER, GL_ZERO, sizeof(vertices), vertices); glBindBuffer(GL_ARRAY_BUFFER, GL_ZERO); glUniform1i(this->mTextShaderHandle, GL_ZERO); glDrawArrays(GL_TRIANGLE_STRIP, GL_ZERO, 6); } My .png is a blue square.
      The result is that my texture is not loaded correctly. It is not complete and there are many small black spots. I don't know what's going on ? It could be the vertices or the load ? Or maybe I need to add something on the shader. I don't know, I really need help.
      Thanks !
    • By LuigiLuigi
      I've been working on my own Metroidvania via GameMaker Studio for the past few years. You play as a bat named Ralph as he goes on an adventure to obtain 7 Crystal Medallions hidden in dungeons with the help of a cult known as the Crimson Fog. Along the way, there will be quests unlocked in Cedrus Village as you progress through the game. I've managed to complete a demo of the game up to the first dungeon and boss fight.
      I have only a PC build available, and the only gamepads I managed to install were Logitech Precision and Xbox PC gamepads. I had some trouble on gamepad detection though, so they may have connection issues. The desktop controls are similar to Terarria's control scheme if it's too much trouble. I don't have any music at this point, I'll need to get someone else to compose it later on. The music I make isn't bad, but it doesn't fit the aesthetic that well.
      I'm really hoping I can get feedback regarding the general content.
      Crimson Fog.0.2.zip
  • Advertisement

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

Participate in the game development conversation and more when you create an account on GameDev.net!

Sign me up!