three.js shader例子

最新推荐文章于 2024-09-28 15:53:17 发布
最新推荐文章于 2024-09-28 15:53:17 发布
阅读量502 收藏 1
点赞数 1
分类专栏： 3D 编程 数学
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mu399/article/details/109473946
版权

使用 shader 绘制 五角星线段，mix 合并图层

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>五角星线段</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;
    mat4 mvp = projectionMatrix * modelViewMatrix;
    gl_Position = mvp * vec4( position, 1.0 );
  }
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
  uniform vec2 u_resolution;
  uniform float u_time;
  varying vec2 pos;

  vec4 _OutlineColor = vec4(1.0,1.0,1.0,1.0);
  vec4 _FrontColor = vec4(1.0,0.0,0.0,1.0);

  float pi=3.14159;
  float _Antialias=0.01;

  //画点
  vec4 circle(vec2 pos, vec2 center, float radius, vec4 color) {
    //求点是否在圆的半径内
    float d = length(pos - center) - radius;
    //fwidth(x) ==abs(ddx(x)) + abs(ddy(x))，对点求偏导，这种处理能让数据变平滑
    float w = fwidth(0.5*d) * 2.0;
    //图层0 画圆外边框
    vec4 layer0 = vec4(_OutlineColor.rgb, 1.0-smoothstep(-w, w, d - _Antialias));
    //图层1 画内圆
    vec4 layer1 = vec4(color.rgb, 1.0-smoothstep(0.0, w, d));
    //混合两个图层并返回
    return mix(layer0, layer1, layer1.a);
//    return layer0;
  }
  //画线
  vec4 line(vec2 pos, vec2 point1, vec2 point2, float width) {
    //分别求出点二到点一以及当前点到点一的向量
    vec2 dir0 = point2 - point1;
    vec2 dir1 = pos - point1;
    //dot()方法返回两个向量的点积 如果向量垂直返回0，平行返回1 相反返回-1
    //clamp()方法限制返回0到1 截出线段，不然会返回直线
    //这公式返回点到线上的距离
    float h = clamp(dot(dir1, dir0)/dot(dir0, dir0), 0.0, 1.0);
    //判断点是否在线的两边范围内
    float d = (length(dir1 - dir0 * h) - width * 0.5);
    //平滑处理
    float w = fwidth(0.5*d) * 2.0;
    //画线的外边
    vec4 layer0 = vec4(_OutlineColor.rgb, 1.-smoothstep(-w, w, d - _Antialias));
    //画线
    vec4 layer1 = vec4(_FrontColor.rgb, 1.-smoothstep(-w, w, d));
    //混合两个图层
    return mix(layer0, layer1, layer1.a);
  }

  //根据index来保存图层的颜色值
  void setlayer(inout vec4 layer[5],int index,vec4 val){
    if(index==0)
    layer[0]=val;
    if(index==1)
    layer[1]=val;
    if(index==2)
    layer[2]=val;
    if(index==3)
    layer[3]=val;
    if(index==4)
    layer[4]=val;
  }

  void main() {
    vec2 uv = pos * 3.0 - 1.5;
    //动态背景颜色
    vec3 col = 0.5 + 0.5*cos(u_time+uv.xyx+vec3(0.0, 2.0, 4.0));
    vec4 fragColor=vec4(col,1.0);
    //点的图层
    vec4 layers[5];
    float d=u_time*10.0;
    //保存五个点 从1开始
    vec2 degree[6];
    //for循环创建五个点
    for(int i=0;i<=4;i++){
      //保存点
      //坐标上圆边上的点的坐标(cos(r),sin(r)) r为弧度
      degree[i+1]=vec2(cos(d*pi/180.0),sin((d*pi)/180.0));
      //绘制点
      setlayer(layers, i, circle(uv, degree[i+1], 0.06, _FrontColor) );
      //圆上的五角星，每个点相隔72度
      d+=72.0;
    }
    //for循环画五条线
    for(int i=1;i<6;i++){
      vec2 point1=vec2(0.0,0.0);
      //判断连线的位置 即当前点的隔一个点
      if(i<=2) {
        point1=degree[i+3];
      } else {
        point1=degree[i-2];
      }
      //画线
      vec4 temp=line(uv,degree[i],point1,0.02);
      //混合线的图层
      fragColor=mix(fragColor, temp, temp.a);
    }
    //混合点的图层
    for (int i = 4; i >= 0; i--) {
      fragColor = mix(fragColor, layers[i], layers[i].a);
    }
    gl_FragColor = fragColor;
  }
