Three.js ShaderMaterial

自定義材質的使用，ShaderMaterial 和 RawShaderMaterial的區別是，前者可以使用一些通用的uniform, attribute 等等，比如
positon，uv， modelViewMatrix, modelMatrix 不需要去定義，可以直接在ShaderMaterial中使用，three.js 會自動定義好這些通用的變量，並且時候去更新這些內建變量，也不用去操心，由 three.js 來接管。

後者 RawShaderMaterial 沒有這些內建變量，shader代碼裏用到的所有uniform，attribute 都需要自己去管理

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title><!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Test canvas texture</title>
      <style>
        body {
          overflow: hidden;
        }
      </style>
      <script src="./external/three.js"></script>
      <script src="./external/dat.gui.min.js"></script>
      <script src="./controls/OrbitControls.js"></script>
      <script src="j01/bitmap-sdf.js"></script>
    </head>
<body>
<script type="x-shader/x-vertex" id="vertexShader">
    uniform vec2 center;
    uniform vec3 outline_color;
    uniform float outline_width;

    varying vec2 vUv;

    varying vec4 v_outlineColor;
    varying float v_outlineWidth;

    bool isPerspectiveMatrix( mat4 m ) {

        return m[ 2 ][ 3 ] == - 1.0;

    }

    void main() {
        vUv = uv;
        vec4 mvPosition = modelViewMatrix * vec4( 0.0, 0.0, 0.0, 1.0 );

        vec2 scale;
        scale.x = length( vec3( modelMatrix[ 0 ].x, modelMatrix[ 0 ].y, modelMatrix[ 0 ].z ) );
        scale.y = length( vec3( modelMatrix[ 1 ].x, modelMatrix[ 1 ].y, modelMatrix[ 1 ].z ) );

        #ifndef USE_SIZEATTENUATION

        bool isPerspective = isPerspectiveMatrix( projectionMatrix );

        if ( isPerspective ) scale *= - mvPosition.z;

        #endif

        vec2 alignedPosition = ( position.xy - ( center - vec2( 0.5 ) ) ) * scale;

        mvPosition.xy += alignedPosition;

        gl_Position = projectionMatrix * mvPosition;

        //        vec4 outlineColor = vec4(1.0, 0, 0, 0.9);
        v_outlineWidth = outline_width;
        v_outlineColor = vec4(outline_color, 1.0);
    }
</script>

<script type="x-shader/x-fragment" id="fragmentShader">
  #extension GL_OES_standard_derivatives : enable
    //1.0 - SDFSettings.CUTOFF;
    #define SDF_EDGE 0.75
    uniform float opacity;
    varying vec2 vUv;
    uniform sampler2D map;
  uniform vec3 fill_color;

    varying vec4 v_outlineColor;
    varying float v_outlineWidth;

    // Get the distance from the edge of a glyph at a given position sampling an SDF texture.
    float getDistance(vec2 position) {
        return texture2D(map, position).r;
    }

    // Samples the sdf texture at the given position and produces a color based on the fill color and the outline.
    vec4 getSDFColor(vec2 position, float outlineWidth, vec4 outlineColor, float smoothing) {
        float distance = getDistance(position);
      vec4 v_color = vec4(fill_color, 1.0);

        if (outlineWidth > 0.0) {
            // Don't get the outline edge exceed the SDF_EDGE
            float outlineEdge = clamp(SDF_EDGE - outlineWidth, 0.0, SDF_EDGE);
            float outlineFactor = smoothstep(SDF_EDGE - smoothing, SDF_EDGE + smoothing, distance);
            vec4 sdfColor = mix(outlineColor, v_color, outlineFactor);
            float alpha = smoothstep(outlineEdge - smoothing, outlineEdge + smoothing, distance);
            return vec4(sdfColor.rgb, sdfColor.a * alpha);
        } else {
            float alpha = smoothstep(SDF_EDGE - smoothing, SDF_EDGE + smoothing, distance);
            return vec4(v_color.rgb, v_color.a * alpha);
        }
    }

    void main() {

        vec3 outgoingLight = vec3( 0.0 );
        vec4 diffuseColor = vec4( vec3(1,1,1), opacity );
        vec4 texelColor = texture2D( map, vUv );

        diffuseColor *= texelColor;

        outgoingLight = diffuseColor.rgb;

        gl_FragColor = vec4( outgoingLight, diffuseColor.a );
        gl_FragColor.rgb = toneMapping( gl_FragColor.rgb );
        //gl_FragColor = linearToOutputTexel( gl_FragColor );

        // Just do a single sample
        float smoothing = 1.0/32.0;
//        float smoothing = fwidth(texelColor.r);
        vec4 color = getSDFColor(vUv, v_outlineWidth, v_outlineColor, smoothing);
        gl_FragColor = color;
    }
