three.js - Three.Js は webgl で線形グラデーション テクスチャを描画します

Question

キャンバス レンダラーで、線形グラデーションを描画する関数を使用しています。これを webgl レンダラーでも動作させたいのですが、透明度が妨げられます。コードは以下にあり、ここに私が何を意味するかを示すフィドルへのリンクがあります。

function generateTexture() {

var size = 512;

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

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

// draw gradient
context.rect( 0, 0, size, size );
var gradient = context.createLinearGradient( 0, 0, size, size );
gradient.addColorStop(0, '#99ddff'); // light blue 
gradient.addColorStop(1, 'transparent');
context.fillStyle = gradient;
context.fill();

return canvas;

}