Добавление режима смешивания цветов-уклонений / разделений в fabric.js - PullRequest
Новая
       37

Добавление режима смешивания цветов-уклонений / разделений в fabric.js

0 голосов
/ 26 сентября 2018

Попытка создать новый режим смешивания для color-dodge (или divide оба очень похожи.)

текущий список режимов смешивания для webgl: 

fragmentSource: {
  multiply: 'gl_FragColor.rgb *= uColor.rgb;\n',
  screen: 'gl_FragColor.rgb = 1.0 - (1.0 - gl_FragColor.rgb) * (1.0 - uColor.rgb);\n',
  add: 'gl_FragColor.rgb += uColor.rgb;\n',
  diff: 'gl_FragColor.rgb = abs(gl_FragColor.rgb - uColor.rgb);\n',
  subtract: 'gl_FragColor.rgb -= uColor.rgb;\n',
  lighten: 'gl_FragColor.rgb = max(gl_FragColor.rgb, uColor.rgb);\n',
  darken: 'gl_FragColor.rgb = min(gl_FragColor.rgb, uColor.rgb);\n',
  exclusion: 'gl_FragColor.rgb += uColor.rgb - 2.0 * (uColor.rgb * gl_FragColor.rgb);\n',
  overlay: 'if (uColor.r < 0.5) {\n' +
      'gl_FragColor.r *= 2.0 * uColor.r;\n' +
    '} else {\n' +
      'gl_FragColor.r = 1.0 - 2.0 * (1.0 - gl_FragColor.r) * (1.0 - uColor.r);\n' +
    '}\n' +
    'if (uColor.g < 0.5) {\n' +
      'gl_FragColor.g *= 2.0 * uColor.g;\n' +
    '} else {\n' +
      'gl_FragColor.g = 1.0 - 2.0 * (1.0 - gl_FragColor.g) * (1.0 - uColor.g);\n' +
    '}\n' +
    'if (uColor.b < 0.5) {\n' +
      'gl_FragColor.b *= 2.0 * uColor.b;\n' +
    '} else {\n' +
      'gl_FragColor.b = 1.0 - 2.0 * (1.0 - gl_FragColor.b) * (1.0 - uColor.b);\n' +
    '}\n',
  tint: 'gl_FragColor.rgb *= (1.0 - uColor.a);\n' +
    'gl_FragColor.rgb += uColor.rgb;\n',
},

в соответствиик ресурсам, которые я прочитал ( 1 , 2 , 3 ), для color-dodge математика должна быть на канал и должна быть min(1.0, baseColor / (1 - blendColor))

Я пытался добавить параметр для 

divide: 'gl_FragColor.r = min(1.0, gl_FragColor.r / (1 - uColor.r));\n' +
        'gl_FragColor.g = min(1.0, gl_FragColor.g / (1 - uColor.g));\n' +
        'gl_FragColor.b = min(1.0, gl_FragColor.b / (1 - uColor.b));\n',

, но в результате изображение всегда имеет другой оттенок одного и того же синего, независимо от того, какой цвет передается для смешивания

вот как я применяю фильтр 

var fabricImg = new fabric.Image(pageBackgroundImg), // make a fabric.Image object out of the HTMLImageElement
    blendedCanvas = new fabric.StaticCanvas(null, {
        width: fabricImg.getScaledWidth(),
        height: fabricImg.getScaledHeight(),
        renderOnAddRemove: false
    }),
    pageBackgroundPattern;

// add the color filter to the image
fabricImg.filters.push(
    new fabric.Image.filters.BlendColor({
        color: '#' + color,
        mode: 'divide'
    })
);
fabricImg.applyFilters();
// add the image to the canvas
blendedCanvas.add(fabricImg);

blendedCanvas.renderAll();

1 Ответ

0 голосов
/ 28 сентября 2018

Итак, я добавил фрагмент, чтобы мы могли лучше понять.Фильтр, который вы добавили, делает что-то, если это то, что должно произойти с разделением / коллажем фотошопа, мы можем понять только сравнение.Ваш код правильный и действительно работает

Прокрутите вниз, чтобы сравнить исходное изображение с отфильтрованным 

function start() {
  var canvas = new fabric.Canvas('c');
  var image = document.getElementById('img');
  var fabricImg = new fabric.Image(image); 

  fabric.Image.filters.BlendColor.prototype.fragmentSource.divide =
  'gl_FragColor.r = min(1.0, gl_FragColor.r / (1.0 - uColor.r));\n' +
          'gl_FragColor.g = min(1.0, gl_FragColor.g / (1.0 - uColor.g));\n' +
          'gl_FragColor.b = min(1.0, gl_FragColor.b / (1.0 - uColor.b));\n';
  fabricImg.filters.push(
      new fabric.Image.filters.BlendColor({
          color: '#0000ff',
          mode: 'divide'
      })
  );
  fabricImg.applyFilters();
  canvas.add(fabricImg);
  canvas.requestRenderAll();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.6/fabric.min.js"></script>
<canvas id="c" width=500 height=400 ></canvas>
<img crossOrigin="anonymous" onload="start()" src="https://raw.githubusercontent.com/fabricjs/fabricjs.com/gh-pages/assets/dragon2.jpg" id="img" />
...