</script>

<script>
  function convertToSDF(canvas) {
    let ctx = canvas.getContext("2d");
    let cw = canvas.width, ch = canvas.height;
    let sdfValues = calcSDF(canvas, {
      cutoff: 0.25,
      radius: 16.0,
    });

    let imgData = ctx.getImageData(0, 0, cw, ch);
    for (let i = 0; i < cw; i++) {
      for (let j = 0; j < ch; j++) {
        let baseIndex = j * cw + i;
        let alpha = sdfValues[baseIndex] * 255;
        let imageIndex = baseIndex * 4;
        imgData.data[imageIndex + 0] = alpha;
        imgData.data[imageIndex + 1] = alpha;
        imgData.data[imageIndex + 2] = alpha;
        imgData.data[imageIndex + 3] = alpha;
      }
    }
    ctx.putImageData(imgData, 0, 0);
    return canvas;
  }
  function generateCanvas(text) {
    let canvas = document.createElement( 'canvas' );
    let context = canvas.getContext( '2d' );
    let size = 48;
    context.font = size + 'px Microsoft YaHei';
    let strLst = text.split('\n');
    let maxWdith = -Infinity;
    for (let str of strLst) {
      let measured = context.measureText(str);
      if (maxWdith < measured.width) {
        maxWdith = measured.width;
      }
    }
    canvas.width = maxWdith+20;      //根據文字內容獲取寬度
    let lineHeight = size * 1.5;  // fontsize * 1.5
    canvas.height = lineHeight * strLst.length;
    // let obj = computeFontSize(text, '40px', 'Microsoft YaHei');
    // console.log("generateCanvas, ", obj);
    strLst.forEach((str, index) => {
      context.beginPath();
      context.font = size + 'px Microsoft YaHei';
      context.fillStyle = "#ccff8b";
      context.fillText(str,10,size * (1 + index));
      context.fill();
    });

    // return canvas;
    return convertToSDF(canvas);
  }

  //根據canvas圖形制作sprite
  function makeCanvasSprite(canvas){
    let texture = new THREE.Texture(canvas);
    texture.needsUpdate = true;
    let uniforms = { 'opacity': {value: 1}, "center": {value: new THREE.Vector2(0.5, 0.5)},
      "map": {value:texture}, "outline_color": {value: new THREE.Color('#52ff8a')}
      , "outline_width": {value: 0.25}, "fill_color": {value: new THREE.Color('#ff3f27')}  };
    let spriteMaterial = new THREE.ShaderMaterial( {
      uniforms: uniforms,
      vertexShader: document.getElementById( 'vertexShader' ).textContent,
      fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
      side: THREE.DoubleSide
    } );
    spriteMaterial.transparent = true;

    let sprite = new THREE.Sprite(spriteMaterial);
    sprite.center = new THREE.Vector2(0.5, 0.5);
    let poi = {w: canvas.width, h: canvas.height};
    sprite.scale.set(poi.w/window.innerHeight, poi.h/window.innerHeight, 1.0);
    return sprite;
  }

  let twoPi = Math.PI * 2;
  let gui = new dat.GUI();
  let scene = new THREE.Scene();
  scene.background = new THREE.Color( 0x444444 );
  scene.add(new THREE.AxesHelper(200));

  let boxGeo = new THREE.BoxBufferGeometry(5, 5, 5);
  let boxMesh = new THREE.Mesh(boxGeo, new THREE.MeshBasicMaterial({color:"#6e8989", wireframe: true}));
  boxMesh.position.set(7, 10, 0);
  scene.add(boxMesh);

  let canvas = generateCanvas("你好啊");
  let sprite = makeCanvasSprite(canvas);
  scene.add(sprite);

  let camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 50 );
  camera.position.z = 30;

  let renderer = new THREE.WebGLRenderer( { antialias: true } );
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );

  let orbit = new THREE.OrbitControls( camera, renderer.domElement );
  // orbit.enableZoom = false;

  let render = function () {

    requestAnimationFrame( render );
    renderer.render( scene, camera );
  };

  window.addEventListener( 'resize', function () {

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize( window.innerWidth, window.innerHeight );

  }, false );

  render();


</script>
</body>
</html>

/*
* https://github.com/dy/bitmap-sdf
* Calculate SDF for image/bitmap/bw data
* This project is a fork of MapBox's TinySDF that works directly on an input Canvas instead of generating the glyphs themselves.
*/

    var INF = 1e20;

    function clamp(value, min, max) {
        return min < max
            ? (value < min ? min : value > max ? max : value)
            : (value < max ? max : value > min ? min : value)
    }

    function calcSDF(src, options) {
        if (!options) options = {}

        var cutoff = options.cutoff == null ? 0.25 : options.cutoff
        var radius = options.radius == null ? 8 : options.radius
        var channel = options.channel || 0
        var w, h, size, data, intData, stride, ctx, canvas, imgData, i, l

        // handle image container
        if (ArrayBuffer.isView(src) || Array.isArray(src)) {
            if (!options.width || !options.height) throw Error('For raw data width and height should be provided by options')
            w = options.width, h = options.height
            data = src

            if (!options.stride) stride = Math.floor(src.length / w / h)
            else stride = options.stride
        }
        else {
            if (window.HTMLCanvasElement && src instanceof window.HTMLCanvasElement) {
                canvas = src
                ctx = canvas.getContext('2d')
                w = canvas.width, h = canvas.height
                imgData = ctx.getImageData(0, 0, w, h)
                data = imgData.data
                stride = 4
            }
            else if (window.CanvasRenderingContext2D && src instanceof window.CanvasRenderingContext2D) {
                canvas = src.canvas
                ctx = src
                w = canvas.width, h = canvas.height
                imgData = ctx.getImageData(0, 0, w, h)
                data = imgData.data
                stride = 4
            }
            else if (window.ImageData && src instanceof window.ImageData) {
                imgData = src
                w = src.width, h = src.height
                data = imgData.data
                stride = 4
            }
        }

        size = Math.max(w, h)

        //convert int data to floats
        if ((window.Uint8ClampedArray && data instanceof window.Uint8ClampedArray) || (window.Uint8Array && data instanceof window.Uint8Array)) {
            intData = data
            data = Array(w * h)

            for (i = 0, l = intData.length; i < l; i++) {
                data[i] = intData[i * stride + channel] / 255
            }
        }
        else {
            if (stride !== 1) throw Error('Raw data can have only 1 value per pixel')
        }

        // temporary arrays for the distance transform
        var gridOuter = Array(w * h)
        var gridInner = Array(w * h)
        var f = Array(size)
        var d = Array(size)
        var z = Array(size + 1)
        var v = Array(size)

        for (i = 0, l = w * h; i < l; i++) {
            var a = data[i]
            gridOuter[i] = a === 1 ? 0 : a === 0 ? INF : Math.pow(Math.max(0, 0.5 - a), 2)
            gridInner[i] = a === 1 ? INF : a === 0 ? 0 : Math.pow(Math.max(0, a - 0.5), 2)
        }

        edt(gridOuter, w, h, f, d, v, z)
        edt(gridInner, w, h, f, d, v, z)

        var dist = window.Float32Array ? new Float32Array(w * h) : new Array(w * h)

        for (i = 0, l = w * h; i < l; i++) {
            dist[i] = clamp(1 - ((gridOuter[i] - gridInner[i]) / radius + cutoff), 0, 1)
        }

        return dist
    }

    // 2D Euclidean distance transform by Felzenszwalb & Huttenlocher https://cs.brown.edu/~pff/dt/
    function edt(data, width, height, f, d, v, z) {
        for (var x = 0; x < width; x++) {
            for (var y = 0; y < height; y++) {
                f[y] = data[y * width + x]
            }
            edt1d(f, d, v, z, height)
            for (y = 0; y < height; y++) {
                data[y * width + x] = d[y]
            }
        }
        for (y = 0; y < height; y++) {
            for (x = 0; x < width; x++) {
                f[x] = data[y * width + x]
            }
            edt1d(f, d, v, z, width)
            for (x = 0; x < width; x++) {
                data[y * width + x] = Math.sqrt(d[x])
            }
        }
    }

    // 1D squared distance transform
    function edt1d(f, d, v, z, n) {
        v[0] = 0;
        z[0] = -INF
        z[1] = +INF

        for (var q = 1, k = 0; q < n; q++) {
            var s = ((f[q] + q * q) - (f[v[k]] + v[k] * v[k])) / (2 * q - 2 * v[k])
            while (s <= z[k]) {
                k--
                s = ((f[q] + q * q) - (f[v[k]] + v[k] * v[k])) / (2 * q - 2 * v[k])
            }
            k++
            v[k] = q
            z[k] = s
            z[k + 1] = +INF
        }

        for (q = 0, k = 0; q < n; q++) {
            while (z[k + 1] < q) k++
            d[q] = (q - v[k]) * (q - v[k]) + f[v[k]]
        }
    }

Three.js ShaderMaterial

關於遊戲付費的一點想法

我通過CKA和CKS啦！

《最新出爐》系列入門篇-Python+Playwright自動化測試-42-強大的可視化追蹤利器Trace Viewer

大數據怎麼學？對大數據開發領域及崗位的詳細解讀，完整理解大數據開發領域技術體系

Three.js ShaderMaterial

NAV 網格導航尋路

3D空間的直線能否只用四個變量來表達？

華容道自動求解 java版

裙片排版小程序

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結