グラフィック可視化とWeb画像技術紹介

一、SVG:伸縮可能なベクトルパターン(声明式方法:モードパターンを保持して描画する)
SVG自体はXMLベースの独立したデータフォーマットであり、宣言式の2 Dベクトルパターンである.しかし、HTMLドキュメントに組み込むこともできます.これはすべての主流ブラウザでサポートされています.

   SVG            ：

  
    
  

ブラウザウィンドウがサイズまたは拡大縮小を調整すると、画像の品質は失われません.SVG要素がJavaScriptコードによって修正されると、自動的に再描画されます.これはSVGが*JavaScriptライブラリ(D 3など)＊と一緒に使用するのに特に適しています.D 3はデータをDOMの要素に結び付けて、簡単な図表からもっとユニークなインタラクティブデータまで視認可能な任意のコンテンツを作成することができます.
二、キャンバスcanvas(関数式方法:インスタントパターン描画)
canvas元素はホームページ上で図形描画できるエリアを提供しただけです.JavaScriptコードを使用して、まずキャンバスからコンテキストを取得し、提供されたAPIを使用して、画像を描く関数を定義します.

const canvas = document.getElementById(id);
const context = canvas.getContext(contextType);

// call some methods on context to draw onto the canvas

スクリプトが実行されると、画像はすぐに下のビットマップのピクセルに作成されます.ブラウザは描画方式の情報を保持しません.図形描画を更新するためには、スクリプトを再実行する必要があります.画像をリサイズすると、描画の更新もトリガされます.そうでないと、ブラウザは元のビットマップだけを伸ばして、画像が明らかにぼやけたりピクセル化されたりします.
1.コンテキスト:2 D
キャンバスに2 Dグラフィックスを描画するための高度なAPIが提供されている.

         ：

  
    
    
      const canvas = document.getElementById("my-canvas");
      const context = canvas.getContext("2d");

      function render() {
        // Size the drawing surface to match the actual element (no stretch).
        canvas.height = canvas.clientHeight;
        canvas.width = canvas.clientWidth;

        context.beginPath();

        // Calculate relative size and position of circle in pixels.
        const x = 0.5 * canvas.width;
        const y = 0.5 * canvas.height;
        const radius = 0.25 * Math.min(canvas.height, canvas.width);

        context.arc(x, y, radius, 0, 2 * Math.PI);

        context.fillStyle = "red";
        context.fill();

        context.strokeStyle = "black";
        context.stroke();
      }

      render();
      addEventListener("resize", render);
    
  

カンバスの現在のサイズに応じて、ピクセル単位で円の半径と中心の位置を計算します.これは、スケーリングされたイベントを監視し、それに応じて再描画しなければならないことを意味する.より多くのオブジェクトの、より複雑な動的可視化に適しており、DOMの多くの要素を更新し、ブラウザにいつ何が現れるかを決定させ、より良い性能をもたらす.
2.文脈:WebGL
多くの現代ブラウザもwebglコンテキストをサポートしています.WibGL標準を使用したハードウェア加速グラフィックスの下側APIが提供されていますが、これはGPUサポートが必要です.これは2 Dをレンダリングするために使うことができます.さらに重要なのは、このブログで言っている3 Dグラフィックスをレンダリングするためにも使えます.

//    

  
    
    
      const canvas = document.getElementById("my-canvas");
      const context = canvas.getContext("webgl");

      const redColor = new Float32Array([1.0, 0.0, 0.0, 1.0]);
      const blackColor = new Float32Array([0.0, 0.0, 0.0, 1.0]);

      // Use an orthogonal projection matrix as we're rendering in 2D.
      const projectionMatrix = new Float32Array([
        1.0, 0.0, 0.0, 0.0,
        0.0, 1.0, 0.0, 0.0,
        0.0, 0.0, 0.0, 0.0,
        0.0, 0.0, 0.0, 1.0,
      ]);

      // Define positions of the vertices of the circle (in clip space).
      const radius = 0.5;
      const segmentCount = 360;
      const positions = [0.0, 0.0];
      for (let i = 0; i < segmentCount + 1; i++) {
          positions.push(radius * Math.sin(2 * Math.PI * i / segmentCount));
        positions.push(radius * Math.cos(2 * Math.PI * i / segmentCount));
      }

      const positionBuffer = context.createBuffer();
      context.bindBuffer(context.ARRAY_BUFFER, positionBuffer);
      context.bufferData(context.ARRAY_BUFFER, new Float32Array(positions), context.STATIC_DRAW);

      // Create shaders and program.
      const vertexShader = context.createShader(context.VERTEX_SHADER);
      context.shaderSource(vertexShader, `
        attribute vec4 position;
        uniform mat4 projection;

        void main() {
          gl_Position = projection * position;
        }
      `);
      context.compileShader(vertexShader);

      const fragmentShader = context.createShader(context.FRAGMENT_SHADER);
      context.shaderSource(fragmentShader, `
        uniform lowp vec4 color;

        void main() {
          gl_FragColor = color;
        }
      `);
      context.compileShader(fragmentShader);

      const program = context.createProgram();
      context.attachShader(program, vertexShader);
      context.attachShader(program, fragmentShader);
      context.linkProgram(program);

      const positionAttribute = context.getAttribLocation(program, 'position');

      const colorUniform = context.getUniformLocation(program, 'color');
      const projectionUniform = context.getUniformLocation(program, 'projection');

      function render() {
        // Size the drawing surface to match the actual element (no stretch).
        canvas.height = canvas.clientHeight;
        canvas.width = canvas.clientWidth;

        context.viewport(0, 0, canvas.width, canvas.height);

        context.useProgram(program);

        // Scale projection to maintain 1:1 ratio between height and width on canvas.
        projectionMatrix[0] = canvas.width > canvas.height ? canvas.height / canvas.width : 1.0;
        projectionMatrix[5] = canvas.height > canvas.width ? canvas.width / canvas.height : 1.0;
        context.uniformMatrix4fv(projectionUniform, false, projectionMatrix);

        const vertexSize = 2;
        const vertexCount = positions.length / vertexSize;

        context.bindBuffer(context.ARRAY_BUFFER, positionBuffer);
        context.vertexAttribPointer(positionAttribute, vertexSize, context.FLOAT, false, 0, 0);
        context.enableVertexAttribArray(positionAttribute);

        context.uniform4fv(colorUniform, redColor);
        context.drawArrays(context.TRIANGLE_FAN, 0, vertexCount);

        context.uniform4fv(colorUniform, blackColor);
        context.drawArrays(context.LINE_STRIP, 1, vertexCount - 1);
      }

      render();
      addEventListener("resize", render);
    
  

何かをレンダリングする前に、多くの設定をします.頂点のリストを使用して、円を小三角形の系列として定義します.また、3 Dモデル(平面円)を2 Dカンバスに投影する投影行列を定義しなければならない.そして、頂点の位置と色を決定するために、「着色器」(GSLという言語で)を作成し、GPUでコンパイルして実行しなければなりません.しかし、追加の複雑さとより低いAPIは、2 Dグラフィックス描画の性能をよりよく制御することができる.3 D可視化をレンダリングする能力も提供した.
三、X 3 D:声明式に向けた3 D図形
参考:X3 D:現代Webの声明式3 D技術