Three.js ShaderMaterial

最新推荐文章于 2024-07-01 10:04:31 发布
最新推荐文章于 2024-07-01 10:04:31 发布
阅读量1.1k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mu399/article/details/107068029
版权

自定义材质的使用，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]]
        }
    }


function removeRags(strLst) {
    let arr = strLst.split("");
    let map = {}, keys = [];
    for (let i = 0; i < arr.length; i++) {
      let str = arr[i];
      if (map[str] == undefined) {
        map[str] = [i];
      } else {
        map[str].push(i);
        if (keys.indexOf(str) < 0) {
          keys.push(str);
        }
      }
    }
    for (let i = keys.length - 1; i > -1; i--) {
      let key = keys[i];
      let start = map[key][0] + 1, deleteCount = map[key][1] - map[key][0];
      if (arr[start - 1] == key) {
        arr.splice(start, deleteCount);
      }
    }
    return arr.join("");
  }

Cesium 中的字体轮廓，《Labels.html》

function setFont() {
  Sandcastle.declare(setFont);
  viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222),
    label: {
      text: "模型1",
      font: "16px Helvetica",
      fillColor: Cesium.Color.WHITE,
      outlineColor: Cesium.Color.BLACK,
      outlineWidth: 4,
      style: Cesium.LabelStyle.FILL_AND_OUTLINE,
    },
  });
}

outlineWidth 是如何传入shader的
LabelCollection.update() => BillboardCollection.update()
BillboardCollection function createVAF()

BillboardCollection var attributeLocationsBatched = {}
BillboardCollection function writeSDF()

VertexArrayFacade._verifyAttributes()
VertexArray gl.vertexAttribPointer //指定了渲染时索引值为 index 的顶点属性数组的数据格式和位置。

BillboardCollectionVS.glsl

attribute vec2 sdf;        // sdf outline color (rgb) and width (w)
#ifdef SDF
    vec4 outlineColor;
    float outlineWidth;

    temp = sdf.x;
    temp = temp * SHIFT_RIGHT8;
    outlineColor.b = (temp - floor(temp)) * SHIFT_LEFT8;
    temp = floor(temp) * SHIFT_RIGHT8;
    outlineColor.g = (temp - floor(temp)) * SHIFT_LEFT8;
    outlineColor.r = floor(temp);

    temp = sdf.y;
    temp = temp * SHIFT_RIGHT8;
    float temp3 = (temp - floor(temp)) * SHIFT_LEFT8;
    temp = floor(temp) * SHIFT_RIGHT8;
    outlineWidth = (temp - floor(temp)) * SHIFT_LEFT8;
    outlineColor.a = floor(temp);
    outlineColor /= 255.0;

    v_outlineWidth = outlineWidth / 255.0;
    v_outlineColor = outlineColor;
    v_outlineColor.a *= translucency;
#endif

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>chapter1.1</title>
  <script src="../external/three.js"></script>
  <script src="../controls/OrbitControls.js"></script>
  <style>
    body {
      overflow: hidden;
      padding: 0;
      margin: 0;
    }
  </style>
</head>
<body>
<div id="container"></div>

<script id="vertexShader" type="x-shader/x-vertex">
  varying vec2 pos;
  void main() {
    pos = (vec2(position) + 1.0) * 0.5;
    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
  }
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
  uniform vec2 u_resolution;
  uniform float u_time;
  varying vec2 pos;

  // Plot a line on Y using a value between 0.0-1.0
  float plot(vec2 st) {
    return smoothstep(0.02, 0.000, abs(st.y - st.x));
  }

  void main() {
    float y = pos.x;

    vec3 color = vec3(y);

    // Plot a line
    float pct = plot(pos);
    color = (1.0 - pct) * color + pct * vec3(0.0, 1.0, 0.0);

    gl_FragColor = vec4(color, 1.0);
  }
</script>
<script>
  //https://thebookofshaders.com/05/?lan=ch
  var container;
  var camera, scene, renderer;
  var uniforms;

  init();
  animate();

  function init() {
    container = document.getElementById( 'container' );

    camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
    camera.position.set(1, 1, 1);

    scene = new THREE.Scene();
    scene.add(new THREE.AxesHelper(20));

    var geometry = new THREE.PlaneBufferGeometry( 2, 2 );

    uniforms = {
      u_time: { type: "f", value: 1.0 },
      u_resolution: { type: "v2", value: new THREE.Vector2(window.innerWidth, window.innerHeight) }
    };

    var material = new THREE.ShaderMaterial( {
      uniforms: uniforms,
      vertexShader: document.getElementById( 'vertexShader' ).textContent,
      fragmentShader: document.getElementById( 'fragmentShader' ).textContent
    } );
    var material2 = new THREE.MeshBasicMaterial({color: '#00bbbb', wireframe: true, side: THREE.DoubleSide})

    var mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );

    renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio( window.devicePixelRatio );

    container.appendChild( renderer.domElement );
    let orbit = new THREE.OrbitControls( camera, renderer.domElement );

    onWindowResize();
    window.addEventListener( 'resize', onWindowResize, false );
  }

  function onWindowResize( event ) {
    renderer.setSize( window.innerWidth, window.innerHeight );
    // uniforms.u_resolution.value.x = renderer.domElement.width;
    // uniforms.u_resolution.value.y = renderer.domElement.height;
  }

  function animate() {
    requestAnimationFrame( animate );
    render();
  }

  function render() {
    uniforms.u_time.value += 0.05;
    renderer.render( scene, camera );
  }
