Question

我正在尝试将图像放在多维数据集每侧显示的背景颜色之上。它没有显示，也没有在JavaScript控制台上显示错误。这里的代码显示了替换jsFiddle JavaScript窗格中显示的generateTexture2（）函数的内容。

function generateTexture2() {

        // draw a circle in the center of the canvas
        var size = 256;

        // create canvas
        var canvas = document.createElement( 'canvas' );
        canvas.width = size;
        canvas.height = size;

        // get context
        var context = canvas.getContext( '2d' );

        var imageObj = new Image();
        imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
        imageObj.onload = function() {
          context.drawImage(imageObj, 0, 0);
        };


        return canvas;

}

http://jsfiddle.net/XGWGn/118/

Answer 1

GLSL中的mix()函数定义为两个值之间的线性插值，基于某个因子。即。

value = mix( c1, c2, f )等于value = c1 * (1 - f) + c2 * f;

实际上令人困惑的是factor有时会与文档中的alpha值相关联。

因此，在片段着色器中，如果更改factor值，您将看到所需的效果。

factor = 0.9999; // should see the second texture
gl_FragColor = vec4( mix( tColor.rgb, tColor2.rgb, factor ), 1.0 ) * dotProduct;

或factor = 0.0001 //应该看到第一个纹理

如果你使用factor = 0.5;，你会看到两个纹理的混合。

（不知道为什么使用factor = 0或factor = 1不起作用）

更新了小提琴：http://jsfiddle.net/nv3680x7/1/

尝试使用three.js

1 个答案: