I would like to know what's the best way to use metalness using a ShaderMaterial. With other threejs materials I can add metalness as a parameter and modify it from 0 to 1 and see the results but at the moment I'm struggling to implement it in my ShaderMaterial. Clearly I'm missing something because from what I understood when metalness = 1, diffuse term is 0 and specular term is the base color. This is the highlighted code so far (recreating golden material):
var materialParameters = {
cdiff_red: 0.0,
cdiff_green: 0.0,
cdiff_blue: 0.0,
cspec_red: 1.022,
cspec_green: 0.782,
cspec_blue: 0.344,
roughness: 0.5,
}
var uniforms = {
cspec: { type: "v3", value: new THREE.Vector3() },
cdiff: { type: "v3", value: new THREE.Vector3() },
roughness: { type: "v3", value: new THREE.Vector3() },
spotLightPosition: { type: "v3", value: new THREE.Vector3() },
clight: { type: "v3", value: new THREE.Vector3() },
};
vs = document.getElementById("vertex").textContent;
fs = document.getElementById("fragment").textContent;
ourMaterial = new THREE.ShaderMaterial({ uniforms: uniforms, vertexShader: vs, fragmentShader: fs });
Then I update uniforms and do the computations in the fragment shaders. I already tried to merge uniforms from native materials but I can't get it to work, what am I missing? I'm pretty sure the metalness value of standard threejs materials refers to something I can't find
Related
I'm trying to get more than 10 results in GC Vision with Node.js.
Since I cannot pass the custom request directly to webDetection() I've tried to use annotateImage() instead:
const vision = require('#google-cloud/vision');
const client = new vision.ImageAnnotatorClient();
const webSearchRequest = {
image: {
source: {
imageUri: `gs://${bucket.name}/${filePath}`
}
},
features: [{
maxResults: 50,
type: vision.types.Feature.Type.WEB_DETECTION
}]
};
return client.annotateImage(webSearchRequest).then(webResults => {
console.log(webResults);
}
The output is Cannot read property 'Feature' of undefined
For visibility purpose I am posting my solution from the comments as an answer.
After doing some research and testing with this tool I've seen that the attribute type should be as follow: type: WEB_DETECTION instead of type: vision.types.Feature.Type.WEB_DETECTION.
I'm building a mapping app with Node.js. We have about 40,000 polygons that display on the map so I'm trying to improve performance by merging them where possible. Turf.js has a merge function that seems like the ticket. I haven't been able to get it to work though.
Here is the code where I'm trying to use turf in my controller.
var mongoose = require('mongoose');
var bodyParser = require('body-parser');
var turf = require('turf');
var fs = require('fs');
exports.show = function(req, res) {
res.render('map', {
title: 'Map'
});
};
exports.postSearch = function(req, res) {
// Bunch of query stuff goes into array below, (omitted for post)
mongoose.model('Claim').find({
$and:array
}, function(err, polygons){
// fs.writeFile('poly.txt', polygons);
var test = turf.merge(polygons);
res.json(test);
});
};
I put that fs.writeFile in there to get a sample of the geojson returned from mongodb. This is what I get:
{
properties: {
TTLTPCD: 'CL',
RNHCTRS: 389,
TNRTPCD: 'C'
},
geometry: {
coordinates: [
[Object]
],
type: 'Polygon'
},
type: 'Feature',
_id: '56d2a2061c601e547e1099ee'
}, {
properties: {
TTLTPCD: 'CS',
RNHCTRS: 261,
TNRTPCD: 'C'
},
geometry: {
coordinates: [
[Object]
],
type: 'Polygon'
},
type: 'Feature',
_id: '56d2a2071c601e547e109d37'
},
// this repeats a couple hundred times on my test query.
I get a stack trace but it doesn't make sense to me:
PROJECT_FOLDER/node_modules/turf/node_modules/turf-merge/index.js:55
var merged = clone(polygons.features[0]),
^
TypeError: Cannot read property '0' of undefined
at Object.module.exports [as merge] (/media/ng/DATA/LighthouseLabs/ClaimMaps/nodeMaps/MapEmGems/node_modules/turf/node_modules/turf-merge/index.js:55:39)
at Query.<anonymous> (/media/ng/DATA/LighthouseLabs/ClaimMaps/nodeMaps/MapEmGems/controllers/map.js:75:14)
at /media/ng/DATA/LighthouseLabs/ClaimMaps/nodeMaps/MapEmGems/node_modules/kareem/index.js:177:19
at /media/ng/DATA/LighthouseLabs/ClaimMaps/nodeMaps/MapEmGems/node_modules/kareem/index.js:109:16
at doNTCallback0 (node.js:430:9)
at process._tickCallback (node.js:359:13)
Turf seems to be looking for a features key in the geojson, but there is none. Does anyone have a solution for this?
###################### Edit after ghybs's answer
OK, ghybs sort of solved the geojson formatting issue. I changed the last bit of the controller to this:
mongoose.model('Claim').find({
$and:array
}, function(err, polygons){
polygons = {
type: "FeatureCollection",
features: [polygons] };
fs.writeFile('poly.txt', polygons);
var test = turf.merge(polygons);
fs.writeFile('test.txt', test);
res.json(test);
});
};
I put a second fs.writeFile to see what turf.merge was returning. The original geojson was not an array so I added the []'s. No more turf error. My map can't understand the output though.
Now poly.txt gives me this:
[object Object]
and test.txt contains this:
{ properties: null,
geometry: undefined,
type: 'Feature',
_id: '56d2a2061c601e547e1099ee',
__v: undefined },{ properties: null,
geometry: undefined,
type: 'Feature',
_id: '56d2a2071c601e547e109d37',
__v: undefined },
// This repeats 336 times
So I'm one step closer, I think. Any ideas? The map worked fine with the original data that was in poly.txt. I'm trying to get the same thing but merged.
The polygons object from your fs.writeFile() debug is not GeoJSON compliant. Turf expects a GeoJSON compliant FeatureCollection, which must have a features member.
See also the doc on Turf merge method, it gives you a code sample of what a GeoJSON compliant FeatureCollection should look like.
So it looks like you should simply wrap your polygons object in a FeatureCollection to make it compliant:
polygons = {
type: "FeatureCollection",
features: polygons // assuming polygons is an array
};
EDIT following the question edit
If your initial polygons really outputs "[Object]" in the geometry coordinates, rather than an array of coordinates, turf will not be able to understand your polygons geometries.
But if you say it was working before trying to merge, the issue would probably be something else.
How do you know your polygons are not an array? Are you sure doing [polygons] is the right solution?
For the next issues, please open a different question.
I use OpenLayers Heatmap and I want to refresh the KML Vector every 2 seconds. So I thought it would be possible just to delete the Layer, refresh the Layer and then add the Layer in the map again. But nothing worked so far.
Here is my script:
var vector = new ol.layer.Heatmap({
source: new ol.source.Vector({
url: 'tweets.php',
format: new ol.format.KML({
extractStyles: false
})
}),
blur: parseInt(6, 10),
radius: parseInt(4, 10)
});
var raster = new ol.layer.Tile({
source: new ol.source.Stamen({
minZoom: 3,
maxZoom: 8,
layer: 'toner'
})
});
var koordinate = 5.9;
var map = new ol.Map({
target: 'map',
controls: [] ,
interactions: ol.interaction.defaults({
dragging: false,
dragPan: false
}),
view: new ol.View({
center: ol.proj.transform([10.5 , 51.0], 'EPSG:4326', 'EPSG:3857'),
minZoom: koordinate,
maxZoom: koordinate,
zoom: koordinate
})
});
map.addLayer(raster);
map.addLayer(vector);
blur.addEventListener('input', function() {
vector.setBlur(parseInt(blur.value, 10));
});
radius.addEventListener('input', function() {
vector.setRadius(parseInt(radius.value, 10));
});
Edit: This was my best solution for the problem but i don't worked.
setInterval(function() {
vector.loaded = false;
vector.setVisibility(true);
vector.redraw({ force: true });
}, 2000);
I've also tried everything with SetInterval, but everytime it was not correct or it was wrong.
I think the ol.layer.heatmap makes it difficult to solve the problem.
ol.layer.Heatmap doesn't provide a "redraw" method.
ol.Map does offer a render method though, which you should be using. consider the Dynamic data example for more insight: http://openlayers.org/en/v3.5.0/examples/dynamic-data.html
I am using the column charts for my project. I have written a custom function that colors each bar of the chart based upon its y value. This works fine when I initialize the chart. As I hover over the chart, the color of the bar goes back to the default and my custom colors never return.
I have tries disabling on hover but that doesn't seem to work. I don't want the color to change even when hovered over the bar. Any suggestions?
You are looking for this option:
plotOptions: {
series: {
states: {
hover: {
enabled: false
}
}
}
},
Fiddle here.
EDITS
Instead of modifying the SVG directly to set your colors, do it within the api:
var max = 200;
var seriesData = $.map([107, 31, 635, 203, 2],function(datum, i){
return {
color: datum > max ? 'red' : '#2f7ed8',
y: datum
};
});
$('#container').highcharts({
chart: {
type: 'bar'
},
tooltip: {
valueSuffix: ' millions'
},
series: [{
name: 'Year 1800',
data: seriesData
}]
});
New fiddle.
You are updating color in a wrong way, use point.update() instead: http://jsfiddle.net/CaPG9/8/
$('#container').highcharts({
chart: {
type: 'bar'
},
tooltip: {
valueSuffix: ' millions'
},
series: [{
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}]
},function(chart){
var max = 200;
$.each(chart.series[0].data,function(i,data){
if(data.y > max)
data.update({
color:'red'
});
});
});
I have several records of the same type that I want to show on the screen. I thought about creating several panels that will print the data of each record. I chose this solution because data structure is too complex to be printed in a simple grid. Here is a simplified example of that structure :
{
label: 'myLabel',
{
attr1: 'value1',
attr2: 'value2'
}
startValidityDate: oneDay,
endValidityDate: anotherDay
}
I try to add dynamically nested panels in my current panel :
var myStore = new Ext.data.Store({
id: 'myStore',
restful: true,
idProperty: 'OID',
root: 'tbas',
proxy: myProxy,
reader: myReader,
autoLoad: false,
listeners: {
'load': function(data){
var records = data.getRange();
var currStore = null;
for(var i=0; i<records.length; i++) {
currStore = new Ext.Panel({
layout:'vBox',
items: [{
xtype: 'textfield',
fieldLabel: I18nManager.get('label_ttbaUI_label'),
name: 'tbaLabel',
value: records[i].data.tbaLabel
},{
xtype: 'textfield',
fieldLabel: I18nManager.get('label_ttbaUI_label'),
name: 'tbaOid',
value: records[i].data.tbaoid
}]
});
recordList.add(currStore);
console.log("------------------------------");
console.log(currStore);
}
recordList.doLayout();
}
}
});
var recordList = new Ext.Panel({
id: 'recordList',
renderTo: 'recordPart',
layout:'vBox',
title: I18nManager.get('label_ttbaUI_selected_tariffs')
});
recordList.doLayout();
In the firebug console, the UI objects seems to be ok.
My problem is that the recordList elements are not visible
I can see that they exist in the FB console, but they are not well printed on the screen.
Did I forgot something that make the elements hidden ? or bad printed ?
I'm sure that it is a CSS problem, some trouble with ext-all.css : when I remove the content of that CSS, I can see my fields
There must be something wrong in the way I wrote the code so that it causes the render problem WDYT ???