| /* |
| title: Voxelize image |
| category: bar3D |
| titleCN: Voxelize image |
| */ |
| |
| var canvas = document.createElement('canvas'); |
| var ctx = canvas.getContext('2d'); |
| |
| var imgData; |
| var currentImg; |
| |
| // Configurations |
| var config = { |
| scale: 0.3, |
| roughness: 0, |
| metalness: 1, |
| projection: 'orthographic', |
| depthOfField: 4, |
| lockY: false, |
| move: true, |
| sameColor: false, |
| color: '#777', |
| colorContrast: 1.2, |
| lightIntensity: 1, |
| lightColor: '#fff', |
| lightRotate: 30, |
| lightPitch: 40, |
| AO: 1.5, |
| showEnvironment: false, |
| |
| barNumber: 80, |
| barBevel: 0.18, |
| barSize: 1.2 |
| }; |
| |
| option = { |
| tooltip: {}, |
| backgroundColor: '#000', |
| xAxis3D: { |
| type: 'value' |
| }, |
| yAxis3D: { |
| type: 'value' |
| }, |
| zAxis3D: { |
| type: 'value', |
| min: 0, |
| max: 100 |
| }, |
| grid3D: { |
| show: false, |
| viewControl: { |
| projection: 'perspective', |
| alpha: 45, |
| beta: -45, |
| panSensitivity: config.move ? 1 : 0, |
| rotateSensitivity: config.lockY ? [1, 0] : 1, |
| damping: 0.9, |
| distance: 60 |
| }, |
| postEffect: { |
| enable: true, |
| bloom: { |
| intensity: 0.2 |
| }, |
| screenSpaceAmbientOcclusion: { |
| enable: true, |
| intensity: 1.5, |
| radius: 5, |
| quality: 'high' |
| }, |
| screenSpaceReflection: { |
| enable: true |
| }, |
| depthOfField: { |
| enable: true, |
| blurRadius: config.depthOfField, |
| fstop: 10, |
| focalDistance: 55 |
| } |
| }, |
| boxDepth: 100, |
| boxHeight: 20, |
| environment: 'none', |
| light: { |
| main: { |
| shadow: true, |
| intensity: 2 |
| }, |
| ambientCubemap: { |
| texture: ROOT_PATH + '/data-gl/asset/pisa.hdr', |
| exposure: 2, |
| diffuseIntensity: 0.2, |
| specularIntensity: 1.5 |
| } |
| } |
| } |
| }; |
| |
| function updateData(pixelData, width, height) { |
| console.time('update'); |
| var data = new Float32Array(pixelData.length / 4 * 3); |
| var off = 0; |
| for (var i = 0; i < pixelData.length / 4; i++) { |
| var r = pixelData[i * 4]; |
| var g = pixelData[i * 4 + 1]; |
| var b = pixelData[i * 4 + 2]; |
| |
| var lum = 0.2125 * r + 0.7154 * g + 0.0721 * b; |
| lum = (lum - 125) * config.scale + 50; |
| data[off++] = i % width; |
| data[off++] = height - Math.floor(i / width); |
| data[off++] = lum; |
| }; |
| |
| myChart.setOption({ |
| grid3D: { |
| boxWidth: 100 / height * width |
| }, |
| series: [{ |
| animation: false, |
| type: 'bar3D', |
| shading: 'realistic', |
| realisticMaterial: { |
| roughness: config.roughness, |
| metalness: config.metalness |
| }, |
| barSize: config.barSize, |
| bevelSize: config.barBevel, |
| silent: true, |
| dimensions: ['x', 'y', 'z'], |
| itemStyle: { |
| color: config.sameColor ? config.color : function (params) { |
| var i = params.dataIndex; |
| var r = pixelData[i * 4] / 255; |
| var g = pixelData[i * 4 + 1] / 255; |
| var b = pixelData[i * 4 + 2] / 255; |
| var lum = 0.2125 * r + 0.7154 * g + 0.0721 * b; |
| r *= lum * config.colorContrast; |
| g *= lum * config.colorContrast; |
| b *= lum * config.colorContrast; |
| return [r, g, b, 1]; |
| } |
| }, |
| data: data |
| }] |
| }); |
| |
| console.timeEnd('update'); |
| } |
| |
| function loadImage(img) { |
| var height = (canvas.height = Math.min(config.barNumber, img.height)); |
| var aspect = img.width / img.height; |
| var width = (canvas.width = Math.round(height * aspect)); |
| |
| ctx.drawImage(img, 0, 0, width, height); |
| |
| imgData = ctx.getImageData(0, 0, width, height); |
| |
| updateData(imgData.data, width, height); |
| } |
| |
| // Default |
| var img = new Image(); |
| img.onload = function() { |
| loadImage(img); |
| currentImg = img; |
| }; |
| img.src = ROOT_PATH + '/data-gl/asset/bitcoin.png'; |