</script>
<script>
  //https://blog.csdn.net/ssssssilver/article/details/81166233
  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(0, 0, 2);

    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,
      side: THREE.DoubleSide,
      vertexShader: document.getElementById( 'vertexShader' ).textContent,
      fragmentShader: document.getElementById( 'fragmentShader' ).textContent
    } );
    material.extensions.derivatives = true;
    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 );
    renderer.setClearColor( '#f4f4f4', 1 );

    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.02;
    renderer.render( scene, camera );
  }
</script>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>雨伞</title>
  <script src="../lib/three.js"></script>
  <script src="../lib/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;
    mat4 mvp = projectionMatrix * modelViewMatrix;
    gl_Position = mvp * vec4( position, 1.0 );
  }
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
  uniform vec2 u_resolution;
  uniform float u_time;
  varying vec2 pos;

  float sdfCircle(vec2 center, float radius, vec2 coord ) {
    vec2 offset = coord - center;

    return sqrt((offset.x * offset.x) + (offset.y * offset.y)) - radius;
  }

  float sdfEllipse(vec2 center, float a, float b, vec2 coord) {
    float a2 = a * a;
    float b2 = b * b;
    return (b2 * (coord.x - center.x) * (coord.x - center.x) +
    a2 * (coord.y - center.y) * (coord.y - center.y) - a2 * b2)/(a2 * b2);
  }

  float sdfLine(vec2 p0, vec2 p1, float width, vec2 coord) {
    vec2 dir0 = p1 - p0;
    vec2 dir1 = coord - p0;
    float h = clamp(dot(dir0, dir1)/dot(dir0, dir0), 0.0, 1.0);
    return (length(dir1 - dir0 * h) - width * 0.5);
  }

  float sdfUnion( const float a, const float b ) {
    return min(a, b);
  }

  float sdfDifference( const float a, const float b) {
    return max(a, -b);
  }

  float sdfIntersection( const float a, const float b ) {
    return max(a, b);
  }

  vec4 render(float d, vec3 color, float stroke) {
    //stroke = fwidth(d) * 2.0;
    float anti = fwidth(d) * 1.0;
    vec4 strokeLayer = vec4(vec3(0.05), 1.0-smoothstep(-anti, anti, d - stroke));
    vec4 colorLayer = vec4(color, 1.0-smoothstep(-anti, anti, d));

    if (stroke < 0.000001) {
      return colorLayer;
    }
    return vec4(mix(strokeLayer.rgb, colorLayer.rgb, colorLayer.a), strokeLayer.a);
  }

  void main() {
    float pixSize = 1.0 / 512.0;
    vec2 uv = pos;
    float stroke = pixSize * 1.5;
    vec2 center = vec2(0.5, 0.5 );

    float a = sdfEllipse(vec2(0.5, center.y*2.0-0.34), 0.25, 0.25, uv);
    float b = sdfEllipse(vec2(0.5, center.y*2.0+0.03), 0.8, 0.35, uv);
    b = sdfIntersection(a, b);
    vec4 layer1 = render(b, vec3(0.32, 0.56, 0.53), fwidth(b) * 2.0);

    // Draw strips
    vec4 layer2 = layer1;
    float t, r0, r1, r2, e, f;
    vec2 sinuv = vec2(uv.x, (sin(uv.x*40.0)*0.02 + 1.0)*uv.y);
    for (float i = 0.0; i < 10.0; i++) {
      t = mod(3.14 + 0.3 * i, 3.0) * 0.2;
      r0 = (t - 0.15) / 0.2 * 0.9 + 0.1;
      r1 = (t - 0.15) / 0.2 * 0.1 + 0.9;
      r2 = (t - 0.15) / 0.2 * 0.15 + 0.85;
      e = sdfEllipse(vec2(0.5, center.y*2.0+0.37-t*r2), 0.7*r0, 0.35*r1, sinuv);
      f = sdfEllipse(vec2(0.5, center.y*2.0+0.41-t), 0.7*r0, 0.35*r1, sinuv);
      f = sdfDifference(e, f);
      f = sdfIntersection(f, b);
      vec4 layer = render(f, vec3(1.0, 0.81, 0.27), 0.0);
      layer2 = mix(layer2, layer, layer.a);
    }


    // Draw the handle
    float bottom = 0.08;
    float handleWidth = 0.01;
    float handleRadius = 0.04;
    float d = sdfCircle(vec2(0.5-handleRadius+0.5*handleWidth, bottom), handleRadius, uv);
    float c = sdfCircle(vec2(0.5-handleRadius+0.5*handleWidth, bottom), handleRadius-handleWidth, uv);
    d = sdfDifference(d, c);
    c = uv.y - bottom;
    d = sdfIntersection(d, c);
    c = sdfLine(vec2(0.5, center.y*2.0-0.05), vec2(0.5, bottom), handleWidth, uv);
    d = sdfUnion(d, c);
    c = sdfCircle(vec2(0.5, center.y*2.0-0.05), 0.01, uv);
    d = sdfUnion(c, d);
    c = sdfCircle(vec2(0.5-handleRadius*2.0+handleWidth, bottom), handleWidth*0.5, uv);
    d = sdfUnion(c, d);
    vec4 layer0 = render(d, vec3(0.404, 0.298, 0.278), stroke);

    vec2 p = 2.0*uv - 1.0;
    vec3 bcol = vec3(1.0,0.8,0.7-0.07*p.y)*(1.0-0.25*length(p));
    vec4 fragColor = vec4(bcol, 1.0);
    fragColor.rgb = mix(fragColor.rgb, layer0.rgb, layer0.a);
    fragColor.rgb = mix(fragColor.rgb, layer1.rgb, layer1.a);
    fragColor.rgb = mix(fragColor.rgb, layer2.rgb, layer2.a);

    fragColor.rgb = pow(fragColor.rgb, vec3(1.0/2.2));
    gl_FragColor = fragColor;
  }
