帧缓冲

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>帧缓冲</title>
    <script src="https://webgl2fundamentals.org/webgl/resources/webgl-utils.js"></script>
    <script src="https://webgl2fundamentals.org/webgl/resources/m4.js"></script>
</head>
<body>
    <canvas id="canvas" style="width:400px;height:400px;"></canvas>
</body>
</html>
<script>
    "use strict";
    let vsSource = `#version 300 es
        in vec4 a_position;
        in vec2 a_texcoord;
        uniform mat4 u_matrix;
        out vec2 v_texcoord;
        void main(){
            gl_Position = u_matrix * a_position;
            v_texcoord = a_texcoord;
        }
    `;

    let fsSource = `#version 300 es
        precision mediump float;
        in vec2 v_texcoord;
        uniform sampler2D u_texture;
        out vec4 outColor;
        void main(){
            outColor = texture(u_texture, v_texcoord);
        }
    `;
    
    function main(){
        let canvas = document.getElementById("canvas");
        let gl = canvas.getContext("webgl2");
        if(!gl){
            return;
        }
        let program = webglUtils.createProgramFromSources(gl,[vsSource, fsSource]);
        let positionLocation = gl.getAttribLocation(program,"a_position");
        let texCoordLocation = gl.getAttribLocation(program,"a_texcoord");
        let matrixLocation = gl.getUniformLocation(program,"u_matrix");
        let textureLocation = gl.getUniformLocation(program,"u_texture");
        //positionbuffer
            let positionBuffer = gl.createBuffer();
            let vao = gl.createVertexArray();
            gl.bindVertexArray(vao);

            gl.bindBuffer(gl.ARRAY_BUFFER,positionBuffer);
            let positions = [//在最后的裁剪坐标系中,三角形坐标点是逆时针为正面
                -0.5, -0.5,   0,
                 0.5, -0.5,   0,
                -0.5,  0.5,   0,
                -0.5,  0.5,   0,
                 0.5, -0.5,   0,
                 0.5,  0.5,   0,
            ];
            gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(positions),gl.STATIC_DRAW);
            gl.enableVertexAttribArray(positionLocation);
            gl.vertexAttribPointer(positionLocation,3,gl.FLOAT,false,0,0);
        
        //texcoordbuffer
            let texcoordBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER,texcoordBuffer);
            // let texcoords = [
         //          0, 0,
         //          0, 1,
         //          1, 0,
         //          1, 0,
         //          0, 1,
         //          1, 1,
            // ];
            let texcoords = [
                0,0,
                1,0,
                0,1,
                0,1,
                1,0,
                1,1,
            ];
            gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(texcoords),gl.STATIC_DRAW);
            gl.enableVertexAttribArray(texCoordLocation);
            gl.vertexAttribPointer(texCoordLocation,2,gl.FLOAT,false,0,0);
        

        //texture
            let texture = gl.createTexture();
            gl.activeTexture(gl.TEXTURE0 + 0);
            gl.bindTexture(gl.TEXTURE_2D,texture);
            gl.pixelStorei(gl.UNPACK_ALIGNMENT,1);
            gl.texImage2D(gl.TEXTURE_2D, 0, gl.R8, 3, 2, 0, gl.RED, gl.UNSIGNED_BYTE,new Uint8Array([128,64,128,0,192,0]));
            // set the filtering so we don't need mips
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

        //targetTexture
            let targetTexture = gl.createTexture();
            gl.bindTexture(gl.TEXTURE_2D,targetTexture);
            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 256, 256, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
            // set the filtering so we don't need mips
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

        //framebuffer
            let framebuffer = gl.createFramebuffer();
            gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
            gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, targetTexture, 0);    

        webglUtils.resizeCanvasToDisplaySize(gl.canvas);
        gl.enable(gl.CULL_FACE);
        gl.enable(gl.DEPTH_TEST);
        {
            gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
            gl.bindTexture(gl.TEXTURE_2D, texture);
            gl.viewport(0,0,256,256);
            gl.clearColor(0,0,1,1);
            gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);
            let aspect = 256/256;

            {
                gl.useProgram(program);
                let projectionMatrix = m4.perspective(60*Math.PI/180,aspect,1,2000);
                let cameraPosition = [0,0,2];
                let up = [0,1,0];
                let target = [0,0,0];
                let cameraMatrix = m4.lookAt(cameraPosition,target,up);
                let viewMatrix = m4.inverse(cameraMatrix);

                let viewProjectionMatrix = m4.multiply(projectionMatrix, viewMatrix);
                gl.uniformMatrix4fv(matrixLocation,false,viewProjectionMatrix);
                gl.uniform1i(textureLocation, 0);
                gl.drawArrays(gl.TRIANGLES,0,6);

            }
        }
        {
            gl.bindFramebuffer(gl.FRAMEBUFFER, null);
            gl.bindTexture(gl.TEXTURE_2D,targetTexture);
            gl.viewport(0,0,gl.canvas.width,gl.canvas.height);
            gl.clearColor(1,1,1,1);
            gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);
            let aspect = gl.canvas.clientWidth/gl.canvas.clientHeight;
            {
                gl.useProgram(program);
                let projectionMatrix = m4.perspective(60*Math.PI/180,aspect,1,2000);
                let cameraPosition = [0,0,2];
                let up = [0,1,0];
                let target = [0,0,0];
                let cameraMatrix = m4.lookAt(cameraPosition,target,up);
                let viewMatrix = m4.inverse(cameraMatrix);

                let viewProjectionMatrix = m4.multiply(projectionMatrix, viewMatrix);
                gl.uniformMatrix4fv(matrixLocation,false,viewProjectionMatrix);
                gl.uniform1i(textureLocation, 0);
                gl.drawArrays(gl.TRIANGLES,0,6);
            }
        }
    }
    main();