</script>
</body>
</html>

https://www.w3h5.com/post/450.html

从杰
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
threejs-shader-materials:Three.js的着色器材料集合
05-09
threejs-shader-materials Three.js的着色器材料集合 演示版 入门 安装 npm install https://github.com/MasatoMakino/threejs-shader-materials.git --save-dev 进口 threejs-shader-materials由ES6模块和TypeScript d.ts文件组成。 首先，导入类 import { HexGridMaterial } from "threejs-shader-materials" ; 并设置材料。 const geo = new SphereGeometry ( 10 , 64 , 64 ) ; const mat = new HexGridMaterial ( ) ; const mesh = new Mesh ( geo , mat ) ; scen
Three.js ShaderMaterial着色器
u014291990的博客
12-06 1782
本节课介绍下threejs如何通过ShaderMaterial来自定义Shader。
ThreeJS-3D教学十二：ShaderMaterial
最新发布
weixin_44384273的博客
07-01 1235
ShaderMaterial
THREE.ShaderMaterial
X01动力装甲的专栏
10-15 4578
THREE.ShaderMaterial THREE.ShaderMaterial是three.js中最通用、最复杂的材质之一。通过它可以使用自己的定义的做色漆，直接在webgl环境中运行。
threeJs着色器ShaderMaterial以及统一着色语言GLSL语法基本介绍
jieyucx的博客
07-21 2433
好啦，到这里我们详细介绍了three.js库中的着色器ShaderMaterial和统一着色语言GLSL的基本语法。首先介绍了ShaderMaterial在three.js中的地位以及功用。它是一种特殊的材质书写方式，让你可以编写自定义着色器。ShaderMaterial给予了我们底层的、未过滤的访问权，让我们可以编写自己的顶点（vertex）和片段（fragment）着色器程序。接着深入解析了统一着色语言GLSL（OpenGL Shading Language）的语法基础。
使用THREE.js库的 WebGL 火灾模拟器.zip
07-14
THREE.js是一个强大的JavaScript库，专门用于在Web浏览器中创建3D图形，它利用WebGL技术，这是一种基于OpenGL标准的JavaScript API，允许开发者在网页上实现高性能的交互式3D图形。在这个“使用THREE.js库的WebGL...
three.js符号线动画
04-23
three.js是一个基于WebGL的JavaScript库，用于在浏览器中构建3D图形。通过利用这个库，开发者能够实现复杂的3D场景，包括动态和交互式的线动画效果。 首先，我们要理解`trail.html`是项目的主要HTML文件，它包含了...
three.js-线上运动的光效
10-19
three.js 是一个流行的JavaScript库，用于在Web浏览器中创建3D图形，它利用 WebGL 技术提供丰富的三维渲染功能。在这个项目中，开发者可能探索了如何在场景中添加运动的光源，从而影响物体表面的明暗变化，创造出...
three.js利用卷积法如何实现物体描边效果
10-15
在本文中，我们将深入探讨如何使用three.js库和卷积法来实现三维物体的描边效果。卷积法是一种常见的图像处理技术，在机器学习和计算机视觉领域广泛应用，它可以通过对图像进行运算来提取特征或增强特定效果。在...
Three.js shader 城市 雷达 扫描 波动 扩散效果
11-05
最后，"threejs"是我们的主要工具，它是WebGL编程的一个强大框架，简化了许多3D图形的复杂性，让我们能够专注于创意设计和动画效果。 总结来说，要实现"Three.js shader 城市 雷达 扫描 波动 扩散效果"，你需要掌握...
THREE-CustomShaderMaterial:使用您自己的顶点着色器扩展 Three.js 标准材质！
08-03
三个CustomShaderMaterial 使用您自己的顶点着色器扩展 Three.js 标准材质！ ·· 安装 npm install three-custom-shader-material # or yarn add three-custom-shader-material 对于浏览器，从build/下载文件。 这是每个文件的内容： three-csm.js - 浏览器使用[removed]标签导入三的 IIFE 类型模块。 three-csm.m.js - ES 模块。 导入三 NodeJS 方式import * as THREE from "three" three-csm.m.cdn.js - ES 模块。 从 CDN 导入三个import * as THREE from "https://cdn.skypack.dev/three"导入三个 输入 节点 在 Node
threejs10 Material-shaderMaterial
—巨人绿
10-25 1092
var sphereGeometry = new SphereBufferGeometry(5, 12, 12); var material = new THREE.MeshPhongMaterial(); var sphereMesh = new THREE.Mesh(sphereGeometry, material) scene.add(sphereMesh); var shaderMaterial = new THREE.ShaderMaterial( { vertexS
Three.js的着色器材质(ShaderMaterial)
地理信息技术杂谈 博客，欢迎技术交流
08-23 1835
ShaderMaterial简介： http://www.webgl3d.cn/threejs/docs/index.html#api/zh/materials/ShaderMaterial Three.js中可以使用自定义的着色器（shader），进行材质的渲染，并且Three.js的类库中预置了一些常用的shader，可以直接拿来进行使用，下载Three.js的类库包，可以在three\examples\js\shaders中使用对应的js文件。 使用方式 以垂直模糊为例： js引用 <scr
38 Three.js高级材质THREE.ShaderMaterial
现在学习也不晚
12-06 8536
注意 看这一篇文章最好有webgl基础的同学看，如果没有webgl原生基础，你会看得很懵逼。 简介 THREE.ShaderMaterial是Three.js库中最通用、最复杂的材质之一。通过它可以使用自己定制的着色器。直接在webgl环境中运行。着色器可以将Three.js中的JavaScript网格转换为屏幕上的像素。通过这些自定义的着色器，可以明确地指定对象如何渲染，以及如何覆盖或...
three.js之材质-ShaderMaterial介绍和使用(vue中使用three.js18)
点燃火柴的博客
11-10 4358
ShaderMaterial材质介绍和使用1.ShaderMaterial材质介绍2.demo说明3.demo代码 1.ShaderMaterial材质介绍 ShaderMaterial材质是Three.js库中功能最丰富、最复杂的一种材质，使用ShaderMaterial材质可以定制自己的着色器，直接在WebGL环境中运行，在此只根据书本中提供的示例通过vue渲染出来，后续需要在WebGL花大量精力学习，先介绍几个ShaderMaterial材质的属性 属性 描述 flatShading（
three.js 04-08 之 ShaderMaterial 材质
zhulx_sz 的博客
12-08 9570
今天我们将要介绍的高级材质叫 THREE.ShaderMaterial （我把它翻译成自定义着色器材质）。它是 three.js 库中功能最为丰富、也是最为复杂的一种高级材质。通过它，可以定义自己的着色器，直接在 WebGL 环境中运行。着色器可以将 three.js 中的 JavaScript 对象转换为屏幕上的像素。通过这些自定义的着色器，你可以明确指定你的对象如何渲染及遮盖，或者修改 thr
three.js 源码注释（五十七）Material /ShaderMaterial.js
omni360的专栏
12-28 2454
ShaderMaterial方法根据参数parameters创建为自定义着色器创建材质类型,这样的材质对象让用户扩充材质类型,有了无限的可能. parameters参数的格式看上面.ShaderMaterial对象的功能函数采用,定义构造的函数原型对象来实现.大部分属性方法继承自材质的基类Material. Example: var material = new THREE.ShaderMaterial({ uniforms: { time:{type: "f", value:
【轻松压缩，一键搞定】您的图片处理神器来了！
小豆包
05-26 553
长图片分割：再也不用担心长图无法完整显示或处理了，我们的工具能轻松将长图分割成多张图片，方便您进行后续编辑和分享。📷 无论是从相机导出的大图，还是手机拍摄的生活照，我们的工具都能轻松应对，让您的图片处理变得简单又高效！一个功能强大的图片处理工具，它可以满足用户对于图片压缩、格式转换、质量调节以及长图片分割等多种需求。批量压缩：无论您有多少张图片，无论尺寸大小，我们的工具都能一次性处理，让您的工作效率翻倍！还是追求更小的文件大小？格式转换：支持多种图片格式之间的轻松转换，满足您在不同场景下的使用需求。
three.js使用ShaderMaterial实现水晶球效果
06-06
要使用ShaderMaterial实现水晶球效果，需要先创建一个球体网格，然后创建一个自定义的着色器，最后将着色器应用到材质上。 以下是一个基本的实现示例： 1. 创建一个球体网格 ```javascript const geometry = new THREE.SphereGeometry(5, 32, 32); const material = new THREE.MeshBasicMaterial({ color: 0xffffff }); const mesh = new THREE.Mesh(geometry, material); scene.add(mesh); ``` 2. 创建着色器 ```javascript const vertexShader = ` varying vec3 vNormal; varying vec3 vPosition; void main() { vNormal = normal; vPosition = position; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `; const fragmentShader = ` varying vec3 vNormal; varying vec3 vPosition; void main() { vec3 lightPosition = vec3(0.0, 0.0, 10.0); vec3 lightDirection = normalize(lightPosition - vPosition); float diffuse = max(dot(vNormal, lightDirection), 0.0); gl_FragColor = vec4(vec3(diffuse), 1.0); } `; const uniforms = {}; const shaderMaterial = new THREE.ShaderMaterial({ uniforms, vertexShader, fragmentShader, }); ``` 上面的着色器代码使用了基本的光照计算，将球体的各个面根据光照情况渲染成不同的颜色。你可以根据需要修改着色器代码。 3. 应用材质 ```javascript mesh.material = shaderMaterial; ``` 现在，你就可以看到球体以水晶般的效果呈现在屏幕上了。 需要注意的是，由于使用了自定义的着色器，性能可能会受到影响，因此在实际应用中，应该根据需要进行优化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值