Threejs 中学shader003----绘制矩形

做一个黑框

1、botton-left 黑框

左边和底部有一个黑边,那么让让坐标大于(0.1,0.1)的像素颜色值都为白色。代码为:

float left = st.x > 0.1 ? 1. : .0;
float bottom = st.y > 0.1 ? 1. : .0;
color = vec3(left * bottom);

效果为:
在这里插入图片描述

上面的代码还可以使用glsl内建函数step实现, 大部分都使用这种方式, 效果相同:

float left = step(0.1,st.x);
float bottom = step(0.1,st.y);
color = vec3(left * bottom);

step函数还可以操作向量,这样还可以精简为:

vec2 bl = step(vec2(0.1),st);
color = vec3(bl.x * bl.y);
2、几种变形
  1. 情况A
    st.x大于0.1的部分设置为白色,小于0.1的部分设置为黑色。
float pct = step(0.1,st.x);
color = vec3(pct);

在这里插入图片描述

  1. 情况B
    将上面的情况A颜色分别对应取反。
float pct = 1.-step(0.1,st.x);
color = vec3(pct);

在这里插入图片描述

  1. 情况C
    常规操作,大于0.9的部分设置为白色。
float pct = step(1.-0.1,st.x);
color = vec3(pct);

在这里插入图片描述

  1. 情况D
    常规操作,直接理解即可, 同时它也是情况C的对应颜色取反。
float pct = step(0.1,1.-st.x);
color = vec3(pct);

在这里插入图片描述

综上: 实践中根据实际情况选择不同的处理方式。

3、top-right黑框

我们想让top 和 right 有黑框, 那么我们可以这样:

float right = 1. - step(0.9, st.x);
float top = 1. - step(0.9, st.y);
color = vec3(right * top);

在这里插入图片描述

也可以这样:

float right = step(.1, 1. - st.x);
float top = step(.1, 1. - st.y);
color = vec3(right * top);
4、完整黑框
vec2 bl = step(vec2(.1), st);
vec2 tr = step(vec2(.1), 1.-st);
color = vec3(bl.x * bl.y * tr.x * tr.y);

在这里插入图片描述

附: 完整黑框完整代码
<style>
  body {
    margin: 0;
    padding: 0;
    background-color: green;
  }

  #container {
    position: fixed;
    width: 200px;
    height: 300px;
    background-color: #fff;
  }

</style>
<script src="../three.min.js"></script>
<script id="vertexShader" type="x-shader/x-vertex">
    void main() {
        gl_Position = vec4( position, 1.0 );
    }
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
    uniform vec2 u_resolution;
    void main(){
        vec2 st = gl_FragCoord.xy / u_resolution.xy;
        float aspect = u_resolution.x / u_resolution.y;
        vec3 color = vec3(0.0);

        vec2 bl = step(vec2(.1), st);
        vec2 tr = step(vec2(.1), 1.-st);
        color = vec3(bl.x * bl.y * tr.x * tr.y);

        gl_FragColor = vec4(color,1.0);
    }
</script>
<div id="container"></div>

<script>
  let container;
  let camera, scene, renderer;
  let uniforms;

  function init() {
    container = document.getElementById('container');
    camera = new THREE.Camera();
    camera.position.z = 1;
    scene = new THREE.Scene();
    var geometry = new THREE.PlaneBufferGeometry(2, 2);
    uniforms = {
      u_time: { type: "f", value: 1.0 },
      u_resolution: { type: "v2", value: new THREE.Vector2() },
      u_mouse: { type: "v2", value: new THREE.Vector2() }
    };

    var material = new THREE.ShaderMaterial({
      uniforms: uniforms,
      vertexShader: document.getElementById('vertexShader').textContent,
      fragmentShader: document.getElementById('fragmentShader').textContent
    });

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

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

    container.appendChild(renderer.domElement);

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

    document.onmousemove = function (e) {
      uniforms.u_mouse.value.x = e.pageX
      uniforms.u_mouse.value.y = e.pageY
    }
  }

  function onWindowResize(event) {
    container = document.getElementById('container');
    let w = container.clientWidth
    let h = container.clientHeight
    renderer.setSize(w, h);
    uniforms.u_resolution.value.x = renderer.domElement.width;
    uniforms.u_resolution.value.y = renderer.domElement.height;
    // console.error(uniforms.u_resolution)
  }

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

  function render() {
    uniforms.u_time.value += 0.05;
    renderer.render(scene, camera);
  }

  init();
  animate();
</script>
Shader-school是一个用于GLSL着色器和图形编程的workshopper。它提供了关于GLSL着色器的介绍以及如何在浏览器中运行图形编程的教程。要运行这个workshopper,首先需要在浏览器中安装WebGL,以及node.js和git插件的拷贝。它可以帮助你学习和掌握GLSL着色器编程的基础知识和技巧。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [shader-school, 用于GLSL着色器和图形编程的workshopper.zip](https://download.csdn.net/download/weixin_38743737/11769657)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [shader-school的渲染入门系列(二)](https://blog.csdn.net/feetcrack/article/details/78536045)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [shader-school的渲染入门系列(一)](https://blog.csdn.net/feetcrack/article/details/78535349)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值