先上例子

<!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. OpenCV——膨胀与腐蚀

  2. PAT B1048 数字加密 （20 分）

    本题要求实现一种数字加密方法.首先固定一个加密用正整数 A,对任一正整数 B,将其每 1 位数字与 A 的对应位置上的数字进行以下运算:对奇数位,对应位的数字相加后对 13 取余——这里用 J 代表 ...

  3. JAVA框架 Spring AOP注解

    一.准备工作: 1)导入jar包: 4个jar包. 2)约束:(spring需要所有的约束)有IOC约束和AOP 还有事务(tx)以及注解注入的约束(context). <?xml versio ...

  4. 运放参数的详细解释和分析-part3，输入失调电压Vos及温漂

    运放参数的详细解释和分析-part3,输入失调电压Vos及温漂 在运放的应用中,不可避免的会碰到运放的输入失调电压Vos问题,尤其对直流信号进行放大时,由于输入失调电压Vos的存在,放大电路的输出端总 ...

  5. python 字典,元组,对象,数组取值方法

    def create(self,cr,uid,vals,context=None): if context is None: context ={} if vals.get('name','/')== ...

  6. Linux下Maven+SVN自动打包脚本

        公司的开发环境每次部署项目都很麻烦,需要手动打包并上传上去.这个太麻烦了,所以就准备搞个自动打包的脚本.脚本自动从svn代码库里面更新最新的代码下来,然后maven打包,最后把war包丢到to ...

  7. 【php增删改查实例】 第三节 - mysql 建表

    这一节,来给数据库中添加一些测试数据. 登陆mysql: 找到%xampp%\mysql\bin 目录, 在此处打开命令窗口,用root用户登陆mysql 用户表建表sql: CREATE TABLE ...

  8. 汇编 EAX,EBX,ECX,EDX,寄存器

    知识点: 寄存器EAX 寄存器AX 寄存器AH 寄存器AL 一.EAX与AX,AH,AL关系图 一格表示一字节 #include <Windows.h> int _tmain(int ar ...

  9. STM32之HAL库、标准外设库、LL库

    标准外设库(Standard Peripherals Library),应该是最早推出的版本,以前用STM32F103的时候,用的多 HAL(Hardware Abstraction Layer),硬 ...

  10. Java Web应用中支持跨域请求

    转载:https://blog.csdn.net/lmy86263/article/details/51724221 由于工程合作开发的需要,后台的应用要能支持跨域访问,但是在这个跨域访问“时好时坏” ...