Tips for resizing a texture on a Texture Atlas without losing its offset?

Is it possible to resize a specific texture on a texture atlas in GLSL without affecting the other textures? Let's assume there is a texture atlas containing 16 different textures.

https://i.sstatic.net/ik0Fl.png

A formula I discovered for identifying the required texture is:

float scale = 1.0/0.25;
vec2 idx = vec2(1.0,2.0);
vec2 newUvForTexture = (vUv+idx)*scale;
vec4 tex = texture2D(texArray[0],newUvForTexture);

The texture located at position (1.0,2.0):

https://i.sstatic.net/NdNn7.jpg

Once the appropriate UV coordinates are obtained (resulting in the image above), what should be done if the texture needs to be resized, for example by using newUvForTexture*2.0 while preserving its original offset? Can someone showcase a GLSL code snippet illustrating this?

HERE IS A WORKING EXAMPLE: https://codepen.io/miguel007/pen/VwGpjvm

The goal is to resize the texture while retaining the offset and excluding other textures from being visible:

      float scale   = 1.0/4.0;
      vec2 offset   = vec2(1.0,2.0);
      vec2 newUv    = (vUv+offset)*scale;
      gl_FragColor  = vec4(texture2D(u_tex,newUv).rgb,1.0);
      /* 
      vec2 scaledUp = newUv*.8;
      gl_FragColor  = vec4(texture2D(u_tex,scaledUp).rgb,1.0);
      or 
      vec2 scaledDown = newUv*2.0;
      gl_FragColor    = vec4(texture2D(u_tex,scaledDown).rgb,1.0);
      */

Answer №1

If you want to prevent the UVs from exceeding certain minimum and maximum values, you can utilize the `clamp()` function in GLSL:

float scale = 1.0/0.25;
vec2 idx = vec2(1.0,2.0);
vec2 newUvForTexture = (vUv+idx) * scale;

// Determine the min & max limits of the UVs
vec2 min = vec2(idx.x + 0.0, idx.y + 0.0) * scale;
vec2 max = vec2(idx.x + 1.0, idx.y + 1.0) * scale;

// Use `clamp()` to restrict the range of UVs
vec2 clampedUVs = clamp(newUvForTexture, min, max);

// Retrieve texture data with clamped UVs
vec4 tex = texture2D(texArray[0], clampedUVs);

To optimize this process further, consider multiplying by `scale` only once rather than multiple times. However, keeping it as is maintains clarity and aligns closely with your original code.

Check out a live demo implementing the above method: https://codepen.io/marquizzo/pen/zYJwGMy

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the process for clearing the cache of a crawling URL?

Currently, I am operating a crawler that gets triggered through an expressjs call. However, whenever I make the same request again, the crawler runs once more but indicates that all routes have already been completed. I even went to the extent of deleting ...

Array of arrays implemented in JavaScript

I'm working with a JavaScript array that contains string arrays: array1, array2, array3. I need to break this array down and access the individual arrays. What is the best way to achieve this? ...

Show data and messages directly on the screen

I am currently working on ajax, jquery, and javascript, but I am facing some issues. Although I can use this code to send data to the database, the data is not displayed in the view immediately after sending it; I have to reload the page to see it. Is th ...

Ways to create a URL path that is not case-sensitive in NextJs using JavaScript

I am currently working on a project using NextJs and I have encountered an issue with URL case sensitivity. The paths fetched from an API all start with a capital letter, causing inconsistency in the URLs. For instance, www.mysite.com/About. I would like t ...

Angular 2: trigger a function upon the element becoming visible on the screen

How can I efficiently trigger a function in Angular 2 when an element becomes visible on the screen while maintaining good performance? Here's the scenario: I have a loop, and I want to execute a controller function when a specific element comes into ...

Struggling to adjust the dimensions of a React Barcode to the specified width and height?

I've encountered an issue with resizing the React Barcode Image. I prefer all barcodes to have a width of 200px and a height of 100px. From what I understand, the width of the barcode will expand when the length value increases. Below is my current co ...

Is it possible to showcase multiple items in react JS based on logical operators?

How can I update the navigation bar to display different menu options based on the user's login status? When a user is logged in, the "Logout", "Add Product", and "Manage Inventory" options should be shown. If a user is not logged in, only the "Home" ...

2 mistakes: (Uncaught ReferenceError: require isn't defined) & (npm ERR! script missing: start)

Issue #1: Environment Variables I am facing a problem with my JavaScript files app.js (main) and request.js. Both files are at the same level in the root directory, just like index.html. The request.js file contains process.env.APP_KEY. I attempted to i ...

Creating customized JavaScript bundles with TypeScript - a beginner's guide

Our ASP.NET MVC application contains a significant amount of JavaScript code. To optimize the amount of unnecessary JS being loaded to the browser, we utilize the BundleConfig.cs file to create multiple bundles. On the View, we implement logic to determin ...

A guide on transforming JSON data into HTML using Rails

I'm struggling with parsing JSON on a webpage. My webpage is designed with circles, where clicking on a circle triggers a call to the controller to retrieve specific information from a database and display it as graphs and text. The issue I'm fa ...

Eliminate the commas when listing Google Places types

I am currently utilizing the Google Places API and came across these code snippets at https://developers.google.com/maps/documentation/javascript/examples/place-search-pagination. var map, placesList; function initialize() { var pyrmont = new google.ma ...

Show variable outside callback function - Ionic2

When working with ionic2, I encountered a situation where I needed to pass a variable from an asynchronous method to my template and other methods within the component file. In the `ngOnInit` method of my controller, I have the following code: ngOnInit() ...

What setting should I adjust in order to modify the color in question?

Looking to Customize Radar Chart Highlighted Line Colors https://i.sstatic.net/PqWc4.png I am currently working on a Radar Chart and I am trying to figure out which property needs to be edited in order to change the color of the highlighted lines. I have ...

Displaying the format when entering a value with react-number-format

How to Display Format Only After Full Value Inserted in react-number-format I recently implemented the react-number-format package for formatting phone numbers. import { PatternFormat } from 'react-number-format'; <PatternFormat value={v ...

Is there a way to get a Chrome extension to run automatically in the background?

I am looking to develop a custom chrome extension with a countdown timer functionality that automatically runs in the background. However, I am facing an issue where my background.js file is unable to access the popup.html file. How can I execute scripts i ...

Tips for updating the border color of a button:

Struggling to alter the border color of a button Attempting borderColor attribute proved futile: borderColor: '#FFFFFF' Anticipated result Code snippet: headerBtn: { backgroundColor: 'black', fontSize: '16px', f ...

Tips for using JSON.stringify in a secure manner

After receiving a JSON object, I convert it to a variable called embed. The console.log output is: console.log(send_me_along) {"provider_url":"https://www.site.com/","description":"Stuff, you’ll need to blah blah","title":"Person detail view & ...

"Modifying a variable within an object while iterating through a loop

I am attempting to update a variable within an object while looping through the elements. Specifically, I am targeting all parent elements with the class "parent" to use with the ScrollMagic plugin. Here is my code: var childElement = $('.child' ...

The function frustum.containsPoint in ThreeJS Camera Frustrum is consistently returning a value of true

I'm currently facing the challenge of identifying all the objects visible to the camera in order to update the position of those that are not. The main issue I am encountering is that frustum.containsPoint always returns true. Any assistance on this ...

Only the (click) event is functional in Angular, while the (blur), (focus), and (focusout) events are not functioning

I have a unique HTML element as shown below <div (hover)="onHover()" (double-click)="onDoubleClick()" (resize)="resize()" (dragend)="dragEnd()"> These 4 functions are designed to display information onHover ...