</script>

webgl二维图像

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>二维纹理</title>
    <!-- webgl-utils.js, 它包含了编译和链接着色器的方法 -->
    <script src="https://webgl2fundamentals.org/webgl/resources/webgl-utils.js"></script>
</head>
<body>
    <canvas id="c" style="width:100vw;height:100vh;"></canvas>
</body>
</html>
<script type="text/javascript">
    "use strict";
    var vs = `#version 300 es
    in vec2 a_position;
    uniform vec2 u_resolution;

    in vec2 a_texCoord;
    out vec2 v_texCoord;
    void main(){
        // vec2 clipSpace = a_position/u_resolution*2.0-1.0;
        // gl_Position = vec4(clipSpace*vec2(1,-1),0,1);


        // convert the position from pixels to 0.0 to 1.0
      vec2 zeroToOne = a_position / u_resolution;

      // convert from 0->1 to 0->2
      vec2 zeroToTwo = zeroToOne * 2.0;

      // convert from 0->2 to -1->+1 (clipspace)
      vec2 clipSpace = zeroToTwo - 1.0;

      gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);

        v_texCoord = a_texCoord;
    }
    `;
    var fs = `#version 300 es
    precision mediump float;
    uniform sampler2D u_image;
    in vec2 v_texCoord;
    out vec4 outColor;
    void main(){
        // outColor = texture(u_image,v_texCoord);
        outColor = texture(u_image,v_texCoord).bgra;//把红色和蓝色调换
    }
    `;
    function createShader(gl, type, source) {
      var shader = gl.createShader(type);
      gl.shaderSource(shader, source);
      gl.compileShader(shader);
      var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
      if (success) {
        return shader;
      }
     
      console.log(gl.getShaderInfoLog(shader));
      gl.deleteShader(shader);
      return undefined;
    }

    function createProgram(gl, vertexShader, fragmentShader) {
      var program = gl.createProgram();
      gl.attachShader(program, vertexShader);
      gl.attachShader(program, fragmentShader);
      gl.linkProgram(program);
      var success = gl.getProgramParameter(program, gl.LINK_STATUS);
      if (success) {
        return program;
      }
     
      console.log(gl.getProgramInfoLog(program));
      gl.deleteProgram(program);
      return undefined;
    }

    function resize(canvas) {
      // 获取浏览器中画布的显示尺寸
      var displayWidth  = canvas.clientWidth;
      var displayHeight = canvas.clientHeight;
     
      // 检尺寸是否相同
      if (canvas.width  != displayWidth ||
          canvas.height != displayHeight) {
     
        // 设置为相同的尺寸
        canvas.width  = displayWidth;
        canvas.height = displayHeight;
      }
    }
    var image = new Image();
    requestCORSIfNotSameOrigin(image, "https://webgl2fundamentals.org/webgl/resources/leaves.jpg")
    image.src = "https://webgl2fundamentals.org/webgl/resources/leaves.jpg";
    // image.src = "./imgs/leaves.jpg";
    image.onload = function(){
        render(image);
    };

    function render(image){
        var canvas = document.getElementById("c");
        var gl = canvas.getContext("webgl2");
        if(!gl){
            return;
        }
        var vertexShader = createShader(gl, gl.VERTEX_SHADER, vs);
        var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fs);
        var program = createProgram(gl, vertexShader, fragmentShader);

        var positionAttributeLocation = gl.getAttribLocation(program, "a_position");
        var resolutionUniformLocation = gl.getUniformLocation(program, "u_resolution");
        var texCoordAttributeLocation = gl.getAttribLocation(program, "a_texCoord");
        var imageUniformLocation = gl.getUniformLocation(program, "u_image");

        var positionBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
        // console.log(image.width,image.height);
        setRectangle(gl, 0, 0, image.width, image.height);

        var vao = gl.createVertexArray();
        gl.bindVertexArray(vao);
        gl.enableVertexAttribArray(positionAttributeLocation);
        var size = 2;          // 2 components per iteration
        var type = gl.FLOAT;   // the data is 32bit floats
        var normalize = false; // don't normalize the data
        var stride = 0;        // 0 = move forward size * sizeof(type) each iteration to get the next position
        var offset = 0;        // start at the beginning of the buffer
        gl.vertexAttribPointer(positionAttributeLocation, size, type, normalize, stride, offset);

        var texCoordBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
          0.0,  0.0,
          1.0,  0.0,
          0.0,  1.0,
          0.0,  1.0,
          1.0,  0.0,
          1.0,  1.0,
        ]), gl.STATIC_DRAW);
        gl.enableVertexAttribArray(texCoordAttributeLocation);
        var size = 2;          // 2 components per iteration
        var type = gl.FLOAT;   // the data is 32bit floats
        var normalize = false; // don't normalize the data
        var stride = 0;        // 0 = move forward size * sizeof(type) each iteration to get the next position
        var offset = 0;        // start at the beginning of the buffer
        gl.vertexAttribPointer(texCoordAttributeLocation, size, type, normalize, stride, offset);


        var texture = gl.createTexture();
        gl.activeTexture(gl.TEXTURE0 + 0);
        gl.bindTexture(gl.TEXTURE_2D, texture);

        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);

        var mipLevel = 0;               // the largest mip
          var internalFormat = gl.RGBA;   // format we want in the texture
          var srcFormat = gl.RGBA;        // format of data we are supplying
          var srcType = gl.UNSIGNED_BYTE; // type of data we are supplying
          gl.texImage2D(gl.TEXTURE_2D,
                    mipLevel,
                    internalFormat,
                    srcFormat,
                    srcType,
                    image);

          gl.useProgram(program);
          // 为了下面用的canvas的像素值和实际大小相等,必须要resize和viewport
          resize(gl.canvas);
          gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
          gl.uniform2f(resolutionUniformLocation, gl.canvas.width, gl.canvas.height);
          gl.uniform1i(imageUniformLocation, 0);


          gl.clearColor(0, 0, 0, 0);
          gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
          var primitiveType = gl.TRIANGLES;
          var offset = 0;
          var count = 6;
          gl.drawArrays(primitiveType, offset, count);
    }
    function setRectangle(gl, x, y, width, height) {
      var x1 = x;
      var x2 = x + width;
      var y1 = y;
      var y2 = y + height;
      // 数据都是逆时针输入
      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
         x1, y1,
         x2, y1,
         x1, y2,
         x1, y2,
         x2, y1,
         x2, y2,
      ]), gl.STATIC_DRAW);
    }

    function requestCORSIfNotSameOrigin(img, url) {
      if ((new URL(url)).origin !== window.location.origin) {
        img.crossOrigin = "";
      }
    }