</script>
<script>
  //https://blog.csdn.net/ssssssilver/article/details/81166233
  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(0, 0, 2);

    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,
      side: THREE.DoubleSide,
      vertexShader: document.getElementById( 'vertexShader' ).textContent,
      fragmentShader: document.getElementById( 'fragmentShader' ).textContent
    } );
    material.extensions.derivatives = true;
    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 );
    renderer.setClearColor( '#f4f4f4', 1 );

    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.02;
    renderer.render( scene, camera );
  }
</script>
</body>
</html>

https://sites.google.com/site/webglbook/

从杰
关注
专栏目录
Three.js Shader 入门指南：学习 JavaScript 中的高级图形渲染技术
debug_bug142的博客
09-20 156
我们介绍了 Shader 的基本概念，展示了如何创建 Three.js 场景，并演示了如何使用自定义的顶点着色器和片段着色器来控制渲染过程。在 Three.js 中使用 Shader，我们需要编写 GLSL 代码，并将其加载到 Three.js 中。在 Three.js 中，Shader 是一种编程语言，用于控制图形渲染的各个阶段，例如顶点着色器和片段着色器。通过在片段着色器中添加更多的代码，您可以实现更多的渲染效果。接下来，我们需要将顶点着色器代码加载到 Three.js 中，并将其应用于我们的几何体。
THREE.Cloud:用于Three.js的基于光线跟踪的云对象
05-11
Three.js的基于射线跟踪的云对象。 例子 var scene = new THREE . Scene ( ) ; var cloud = new THREE . Cloud ( 0xeeeeee ) ; cloud . scale . set ( 3 , 3 , 3 ) ; cloud . position . set ( 0 , 1 , 0 ) ; cloud ...
跳动的心（three.js,shader）
01-23
结合three.js，shader打造跳动的心， 凑字数 。
Three.js-Shaders着色器
damadashen的博客
07-15 2800
Three中着色器、glsl的介绍及使用，使用着色器实现旗帜飘动效果案例。
【Threejs进阶教程-着色器篇】8. Shadertoy如何使用到Threejs-基础版
最新发布
qq_42760477的博客
09-28 1264
【Threejs进阶教程-着色器篇】8. Shadertoy如何使用到Threejs-基础版，本文主要讲解如何搬运简单的Shadertoy效果到Threejs
three.js的shader应用
07-14
一个会动的shader （1）在Vertex shader中读入一幅纹理，用纹理中的值来改变顶点的位置； （2）在Fragment shader中实现更复杂的色彩变化动画/用纹理来控制色彩分布
Three.js shader 城市 雷达 扫描 波动 扩散效果
11-05
Three.js shader 城市 雷达 扫描 波动 扩散效果
three.js使用shader材质
A873054267的博客
06-14 742
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/three.min.js"></script> <script src="../js/OrbitControls.js"></script> <.
magicshader:three Three.js的小助手，用于调试和编写着色器
05-05
:warning: 可能不适用于现代版本的threejs，上次我测试的是r114 欢迎pr RawShaderMaterial顶部的薄包装，可轻松创建新制服并通过dat.gui实时编辑。 无需手动创建制服并将其与dat.gui绑定。 只需在GLSL中写一些...
three.js-dev-examples-models.zip
08-26
Three.js是一个基于WebGL的JavaScript库，它使得在浏览器中创建3D图形变得简单易行。这个压缩包"three.js-dev-examples-models.zip"包含了与Three.js相关的模型示例，是学习和理解如何在Web环境中加载和展示3D模型的...
使用3D引擎threeJS实现星空粒子移动效果
11-30
在本文中，我们将深入探讨如何使用JavaScript库Three.js来实现一个星空粒子移动的效果。Three.js是一个强大的工具，它允许开发者在浏览器中创建丰富的3D图形，包括粒子系统、光照、材质以及相机控制等多个方面。 ...
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学习笔记(十四)——Shaders着色器
hongsir的博客
05-11 9283
什么是着色器？ 实际上着色器是WebGL的主要组件之一。如果我们在没接触Three.js情况下开始学习WebGL，着色器将是我们首先且必须要学的知识，这也是为什么原生WebGL很难入门。 着色器是一种使用GLSL(OpenGL Shading Language)编写并在GPU上运行的程序。它们被用于定位几何体的每个顶点，并为该几何体的每个可见像素着色。使用“像素Pixel”来描述其实并不准确，因为渲染的每个点不一定与屏幕上的每个像素相匹配，因此我们更倾向于使用术语“片元fragment”。 之后我们会向着色
three.js的着色器（巨详细 初学者 大白话）
小小程序猿洋的博客
04-24 1767
three.js就不过多介绍了 可以看另一篇文章 总结就是场景 相机 和 渲染器学起来 也比较轻松后来看到了着色器 给我整懵乐了 一会一个API 一会一个API 都没见过 然后就一点点去学习 真的是费了好大劲了 需要知道很多新东西 才能初步知道和使用着色器当然如果只是简单的使用着色器 比如就画一个点 加个颜色还是很容易的我想做的是一个几个顶点确定一个平面 并且颜色是渐变色的（之前还好奇渐变色是怎么做的 就是 顶点间的颜色不同 两个顶点间就会有过渡色了）上最后效果图。
Three.js的Shader展示16张瓦片图
weixin_63443072的博客
05-30 169
【代码】Three.js的Shader展示16张瓦片图。
手把手带你入门 Three.js Shader 系列（一）
Deserts_X的博客
05-15 499
正式开启 Three.js Shader 教程，在本篇文章里带大家看看几何体上的顶点属性，介绍下 GLSL 基础、顶点着色器、片元着色器等内容。
THREE.js通过修改已有材质 实现自定义shader
宏斌的博客
12-31 940
这个方法第一个参数中有材质的glsl代码，在计算前修改材质的glsl代码 插入自己的代码即可以实现自定义shader并且继承提供类的光线，贴图，物理等能力，不用自己写对应的glsl非常有意思。three.js的material提供了一个方法用来修改材质。通过修改uniform来更改颜色实现上图的效果。
Extjs 4.2 MVC+ThreeJs学习笔记（三）Shader（着色器）
weixin_30933531的博客
12-10 136
　　Shader的定义 　　维基百科中Shader的定义是：应用于计算机图形学领域，指一组供计算机图形资源在执行渲染任务时使用的指令。程序员将着色器应用于图形处理器（GPU）的可编程流水线，来实现三维应用程序。这样的图形处理器有别于传统的固定流水线处理器，为GPU编程带来更高的灵活性和适应性。通俗来说Shader就是运行在GPU中的一段代码，只管3D模型什么时候是什么颜色的程序，这样3D场景的渲...
threejs(webgl)-shader入门教程(1)
stonerao
06-16 4278
简介 shader是什么？ shader是一个用GLSL编写的小程序，也就是着色器语言，我们可以通过shader来编写顶点着色器和片元着色器，在WEBGL编程一书中 25-26页有详细说明 shader在Three.js中如何使用？ threejs提供了关于shader的材质 RawShaderMaterial 和 ShaderMaterial 两种编写shader的材质。 RawShaderMaterial：不内置uniforms和attributes ShaderMaterial：内置一些需要的参数，
three.js 天空盒例子
06-07
以下是一个使用 SkyBox 实现天空盒的 three.js 示例代码： ```javascript // 创建场景、相机和渲染器 var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值