先上例子

<!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. Hibernate-validator校验框架使用

    可以有两种使用方法: 第一种:在要检验的Dto对象之前加@Valid注解,这种方法必须配合BindingResult参数一起使用,否则验证不通过就会返回400,并且抛出"org.spring ...

  2. MUST_COMPLETE

    应用: xxx主机: xxx时间: 2018-03-07 04:34:03.887线程: [scheduler-1]级别: ERROR Class: org.springframework.sched ...

  3. Properties类和如何操作属性

    Properties类继承关系java.lang.Object  java.util.Dictionary<K,V>      java.util.Hashtable<Object, ...

  4. jqgrid editrules参数说明

    转载至:jqgrid的editrules参数 以下为内容留存记录. editrules    editrules是用来设置一些可用于可编辑列的colModel的额外属性的.大多数的时候是用来在提交到服 ...

  5. jqgrid 滚动分页

    有时,我们不想在底部显示分页信息,而是通过用户滚动鼠标,当鼠标滚到到底自动加载下一页数据,再滚动再加载直至数据全部加载完毕.如何配置? 设置 scroll:true   emptyrecords用于在 ...

  6. MapReduce -- 最短路径

    示例: 给出各个节点到相邻节点的距离,要求算出初始节点到各个节点的最短路径. 数据: A (B,) (D,) B (C,) (D,) C (E,) D (B,) (C,) (E,) E (A,) (C ...

  7. 20155330 《网络攻防》 Exp3 免杀原理与实践

    20155330 <网络攻防> Exp3 免杀原理与实践 基础问题回答 杀软是如何检测出恶意代码的? 基于特征码.先对流行代码特征的提取,然后进行程序的比对,如果也检测到相应的特征码的程序 ...

  8. 20155338《网络对抗》Exp8 Web基础

    20155338<网络对抗>Exp8 Web基础 实验内容 Web前端:HTML 使用netstat -aptn查看80端口是否被占用,如果被占用了就kill 原进程号,我的没有被占用. ...

  9. [BZOJ4722]由乃[鸽巢原理+bitset+倍增]

    题意 给定长为 \(n\) 序列 \(a\) ,要求支持两种操作: \(1.\) 询问在一个区间 \([l,r]\) 中,是否能够选出两个交集为空的集合 $ \rm X ,Y$, 使得 \(\sum_ ...

  10. pycharm如何全局进行查找一个关键词

    PyCharm的Find in Path功能提供了全局查找功能,快捷键为Ctrl + Shift + F.Find则是在当前文件查找,快捷键为Ctrl + F.这两个个功能非常实用. Find in ...