</script>

Vue.js

Vue.js

学习资料:vue官网https://cn.vuejs.org/v2/api/

网站快速成型工具

学习资料:Element http://element-cn.eleme.io/#/zh-CN

ECharts

v3.0学习资料:http://echarts.baidu.com/index.html

v2.0学习资料:http://echarts.baidu.com/echarts2/index.html

不懂:

1https://cn.vuejs.org/v2/guide/syntax.html#%E5%8E%9F%E5%A7%8B-HTML(原始 HTML)

2https://cn.vuejs.org/v2/guide/syntax.html#特性

3模板表达式都被放在沙盒中,只能访问全局变量的一个白名单,如 Math 和 Date 。你不应该在模板表达式中试图访问用户定义的全局变量。

看到了:https://cn.vuejs.org/v2/guide/syntax.html#%E7%89%B9%E6%80%A7

Vue.js

一、例子

1.1-hello_world

所有东西都是响应式的。我们要怎么确认呢?打开你的浏览器的 JavaScript 控制台 (就在这个页面打开),并修改 app.message 的值,你将看到上例相应地更新。

2.2-v-bind

3.3-v-if

4.4-v-for

5.5-v-on

6.6-v-model

7.7-vue.component

8.8-数据的同步

二、指令

eg:v-bind, v-开头的就是vue的指令,表示vue提供的特殊特性。

