Creating a hexagonal grid pattern with the use of texture

Question

Creating a hexagonal grid pattern with the use of texture

I have conducted several experiments in the past to determine the most effective way to create large-scale hexagon grids.

I attempted drawing the hexagons using THREE.Line and THREE.LineSegments. While this method was successful for small grids, the performance took a significant hit when trying to render grids with more than 1000 cells.

As a solution, I came up with the idea of applying a texture (which contains a hexagon grid pattern) to a simple plane. By utilizing the Texture's repeat() function, I was able to specify how many repeats would be performed vertically and horizontally.

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

The overall performance improved drastically; however, I observed that the texture only aligned perfectly with the grid cells around the center of the plane.

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

The dots visible in the grid above represent THREE.Points, which are used to display all corners of each hexagon. This aids me in verifying if the texture matches the grid cells accurately or not.

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

Upon further inspection, I noticed that as I moved away from the center, the offset between the actual hexagon and its corresponding representation in the texture grew larger.

I believe there could be a more sophisticated approach to pre-calculate the size in order to eliminate any discrepancies between these two grids.

This serves as an example of how the grid appears and how it is generated...

window.onload = function() {
  var renderer, camera, scene, controls, all_loaded = false, controls, tiles = {};

  var imgDataURI = "data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAGgAAABaCAYAAABUrhMHAAAFhklEQVR4Xu2dT2gc...

<script src="https://ajax.googleapis.com/ajax/libs/threejs/r76/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js"></script>

javascript three.js hexagonal-tiles

Answer 1

Answer №1

Roundoff errors are the root cause of the issue you're encountering. Typically, the code that determines the placement of a hexagon does so based on a starting reference point. You can use the code from Calculate 6 vertices of randomely generated hexagon to see how the calculation is done and I can show you the console output as well.

Since this calculation happens dynamically, rounding errors occur, resulting in the browser having to instruct where to render it. The actual drawing of lines is then handed off to the graphics card which ultimately decides which pixel(s) will be used to draw the lines.

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

// Draw the original hexagon
ctx.beginPath();
ctx.moveTo(0,0);
...
...
etc...

body{ background-color: ivy; padding:10px; }
canvas{border:1px solid red;}

<h4>Function to draw hexagon with specified radius and left-midpoint.</h4>
<canvas id="canvas" width=300 height=300></canvas>

Sometimes, the hexagons may align perfectly with a full pixel from the texture image, and other times they may not due to the shifting caused by rounding. To address this issue in three.js, ensure that the hexagons you draw match up precisely with the coordinate points on your texture map. This requires creating an offset map for all points on the texture, finding the nearest texture map hexagon, and adjusting accordingly.

Pseudo code:

 center = hexagon.pos();
 ...
 etc...

Answer 2

Roundoff errors are the root cause of the issue you're encountering. Typically, the code that determines the placement of a hexagon does so based on a starting reference point. You can use the code from Calculate 6 vertices of randomely generated hexagon to see how the calculation is done and I can show you the console output as well.

Since this calculation happens dynamically, rounding errors occur, resulting in the browser having to instruct where to render it. The actual drawing of lines is then handed off to the graphics card which ultimately decides which pixel(s) will be used to draw the lines.

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

// Draw the original hexagon
ctx.beginPath();
ctx.moveTo(0,0);
...
...
etc...

body{ background-color: ivy; padding:10px; }
canvas{border:1px solid red;}

<h4>Function to draw hexagon with specified radius and left-midpoint.</h4>
<canvas id="canvas" width=300 height=300></canvas>

Sometimes, the hexagons may align perfectly with a full pixel from the texture image, and other times they may not due to the shifting caused by rounding. To address this issue in three.js, ensure that the hexagons you draw match up precisely with the coordinate points on your texture map. This requires creating an offset map for all points on the texture, finding the nearest texture map hexagon, and adjusting accordingly.

Pseudo code:

 center = hexagon.pos();
 ...
 etc...

Creating a hexagonal grid pattern with the use of texture

Answer №1

Similar questions

Customizing the label styles within MUI's Chip component

Is it possible to create Firebase real-time database triggers in files other than index.js?

Problematic redirect following jQuery AJAX request

Map on leaflet with popup next to key

ng-if is executed prior to the specified time

"Standard" approach for a Date instance

Creating a customized component using unique styles in Material UI version 1

Error: The function clickHandler has been referenced before it was declared or it has already been declared

Retrieve TypeScript object after successful login with Firebase

Verify if a checkbox is selected upon loading the page

Retrieving the identifier from a value within a Symfony controller

Exploring object-level "this" behavior in jQuery

Mapping an object in ReactJS: The ultimate guide

Unable to initiate the server in a new window due to the absence of a specified terminal application

In Javascript, when trying to call Firebase database child(), it may sometimes result in the return value being "

Can Node.js endpoints effectively handle the garbage collection of new class instances?

Whenever I change the value of a textbox using plain JavaScript, the text becomes hidden from view

VueJS - repeating input fields for file uploads

Creating the correct JSON structureHere is how you can format JSON

I need help with a process to extract information from a database and convert it into an object specifically for my situation