Experimental triple monitor rendering... problems

i know this is experimental, BUT i have seen other using it without issue. also maybe helpful for debugging?

ive tried using amd eyefinity at 5520x 1050 (21:9) but the image is all stretched out and long? I'm using a radeon rx5500xt, newest drivers, newest updates. it looks like my system will run it at low graphics if I can fix the stretched image. I've tried almost everything i can think of, ive seen one video of someone with a similar problem. can post all PC specs, all monitor specs. getting my G29 soon and id really enjoy playing this game with triples...

 

that image looks both stretched and squished

 

Strange right? ive tried lower resolutions in BEAMNG and still haven't had any success your thoughts?

 

Maybe its the screen calculations in Steam\steamapps\common\BeamNG.drive\ui\modules\options\options.js that is worng

This is from that file

.directive('tripleScreenCanvas', ['logger','Utils', '$timeout', function (logger, Utils, $timeout) {
return {
template: `
<canvas style="border: 1px gray solid;width:100%"></canvas>
`,
replace: true,
restrict: 'AEC',
link: function (scope, element, attrs) {
var canvas = element[0];
var ctx = canvas.getContext('2d');

var scale = (canvas.clientWidth / canvas.clientHeight);
canvas.setAttribute('width', canvas.width * scale);
canvas.setAttribute('height', canvas.height * scale);

var hfov = 0;
var aspectRatio = 1;

//var screenSize = 32; // inch
//var bezelSizes = 2;

function degToRad(deg) {
return deg * (Math.PI / 180)
}

function drawText(x, y, rot, yOffset, text, color) {
var rotInRad = degToRad(rot)
ctx.save()
ctx.translate(x, y);
ctx.rotate(rotInRad);
ctx.font = "20px monospace";
ctx.textAlign = "center";
ctx.fillStyle = color;
ctx.fillText(text, 0, -yOffset);
ctx.restore();
}

function drawArrow(x, y, x2, y2, color) {
ctx.beginPath();
ctx.moveTo(x, y)
ctx.lineTo(x2, y2)
ctx.strokeStyle = color;
ctx.stroke();
}

function drawArrowRot(x, y, len, rot, color) {
var rotInRad = degToRad(rot)
drawArrow(x, y, x + Math.cos(rotInRad) * len, y + Math.sin(rotInRad) * len, color)
}

function drawBoxRot(x, y, w, h, rot, fillStyle, strokeStyle) {
var rotInRad = degToRad(rot)
ctx.save()
ctx.translate(x, y);
ctx.rotate(rotInRad);

ctx.beginPath();
ctx.rect(- w * 0.5, - h * 0.5, w, h);
if(fillStyle) {
ctx.fillStyle = fillStyle;
ctx.fill();
}
if(strokeStyle) {
ctx.strokeStyle = strokeStyle;
ctx.stroke();
}

ctx.restore();
}

function redraw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();

var a = hfov / 3;
var color = 'black';
var screenDepth = 6;

// middle screen
var x = canvas.width * 0.5
var y = canvas.height * 0.4
drawBoxRot(x, y, 120, screenDepth, 0, '#ff6b00')
drawArrowRot(x, y, 100, 90, color)
drawText(x, y, 0, screenDepth, 'screen 2', color)
drawBoxRot(x, 50, 120, 120 / aspectRatio, 0, null, '#ff6b00')

// left screen
var x1 = x - 60 - Math.cos(degToRad(-a)) * 60
var y1 = y - Math.sin(degToRad(-a)) * 60
drawBoxRot(x1, y1, 120, screenDepth, -a, '#ff6b00')
drawArrowRot(x1, y1, 100, -a + 90, color)
drawText(x1, y1, -a, screenDepth, 'screen 1', color)
drawBoxRot(x1, 50, 120, 120 / aspectRatio, 0, null, '#ff6b00')

// right screen
var x2 = x + 60 + Math.cos(degToRad(a)) * 60
var y2 = y + Math.sin(degToRad(a)) * 60
drawBoxRot(x2, y2, 120, screenDepth, a, '#ff6b00')
drawArrowRot(x2, y2, 100, a + 90, color)
drawText(x2, y2, a, screenDepth, 'screen 3', color)
drawBoxRot(x2, 50, 120, 120 / aspectRatio, 0, null, '#ff6b00')

ctx.restore();
}

scope.$watch('$parent.options.data.values', function(values) {
//console.log('FOV changed: ', values.GraphicTripleMonitorFov)
//console.log('screen res: ', values.GraphicDisplayResolutions)
var aspectRatioStr = values.GraphicDisplayResolutions.split(' ')
aspectRatio = parseInt(aspectRatioStr[0]) / parseInt(aspectRatioStr[1])
//console.log('screen aspectRatio: ', aspectRatio)
hfov = values.GraphicTripleMonitorFov
redraw();
});
}
}
}])