1.v-bind:将vue内部的变量和dom属性绑定。eg:v-bind:title=“message”

2.v-if:控制一个dom是否显示。eg:v-if="message"

3.v-for:可以绑定数组的数据,在dom中展示.eg:v-for="todo in todos"

4.v-on:可以给dom元素绑定事件。eg:v-on:click="functionName"

5.v-model:输入框和文本显示之间的双向绑定。eg:v-model="message"

三、组件系统

Vue.component("todo-item",{

props:["todo"],
template:"<li>{{todo.id}}{{todo.text}}</li>"

});

四、注意:

1、值得注意的是只有当实例被创建时, data 中存在的属性才是响应式的.也就是说如果你添加一个新的属性,比如:

vm.b = 'hi'

那么对 b 的改动将不会触发任何视图的更新.

2.如果你知道你会在晚些时候需要一个属性,但是一开始它为空或不存在,那么你仅需要设置一些初始值。比如:

data: {
  newTodoText: '',
  visitCount: 0,
  hideCompletedTodos: false,
  todos: [],
  error: null
}

3.vue的el的dom不可以是body,html

4.修饰符: 是以半角句号 . 指明的特殊后缀

例如以下: .prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault():

<form v-on:submit.prevent="onSubmit">...</form>

五、实例生命周期钩子

初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。

比如 created 钩子可以用来在一个实例被创建之后执行代码:

new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"

也有一些其它的钩子,在实例生命周期的不同阶段被调用,如 mounted、updated 和 destroyed。生命周期钩子的 this 指向Vue 实例。

不要在选项属性或回调上使用箭头函数,因为箭头函数是和父级上下文绑定在一起的。

R