先上例子

<!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. 基于VC++ Win32+CUDA+OpenGL组合与VC++ MFC SDI+CUDA+OpenGL组合两种方案的遥感影像显示：获得的重要结论！

    1.基于VC++ Win32+CUDA+OpenGL组合的遥感影像显示 在该组合方案下,初始化时将OpenGL设置为下面两种方式,效果一样 //设置方式1 glutInitDisplayMode (G ...

  2. extern C的用法解析

    1.引言 C++语言的创建初衷是“a better C”,但是这并不意味着C++中类似C语言的全局变量和函数所采用的编译和连接方式与C语言完全相同.作为一种欲与C兼容的语言,C++保留了一部分过程式语 ...

  3. Java并发（一）并发编程的挑战

    目录 一.上下文切换 1. 多线程一定快吗 2. 测试上下文切换次数和时长 3. 如何减少上下文切换 4. 减少上下文切换实战 二.死锁 三.资源限制的挑战 四.本章小结 并发编程的目的是为了让程序运 ...

  4. scapy学习笔记（4）简单的sniffing 嗅探

    转载请注明:@小五义:http://www.cnblogs/xiaowuyi 利用sniff命令进行简单的嗅探,可以抓到一些简单的包.当不指定接口时,将对每一个接口进行嗅探,当指定接口时,仅对该接口进 ...

  5. NLB网路负载均衡管理器详解（转载）

    序言 在上一篇配置iis负载均衡中我们使用啦微软的ARR,我在那篇文章也中提到了网站的高可用性,但是ARR只能做请求入口的消息分发服务,这样如果我们的消息分发服务器给down掉啦,那么做再多的应用服务 ...

  6. 欢迎到我的新Blog!

    https://winniechen.cn 里面的页面还不是很好看...争取改一下! 里面的题解大部分也会在这里更新! 谢谢各位捧场!

  7. SEO优化上首页之搜索引擎排名规则

    搜索引擎建立索引的网页数以万亿计,用户搜索的关键词也是海量,如果每个用户提交搜索请求后,搜索引擎都去数以万亿的索引中重新排名网页,效率将非常低下.根据2-8法则,80%是查询是集中在相同的20%内容上 ...

  8. 20155304田宜楠《网络对抗技术》Exp1 PC平台逆向破解(5)M

    Exp1 PC平台逆向破解(5)M 实践目标 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何用户输入的字符串. 该程序 ...

  9. 20155321 《网络对抗》 Exp6 信息搜集与漏洞扫描

    20155321 <网络对抗> Exp6 信息搜集与漏洞扫描 实验内容 信息搜集 whois 在kali终端输入whois 网址,查看注册的公司.服务.注册省份.传真.电话等信息 dig或 ...

  10. SQL Server 全文搜索

    SQL Server 的全文搜索(Full-Text Search)是基于分词的文本检索功能,依赖于全文索引.全文索引不同于传统的平衡树(B-Tree)索引和列存储索引,它是由数据表构成的,称作倒转索 ...