I try to create some object that a user could able by mouse rotate use Three.js and webgl. It's displaying fine when a screen has a full HD resolution (1960x1080) but when a user screen had resolution roughly 1366x768 object is ugly (blurred). Most notably text on the image.
Originally image has the resolution 1024x748 and the scene has a size roughly 530x270.
Clear - https://ibb.co/0s7W2hk
Blurred - https://ibb.co/tzCkq6W (in some cases blur corruption have more influence)
I connect the model to the scene by next code
// ...
scene.add({
genotype: VOLUMETRIC_OBJECT,
phenotype: MODELLED_MESH,
data: {
model: 'assets/FBX 2013/model.FBX',
position: {
x: 0,
y: isMobile ? 0.05 : 0.375,
z: 0,
},
scale: isMobile ? {
x: 70e-3,
y: 70e-3,
z: 70e-3,
} : {
x: 75e-3,
y: 75e-3,
z: 75e-3,
},
name: 'model',
material: {
hb_03_label1Model: {
map: 'assets/mm1.jpg',
alphaMap: 'assets/mam1.jpg',
color: 0xffffff,
specular: new Color(0xffffff),
shininess: 5,
transparent: true,
opacity: 1,
needsUpdate: true,
},
body_hb_03Model: {
normalMap: 'assets/mnm2.jpg',
color: 0xaaaaaa,
specular: new Color(0xFFFFFF),
opacity: 0.35,
shininess: 100,
transparent: true,
needsUpdate: true,
normalScale: {
x: 1,
y: 1,
},
},
hb_03_leqidoModel: {
type: MATERIAL__SHADER,
map: 'assets/mm3.jpg',
thicknessMap: 'assets/mtm3.jpg',
specularMap: 'assets/msm3.jpg',
normalMap: 'assets/mnm3.jpg',
repeat: [10, 10],
color: 0xffffff,
refractionRatio: 0.985,
reflectivity: 0.15,
diffuse: new Vector3(1, 0.3, 0.3),
thicknessColor: new Vector3(0.11, 0.11, 0.11),
needsUpdate: true,
uniformsNeedUpdate: true,
},
hb_03_cappaModel: {
color: 0x00AD16,
needsUpdate: true,
},
},
},
},
(model) => {
// ...
},
)
Update 1:
In my case when I change mag and min filters to Linear, I have strong sharpness and text not readable, again.
I think, for the best result, I need to use mag filter as Linear and min filter as LinearMipMapLinearFilter with the generated by myself mipmap.
But, currently, generate custom mipmap so strong for me. I did increase anisotropy for texture, and text is displayed acceptable
Related
I have created a chart with Chart.js, and I now need to show the data in the legend differently per the two different datasets.
How do I show the first dataset 'Low/High Range Limit' in the classic rectangle/fill style and the dataset 'Patient Results' in the point style?
(Bonus: Currently, I'm showing the second dataset near-correctly. I also want to completely fill the circle with the solid 'steelblue' color, not with transparency.)
(I would provide an image but I need at least 10 reputation to post them.)
<style>
.chart-container { width: 550px }
</style>
<div class="chart-container">
<canvas id="myChart" width="2" height="1"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
<script>
var context = document.getElementById('myChart');
var myChart = new Chart(context, {
type: 'line',
data: {
labels: ['(A)', '(B)', '(C)', '(D)'],
datasets: [
{
label: 'Patient Results',
data: [40, 230, 30, 60],
borderColor: 'steelblue',
borderWidth: 2,
pointBackgroundColor: 'steelblue',
fill: false,
spanGaps: true // if true, lines will be drawn between points with no or null data. if false, points with NaN data will create a break in the line.
},
{
data: [0, 30, 20, 20], // representing the low range only
borderColor: '#222',
borderWidth: 2,
pointRadius: 0,
fill: true,
backgroundColor: '#fff'
},
{
label: 'Low/High Range Limit',
data: [60, 150, 50, 40], // representing the high range only
borderColor: '#222',
borderWidth: 2,
pointRadius: 0,
fill: true,
backgroundColor: '#c2e8f5'
}
]
},
options: {
elements: {
line: {
tension: 0 // disables bezier curves
}
},
legend: {
labels: {
boxWidth: 6,
filter: function(legendItem, chartData) {
if (legendItem.datasetIndex === 1) {
return false;
}
return true;
},
usePointStyle: true
},
position: 'right',
reverse: true // shows 'Low/High Range Limit' first
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
I want to have an animation where the nodes get colored then the edges get colored. I looked at the other questions regarding animation in cytoscape.js and tried stacking promise statements to no avail.
I'm also unclear as to what it is the queue does, setting the boolean for both the edge and node to true, false or staggered seems to have no difference on the animation as they both animate at the same time.
This is the code I have so far:
var a = cy.edges().animate({
position: { x: 100, y: 100 },
style: { lineColor: '#a79' }}, {duration: 1000},
{queue: 1}
);
var b = cy.nodes().animate({
position: { x: 100, y: 100 },
style: { backgroundColor: 'blue' }},
{duration: 1000},
{queue: 1}
);
a.animation().play().promise().then(b.animation().play());
edit
So I wrapped the animate command in a function to get the desired result
cy.on('tap', 'node', function(evt){
cy.nodes().animate(
{
position: { x: 100, y: 100 },
style: { lineColor: 'pink' }
},
{
duration: 1000,
queue: true
}
);
Although hardcoding animations is not ideal, I would still like to know how to do it with the promise commands.
It looks ok, the only thing I see is:
var a = cy.edges().animate(
{
position: { x: 100, y: 100 },
style: { lineColor: '#a79' }
},
{
duration: 1000,
queue: true
}
);
var b = cy.nodes().animate(
{
position: { x: 100, y: 100 },
style: { backgroundColor: 'blue' }
},
{
duration: 1000, // This goes together in one brace
queue: true // Use a boolean maybe
}
);
a.animation().play().promise().then(function () {
b.animation().play());
}
The documentation does exactly that, maybe this solves the problem :)
I am using jqplot for plotting piechart,bar and line chart. It is work fine in IE9>=. But it is not working in IE8. It gives me above error when I am using both piechart and bar chart. and it is showing error at piechart plugin at e.jqplot.PieRenderer'. After blocking this plugin bar chart works fine but not piecharts. Below is my code. Please suggest on this.
var optionsObj = {
title: 'Item wise stock',
animate: !$.jqplot.use_excanvas,
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: dates,
label: 'Item'
},
yaxis: {
tickOptions: { showMark: true, formatString: "%d" },
padMin: 0,
label: 'Stock',
angle: -30,
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
labelOptions: { fontSize: '11px' }
}
},
grid: {
drawGridLines: true, // wether to draw lines across the grid or not.
gridLineColor: '#cccccc', // *Color of the grid lines.
background: '#e6e6e6', // CSS color spec for background color of grid.
borderColor: '#999999', // CSS color spec for border around grid.
borderWidth: 2.0, // pixel width of border around grid.
shadow: true, // draw a shadow for grid.
shadowAngle: 45, // angle of the shadow. Clockwise from x axis.
shadowOffset: 1.5, // offset from the line of the shadow.
shadowWidth: 3, // width of the stroke for the shadow.
shadowDepth: 3, // Number of strokes to make when drawing shadow.
// Each stroke offset by shadowOffset from the last.
shadowAlpha: 0.07, // Opacity of the shadow
renderer: $.jqplot.CanvasGridRenderer, // renderer to use to draw the grid.
rendererOptions: {} // options to pass to the renderer. Note, the default
// CanvasGridRenderer takes no additional options.
},
series: [
{ label: 'Bar', renderer: $.jqplot.BarRenderer },
{ label: 'Line', renderer: $.jqplot.LineRenderer, color: '#ef8c08' },
],
legend: {
show: true,
location: 'ne'
},
seriesDefaults: {
shadow: false,
rendererOptions: {
barPadding: 0,
barMargin: 10,
barWidth: 25,
highlightMouseDown: true
}
},
highlighter: {
show: true,
sizeAdjust: 7.5,
tooltipContentEditor: function (str, seriesIndex, pointIndex, jqPlot) {
return '<table class="jqplot-highlighter"><tr><td>Item:</td><td>' + data[pointIndex][0].toString() + '</td></tr> \
<tr><td>Stock:</td><td>' + data[pointIndex][1].toString() + '</td></tr></table>'
}
}
};
var plot2 = $.jqplot(location, values, optionsObj);
Include this tag in your html page:
<script type='text/javascript' src="excanvas.js"></script>
IE8 requires excanvas library to create canvas elements because IE8 doen't support canvas elements.
You can download the js file from here: Excanvas library
I am using jqplot charting library to draw the bar chart in my application.
I have used following code to draw the horizontal bar chart.
var plot = $.jqplot('chart', [dataSlices], {
seriesDefaults: {
shadow: false,
renderer: $.jqplot.BarRenderer,
pointLabels: { show: true, location: 'e', edgeTolerance: -55 },
rendererOptions: {
barDirection: 'horizontal',
barMargin: 5,
highlightMouseOver: false,
fillToZero: true
}
},
axesDefaults: {
},
axes: {
grid: {
drawBorder: false
},
xaxis: {
pad: 0,
tickOptions: {
show: true,
mark: 'cross',
thousandsSeparator: ',',
formatString: "%d"
},
numberTicks: null,
min: null,
max: null,
showTickMarks: true
},
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: yAxisLabels,
tickOptions: {
showMark: false,
showGridline: false
}
}
},
grid: {
gridLineColor: '#ffffff', /**/
borderColor: '#509790',
background: 'rgba(0,0,0,0)',
shadowWidth: 0,
borderWidth: 0,
shadow: false
},
series: [{ color: '#f39f02' }]
});
$.jqplot.thousandsSeparator = ',';
//$.jqplot.formatString = "%'d";
gridCanvas = $($('.jqplot-grid-canvas')[0])
seriesCanvas = $($('.jqplot-series-canvas')[0])
gridCanvas.detach();
seriesCanvas.after(gridCanvas);
plot.replot({ resetAxes: true });
I am getting the chart without grid lines.
Is there any idea, how to do this?
Call the following lines after replot, you will get the expected result
gridCanvas = $($(item + ' .jqplot-grid-canvas')[0])
seriesCanvas = $($(item + ' .jqplot-series-canvas')[0])
gridCanvas.detach();
seriesCanvas.after(gridCanvas);
I tried its working fine for me,.
GridLineColor set to white (#FFFFFF) explains why you aren't wiewing vertical lines.
BorderWidth set to 0 explains why you aren't viewing borders of your plot (drawn with a size of 0px)
If you doesn't need particular color and/or size of your grid (vertical lines and border) remove the grid part of your code.
If you need particular color and/or size choose carefully your values (#FFFFFF if your background if already white - or a borderWidth of 0px) :
grid: {
gridLineColor: '#FF0000',
borderColor: '#509790',
background: 'rgba(0,0,0,0)',
shadowWidth: 0,
borderWidth: 2,
shadow: false
},
Please see working example here (I have delete yAxisLabels and add fictional data in order to draw a plot)
I would like to show 3 color zones on my graph on the background according to y axis value, as I understand, I cannot control the background color by different colors.
My idea is to draw 3 horizontal lines with canvasOverlay - that is working.
The problem is I want to place this lines behind my graph curve, now it seen on the front and it overlays my points line.
Can I change the property of z-index or the opacity?
Maybe some other ideas?
$.jqplot( 'ChartDIV', [data],
{
series: [{ showMarker: true}],
highlighter: {
sizeAdjust: 10,
show: true,
tooltipLocation: 'n',
useAxesFormatters: true
},
tickOptions: {
formatString: '%d'
},
canvasOverlay: {
show: true,
objects: [
{
horizontalLine:
{
name: 'low',
y: 1.0,
lineWidth: 100,
color: 'rgb(255, 0, 0)',
shadow: false
}
},
{
horizontalLine:
{
name: 'medium',
y: 2.0,
lineWidth: 100,
color: 'rgb(250, 250, 0)',
shadow: true
}
},
{
horizontalLine:
{
name: 'high',
y: 3.0,
lineWidth: 100,
color: 'rgb(145, 213, 67)',
shadow: false
}
},
]
},
axes: {
xaxis:
{
label: 'Dates',
renderer: $.jqplot.DateAxisRenderer,
rendererOptions: { tickRenderer: $.jqplot.CanvasAxisTickRenderer },
tickOptions: {
formatString: '%d/%m/%Y',
angle: -30,
fontFamily: 'Arial',
fontSize: '13px',
fontWeight: 'bold'
},
min: d[0] + "/" + d[1] + "/01",
tickInterval: '2 month',
labelOptions: {
fontFamily: 'Arial',
fontSize: '14pt',
fontWeight: 'bold',
textColor: '#0070A3'
}
},
yaxis:
{
label: 'Level',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
tickOptions: {
formatter: $.jqplot.tickNumberFormatter
},
rendererOptions: { tickRenderer: $.jqplot.CanvasAxisTickRenderer },
labelOptions: {
fontFamily: 'Arial',
fontSize: '14pt',
fontWeight: 'bold',
textColor: '#0070A3',
angle: -90
}
}
}
} );
I think that your problem might be the order in which you do your painting. I think that you first create the graph and then in it you draw this line, right?
Thus to sort out this you might try one of the hooks the jqPlot chart provides.
To see how you could use a hook, please see my other answer (BTW to my own question:) where I used a postDrawHooks hook to change format of labels once the graph is drawn. In your case you could use preDrawHooks or maybe more appropriate would be to use preDrawSeriesHooks, since I am not sure if a canvas is ready to use when function passed in preDrawHooks is called.
Remember that, according to the documentation, the preDrawSeriesHooks is called each time before a series is drawn, thus in your case you would need it to work just once.
EDIT
In this case the answer is simple, well you could do both, which is shown in my jsfiddle, available here.
You need this piece of code to send overlay canvas to back, which you should place before the code painting your graph:
$.jqplot.postDrawHooks.push(function(){
$(".jqplot-overlayCanvas-canvas").css('z-index', '0');//send overlay canvas to back
$(".jqplot-series-canvas").css('z-index', '1');//send series canvas to front
});
But when it comes to opacity you could apply it to whichever line you like (also shown in my code), using of the rgba() method, for series it is done this way:
seriesColors:['rgba(100, 150, 100, 0.75)']
for the lines on canvas, you do it like this:
color: 'rgba(145, 213, 67, 0.25)'
EDIT2
The most important think was forgotten therefore with the previous code the highlighter was not working. Simply the event canvas which is responsible for event catching and propagation was hidden underneath our canvas. It was corrected in the current version of code, by setting of an appropriate z-index for it. The complete method would look like:
$.jqplot.postDrawHooks.push(function() {
$(".jqplot-overlayCanvas-canvas").css('z-index', '0'); //send overlay canvas to back
$(".jqplot-series-canvas").css('z-index', '1'); //send series canvas to front
$(".jqplot-highlighter-tooltip").css('z-index', '2'); //make sure the tooltip is over the series
$(".jqplot-event-canvas").css('z-index', '5'); //must be on the very top since it is responsible for event catching and propagation
});
EDIT3:
A much nicer solution where we do not need to worry about setting the z-index.
$.jqplot.postDrawHooks.push(function() {
var overlayCanvas = $($('.jqplot-overlayCanvas-canvas')[0])
var seriesCanvas = $($('.jqplot-series-canvas')[0])
seriesCanvas.detach();
overlayCanvas.after(seriesCanvas);
});
It is presented here. This solution is inspired by the answer provided by #Mark to a similar sort of problem.
A much better solution is to use Canvas rectangle object without any hacking
http://services.mbi.ucla.edu/jqplot/examples/draw-rectangles.html
$(document).ready(function(){
var plot1 = $.jqplot ('chart1', [[30,-10,90,20,50,130,80,120,50]], {
canvasOverlay: {
show: true,
objects: [
{ rectangle: { ymax: 0, xminOffset: "0px", xmaxOffset: "0px", yminOffset: "0px", ymaxOffset: "0px",
color: "rgba(0, 0, 200, 0.3)", showTooltip: true, tooltipFormatString: "Too Cold" } },
{ rectangle: { ymin: 100, xminOffset: "0px", xmaxOffset: "0px", yminOffset: "0px", ymaxOffset: "0px",
color: "rgba(200, 0, 0, 0.3)", showTooltip: true, tooltipFormatString: "Too Warm" } }
]
}
});
});