先上例子

<!doctype html>

<html>

<head>

<meta charset="utf-8" />

<title>Basic Draw Blend</title>

<script id="shader-vs" type="x-shader/x-vertex">

attribute vec3 aPos;

void main(void){

    gl_Position = vec4(aPos, 1);

}

</script>

<script id="shader-fs" type="x-shader/x-fragment">

void main(void) {

    gl_FragColor = vec4(1.0, 1.0, 1.0, 0.5);

}

</script>

</head>

<body>

<canvas id="canvas" width="400" height="400" ></canvas>

<script>

var gl;

var canvas = document.getElementById('canvas');

var glProgram = null;

function getGLContext() {

    var glContextNames = ['webgl', 'experimental-webgl'];

    for (var i = 0; i < glContextNames.length; i ++) {

        try {

            gl = canvas.getContext(glContextNames[i]);

        } catch (e) {}

        if (gl) {

            gl.clearColor(74 / 255, 115 / 255, 94 / 255, 1.0);

            gl.clear(gl.COLOR_BUFFER_BIT);

            gl.viewport(0, 0, canvas.width, canvas.height);

            gl.enable(gl.BLEND);

            break;

        }

    }

}

function initShaders() {

    //get shader source

    var vs_source = document.getElementById('shader-vs').innerHTML,

        fs_source = document.getElementById('shader-fs').innerHTML;

    //compile shaders

    vertexShader = makeShader(vs_source, gl.VERTEX_SHADER);

    fragmentShader = makeShader(fs_source, gl.FRAGMENT_SHADER);

    //create program

    glProgram = gl.createProgram();

    //attach and link shaders to the program

    gl.attachShader(glProgram, vertexShader);

    gl.attachShader(glProgram, fragmentShader);

    gl.linkProgram(glProgram);

    if (!gl.getProgramParameter(glProgram, gl.LINK_STATUS)) {

        alert("Unable to initialize the shader program.");

    }

    //use program

    gl.useProgram(glProgram);

}

function makeShader(src, type) {

    //compile the vertex shader

    var shader = gl.createShader(type);

    gl.shaderSource(shader, src);

    gl.compileShader(shader);

    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {

        alert("Error compiling shader: " + gl.getShaderInfoLog(shader));

    }

    return shader;

}

function setupBuffer(){

    // vertex representing the triangle

    var vertex = [

        -.5, -.3,  0,

        .5,  -.3,  0,

        .5,   .3,  0,

        -.5, -.3,  0,

        .5,   .3,  0,

        -.5,   .3,  0

    ];

    var vertexBuffer = gl.createBuffer();

    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertex), gl.STATIC_DRAW);

    var aVertexPosition = gl.getAttribLocation(glProgram, 'aPos');

    // point the attribute to the currently bound vertex buffer.

    gl.vertexAttribPointer(aVertexPosition, 3, gl.FLOAT, false, 0, 0);

    gl.enableVertexAttribArray(aVertexPosition);

}

function draw(){

    gl.drawArrays(gl.TRIANGLES, 0, 6);

}

window.onload = function(){

    getGLContext();

    initShaders();

    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

    // gl.blendFunc(gl.ONE_MINUS_SRC_COLOR, gl.DST_ALPHA);

    setupBuffer();

    draw();

}

</script>

</body>

</html>

