先上例子

<!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. debian文本配置网络备忘：/etc/network/interfaces

    我装了wheezy有gnome3,xfce4: 郁闷的是,不论在gnome还是xfce4中 我都无法图形登录或者切换用户到root: 而且我无法在普通用户下图形修改网络配置: 我也搜索不到启用root ...

  2. ICC Stage Flow

    initial: reference library(mw), link library(db), create_mw_lib, read_verilog, link create_floorplan ...

  3. DataGridView如何绑定DataRow对象集合

    DataGridView对象是我们在进行Winform程序开发中经常使用的呈现数据的控件,而数据则是通过DataSource这个Property来设置的.根据MSDN的说明,DataGridView对 ...

  4. Leetcode——413. 等差数列划分

    题目描绘:题目链接 题目中需要求解一个数组中等差数组的个数,这个问题可以利用动态规划的思路来分析. 三步骤: 1:问题归纳.题目需要求解等差数列的和,我们可以用一个数组保存前i个元素可以构成的等差数列 ...

  5. defaultdict - update - pymysql

    defaultdict 的例子 使用list作为default_factory,他很容易的将一个以键值形式表现的序列分组成一个字典列表 >>> s = [('yellow', 1), ...

  6. NYOJ 35 表达式求值

    一个模板了 哈哈. 这题由于已经包括了整形.浮点形了,以后也不须要特别处理了. /* 这里主要是逆波兰式的实现,使用两个stack 这里用字符串来模拟一个stack,第一步,将中缀表达式转变为后缀表达 ...

  7. 1.4《想成为黑客，不知道这些命令行可不行》(Learn Enough Command Line to Be Dangerous)——编辑命令

    在编辑模式中,命令行包括几个重复之前命令的功能.这些以及其他很多命令功能时常设计键盘上的特殊键,所以给出Table 1作为参考,给出了许多键在典型的Macintosh键盘上的标记符号.若你的键盘不太一 ...

  8. 2017-2018-2 20155231《网络对抗技术》实验五： MSF基础应用

    2017-2018-2 20155231<网络对抗技术>实验五: MSF基础应用 实践目标 掌握信息搜集的最基础技能与常用工具的使用方法. 实验内容 (1)各种搜索技巧的应用 比如IP2L ...

  9. 【第三方插件】使用Topshelf创建Windows服务

    概述 Topshelf是创建Windows服务的另一种方法,老外的一篇文章Create a .NET Windows Service in 5 steps with Topshelf通过5个步骤详细的 ...

  10. Vue 项目集合

    饿了么安全应急响应中心 饿了么招聘 饿了么前端 · GitHub 稀土掘金 异乡好居 明星垂搜 广州建管 基于Vue.js的数据统计系统(一) 基于Vue.js的数据统计系统(二) 基于Vue.js的 ...