Transparency, progress bar?

  • I am just experimenting with OpenJSCAD again after some time away from it. My preferred options are to create a jscad file, and an html file which points to it (using the viewer with options), and view the resulting html file. On my current Windows 10 system, Firefox is a better browser than Chrome. Anyway, I have two questions:

    1. Is it possible to create objects which are partly transparent? Or is that browser (and renderer) dependent? And if so, how? There' a tantalizing reference to transparency in the documentation - in the color section - but no saying how to implement alpha transparency in an object.
    2. Progress meter/bar in the viewer? Sometimes a figure will take a while to render and load; other times it won't render at all because of an error in the jscad file (one not caught by the interpreter). Here some sort of progress bar would be very useful - is there a way of adding one to the viewer?

    That's it for the moment - thank you very much!


  • I guess my other question about a progress bar in the viewer is either not possible, or too fiddly to be practicable?

    This hasn't been requested before but some kind of progress indication should be possible.

    Can you create a new issue for this?

  • Thank you both about the transparency information: adding an alpha parameter to RGB seems like a simple and effective approach. Me being lazy though, I usually use named colours:


    I guess my other question about a progress bar in the viewer is either not possible, or too fiddly to be practicable?

    Thanks again!

  • @Alasdair-McAndrew nice idea about the HTML files.

    There are examples which show 'transparent' examples. Here's the V1 example.

    // title      : Transparency
    // author     : Rene K. Mueller
    // license    : MIT License
    // description: showing transparent objects
    // file       : transparency.jscad
    function main () {
      var o = [];
      for (var i = 7; i >= 0; i--) { // reverse order for seeing through all cylinders (see
        // hsl to rgb, creating rainbow [r,g,b]
          cylinder({r: 3, h: 20}).setColor(
            hsl2rgb(i / 8, 1, 0.5).concat(1 / 8 + i / 8) // and add to alpha to make it [r,g,b,a]
          ).translate([(i - 3) * 7.5, 0, 0])
      o.push(color('red', cube(5)).translate([-4, -10, 0]));
      o.push(color('red', 0.5, cube(5)).translate([4, -10, 0]));
      return o;

  • colorize function accepts an array as parameter containing RGBA values, each from 0 to 1, A is for alpha transparency.
    taken from the source :

    • Assign the given color to the given objects.
    • Note: The color should only be assigned after performing all operations.
    • @param {Array} color - RGBA color values, where each value is between 0 and 1.0
    • let redSphere = colorize([1,0,0], sphere()) // red
    • let greenCircle = colorize([0,1,0,0.8], circle()) // green transparent

Log in to reply