webgl 混合的更多相关文章

  1. 在 html 中用加色法混合颜色

    概要 本文通过解决一个假想的问题介绍了 css screen 混合模式,并介绍了如何用 svg 滤镜.canvas 2d.canvas webgl 实现相同的效果. 问题 下面的图片演示三种颜色光叠加 ...

  2. webgl自学笔记——深度监测与混合

    这一章中关于webgl中颜色的使用我们将深入研究.我们将从研究颜色在webgl和essl中如何被组装和获取开始.然后我们讨论在物体.光照和场景中颜色的使用.这之后我们将看到当一个物体在另一个物体前面是 ...

  3. WebGL学习笔记（十一）：混合和透明

    到目前为止我们绘制了不少模型,用到了不少颜色,颜色中有四个分量(RGBA),其中的A分量表示透明度,这个分量目前为止我们还没有真正的用到: A分量,表示的是当前的透明度,如果设定为 0.5 就会半透明 ...

  4. 分享我收集的引擎、图形学、WebGL方面的电子资料

    本文分享我这一年以来收集的我认为比较经典的电子资料,希望能对大家有所帮助! 本文会不断更新! 目录 WebGL Insights OpenGL Insights Game Programming Pa ...

  5. WebGL 高级技术

    1.如何实现雾化 实现雾化的方式由多种,这里使用最简单的一种:线性雾化(linear fog).在线性雾化中,某一点的雾化程度取决于它与视点之间的距离,距离越远雾化程度越高.线性雾化有起点和终点,起点 ...

  6. WebGL学习(2) - 3D场景

    原文地址:WebGL学习(2) - 3D场景 经过前面WebGL学习(1) - 三角形的学习,我们已经掌握了webGL的基础知识,也已经能够画出最基本的图形,比如点,线,三角形,矩形等.有了2D绘图的 ...

  7. WebGL three.js学习笔记 使用粒子系统模拟时空隧道（虫洞）

    WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...

  8. WebGL 利用FBO完成立方体贴图。

    这篇主要记录WebGL的一些基本要点,顺便也学习下如何使用FBO与环境贴图.先看下效果图(需要支持WebGL,Chrome,火狐,IE11). 主要实现过程如下,先用FBO输出当前环境在立方体纹理中, ...

  9. WebGL 进入三维世界

    1.观察目标点和上方向 为了确定观察者的状态,你需要获取两项信息:视点,即观察者的位置:观察目标点(look-at point),即被观察目标所在的点,它可以用来确定视线.此外,因为我们需要把观察到的 ...

随机推荐

  1. scrapy（一）scrapy 安装问题

    一.安装scrapy pip install scrapy 二.出现Microsoft Visual C++ 14.0相关问题 注:若出现以下安装错误 building 'twisted.test.r ...

  2. $\mathcal{Friends' \ \ Links}$友情链接

    \(\mathcal{JuLao \ \& \ \ Dalao}\) \(\_rqy\) \(\_stdcall\) 并(吊)肩(锤)奋(死)斗(我)的\(Oier\) 王旭 苑骏康 张梓淳 ...

  3. jqgrid 设置隔行换色

    有时,为美观效应,需要设置jqgrid隔行换色.jqgrid提供altRows属性来配置 启动隔行换色:altRows: true,//隔行换色 $("#filterGrid"). ...

  4. ASP.NET Core 3.0 实战：构建多版本 API 接口

    第一次在博客写分享,请多多捧场,如有歧义请多多包含! 因为业务需求发展需要,所以API接口的变更升级是必不可少的事情,而原有的接口是不可能马上停止使用的.例如:Login接口为例,1.0版本之返回用户 ...

  5. Android应用安全之脆弱的加密

    程序员希望通过加密来提升程序的安全性性,但却缺乏专业的密码学背景知识,使得应用对数据的保护非常薄弱.本文将介绍可能出现在Android应用中的一些脆弱的加密方式,以及对应的攻击方法. 造成脆弱加密的主 ...

  6. 20155331《网络对抗》 Exp9 Web安全基础

    20155331<网络对抗> Exp9 Web安全基础 实验过程 WebGoat 在终端中输入java -jar webgoat-container-7.0.1-war-exec.jar开 ...

  7. 20155339 Exp5 MSF基础应用

    20155339 Exp5 MSF基础应用 基础问题回答 用自己的话解释什么是exploit,payload,encode. 答: exploit是通过自己选择的漏洞和载荷进行攻击的一个过程. pay ...

  8. Jmeter 安装后无法启动问题

    问题:按照教程java环境安装完成,也下载了 Jmeter  安装包,但是在启动的时候 dos窗口就一直提示下面的错误信息 ‘findstr' 不是内部或外部命令,也不是可运行的程序或批处理文件.  ...

  9. WPF的Style的TargetType不同写法的异同

    原文:WPF的Style的TargetType不同写法的异同 <Style TargetType="TextBlock"> <Setter Property=&q ...

  10. controlfile 备份到trace文件例子

    主要是为了学习oracle的克隆.参考: http://www.dba-oracle.com/oracle_tips_db_copy.htm 执行: SQL>alter database bac ...