Create opacity map

Generate opacity texture from transparent image

by Milan Gladiš

HTML

<img id="defaultImage" src=""><br>
<img id="image" src=""><br>
<input type="file" id="imageLoader" name="imageLoader"/><br>
<canvas id="imageCanvas" style="display: none"></canvas>


<script type='module' src='https://www.vectary.com/viewer/v1/scripts/vctr-viewer.js'></script>
<vctr-viewer id="test" model="71430e5e-215b-42aa-b53b-52640a31091f" turntable="0" gesturehandling="superior" exposure="2" enableapi="1" showinteractionprompt="0" zoom="0" env="none" panY="0" panX="0" rotateX="0" rotateY="0" envMode="prod"></vctr-viewer>
<script type="module">
	import { VctrApi } from "https://www.vectary.com/viewer-api/v1/api.js";

  let vctrApi;
  async function run() {
      console.log("Example script running..");

      function errHandler(err) {
          console.log("API error", err);
      }

      async function onReady() {
          console.log("API ready..");

          let globalRotX = 0;
          let globalRotY = 0;

          const rangeTune = -0.5; // used to finetune rotation range

          document.addEventListener("mousemove", async e => {
              const normX = e.clientX / window.innerWidth;
              const normY = e.clientY / window.innerHeight;

              const rotX = (rangeTune * (normX - 0.5));
              const rotY = (rangeTune * (normY - 0.5));

              vctrApi.rotateView([rotX - globalRotX, rotY - globalRotY]);

              globalRotX = rotX;
              globalRotY = rotY;
          });
          
          
          /* Replate Texture */
          var imageLoader = document.getElementById('imageLoader');
          imageLoader.addEventListener('change', (e) => {          
          
            var reader = new FileReader();
            reader.onload = function(event){
                var img = new Image();
                img.onload = function(){
            
                    canvas.width = this.naturalWidth;
                    canvas.height = this.naturalHeight;
                    ctx.drawImage(img,0,0,...

CSS

img {
  display: none;
}
body {
  background-color: #000;
}

JavaScript

var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);
    
var canvas = document.getElementById('imageCanvas');
var ctx = canvas.getContext('2d');


function handleImage(e){
    var reader = new FileReader();
    reader.onload = function(event){
        var img = new Image();
        img.onload = function(){
            
            canvas.width = this.naturalWidth;
            canvas.height = this.naturalHeight;
            ctx.drawImage(img,0,0, this.naturalWidth, this.naturalHeight);
            document.getElementById("defaultImage").src = canvas.toDataURL("image/png");
            
            var imageData = ctx.getImageData(0,0,this.width,  this.height);
            var data = imageData.data;
          
             for (var i = 0; i < data.length; i += 4) {
                data[i] = data[i+3];
                data[i+1] = data[i+3];
                data[i+2] = data[i+3];
                data[i+3] = 255;
            }
            ctx.putImageData(imageData, 0, 0);
            document.getElementById("image").src = canvas.toDataURL("image/png");
        }
        img.src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]);     
}