着色器语言GLSL学习

1 初步尝试

import { Scene, WebGLRenderer, OrthographicCamera, PlaneGeometry, ShaderMateria } from 'three.js'const scene = new Scene()
const camera = new OrthographicCamera(-1,1,1,-1,0.1, 10)const renderer = new WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)// 创建一个大小为2 的平面几何容器
const geometry = new PlaneGeometry(2,2)// 设置着色器材质
const material = new ShaderMaterial()// 创建网格对象 绘制平面
const plane = new mesh(geometry, material)
scene.add(plane)//设置相机z轴以便能看到平面,注意范围为0.1 - 10,即远近裁截面
camera.position.z = 1 
renderer.render(scene, camera)

2 颜色随时间改变

const fragmentShader = {uniform float u_time;void main() {vec3 color = vec3((sin(u_time) + 1.0) /2.0, 0.0, (cos(u_time) + 1.0) /2.0);gl_FragColor = vec4(color, 1.0);}
}const uniforms = {u_time: { value: 0.0 }
}const clock =  new THREE.Clock()function animate(){requestAnimation(animate)uniforms.u_time.value += clock.getDelta()renderer.render(scene, camera)
}

3 混合

用法:mix(a,b,c)
公式:a*(1-c)+b*c, 0<=c<=1

4

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/633675.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

springcloud之链路追踪

写在前面 源码 。 本文一起来看下链路追踪的功能&#xff0c;链路追踪是一种找出病因的手段&#xff0c;可以类比医院的检查仪器&#xff0c;服务医生治病救人&#xff0c;而链路追踪技术是辅助开发人员查找线上问题的。 1&#xff1a;为什么微服务需要链路追踪 孔子同志月过…

中仕公考:国考进面后资格复审需要准备什么?

参加国考面试的考生在资格审核阶段需要准备以下材料&#xff1a; 1、本人身份证、学生证或工作证复印件。 2、公共科目笔试准考证复印件。 3、考试报名登记表。 4、本(专)科、研究生各阶段学历、学位证书(应届毕业生没有可以暂时不提供)。 5、报名资料上填写的各类证书材料…

剑指 Offer 40.最小的k个数

剑指 Offer 40.最小的k个数 剑指 Offer 40.最小的k个数 设计一个算法&#xff0c;找出数组中最小的k个数。以任意顺序返回这k个数均可。 示例&#xff1a; 输入&#xff1a; arr [1,3,5,7,2,4,6,8], k 4 输出&#xff1a; [1,2,3,4] 提示&#xff1a; 0 < len(arr) &l…

Spring Boot3 跨域配置 Cors

什么是CORS&#xff1f; CORS&#xff0c;全称是“跨源资源共享”&#xff08;Cross-Origin Resource Sharing&#xff09;&#xff0c;是一种Web应用程序的安全机制&#xff0c;用于控制不同源的资源之间的交互。 在Web应用程序中&#xff0c;CORS定义了一种机制&#xff0c…

前端:布局(用于div中有多行元素,一行只显示四个,最左或最右要紧贴父div,最顶层和最底层也要紧贴父div)

效果 一、flex实现 html <!DOCTYPE html> <html><head><title>Flexbox Layout</title><style>.container {display: flex;flex-wrap: wrap;justify-content: space-between;gap: 10px;border: 1px solid red;}.box {flex: 1 0 calc(25% …

2023年中国传感器行业研究报告(附传感器产业链全景图谱)

​传感器是一种通常由敏感元件和转换元件组成的检测装置&#xff0c;测量并感知信息后&#xff0c;通过变换让传感器中的数据或价值信息转换成电信号或其他所需形式的输出&#xff0c;以满足信息的传输、处理、存储、显示、记录和控制等要求。传感器是数字经济时代关键的硬件入…

4.Swing常用组件

Swing常用组件 4. Swing常用组件4.1 面板组件4.1.1 JPanel4.1.1.1 构造方法4.1.1.2 常用方法 4.1.2 JScrollPane4.1.2.1 构造方法4.1.2.2 常用方法 4.2 文本组件4.2.1 JTextField4.2.1.1 构造方法4.2.1.2 常见方法 4.2.2 JTextArea4.2.2.1 构造方法4.2.2.2 常见方法 4.3 标签组…

Educational Codeforces Round 161 (Rated for Div. 2) B 2的零次方竟然是1

目录 心情&#xff1a; 55.999999999999993&#xff1a; 题意&#xff1a; 思路&#xff1a; 核心代码&#xff1a; 心情&#xff1a; Div.2&#xff0c;我竟然在50分钟内C题做掉了&#xff0c;想着B题做了基本上不会掉分了这把&#xff0c;B题要考什么我也清楚&#xff0…

【Kafka】Kafka介绍、架构和概念

目录 Kafka介绍Kafka优势Kafka应用场景Kafka基本架构和概念ProducerConsumer/Consumer GroupBrokerZooKeeperTopicPartitionReplicasOffsetsegment Kafka介绍 Kafka是是一个优秀的分布式消息中间件&#xff0c;关于常用的消息中间件对比可参考文章&#xff1a;消息中间件概述。…

【Docker】Nacos的单机部署及集群部署

一、Nacos的介绍 Nacos是一个更易于构建云原生应用的动态服务发现、配置管理和服务管理平台。 动态服务发现&#xff1a;Nacos支持DNS与RPC服务发现&#xff0c;提供原生SDK、OpenAPI等多种服务注册方式和DNS、HTTP与API等多种服务发现方式。服务健康监测&#xff1a;Nacos提供…

Python数据分析案例32——财经新闻爬虫和可视化分析

案例背景 很多同学的课程作业都是需要自己爬虫数据然后进行分析&#xff0c;这里提供一个财经新闻的爬虫案例供学习。本案例的全部数据和代码获取可以参考&#xff1a;财经新闻数据 数据来源 新浪财经的新闻网&#xff0c;说实话&#xff0c;他这个网站做成这样就是用来爬虫的…

鸿蒙开发(五)鸿蒙UI开发概览

从用户角度来讲&#xff0c;一个软件拥有好看的UI&#xff0c;那是锦上添花的事情。再精确的算法&#xff0c;再厉害的策略&#xff0c;最终都得通过UI展现给用户并且跟用户交互。那么&#xff0c;本篇一起学习下鸿蒙开发UI基础知识&#xff0c;认识下各种基本控件以及使用方式…

Zoho Survey评价:功能全面,值得一试

通常来讲&#xff0c;我们在使用一款问卷调查制作工具制作问卷时会有哪些需求呢&#xff1f; 用户需求 1、操作简单&#xff0c;易上手。 2、能够满足用户个性化的需求。 3、提供多语言服务。 4、能够帮助发布以及数据收集。 5、简化数据分析 市面上的问卷调查制作工具都…

如何学习一些需要算法的程序

如何看懂一个程序&#xff0c;分三步&#xff1a; 流程每个语句的功能试数 如何学习一些需要算法的程序【如何掌握一个程序】&#xff1a; 尝试自己去编程解决它 但要意识到大部分人都是自己无法解决的&#xff0c;如果解决不了&#xff0c;这时不要气馁&#xff0c;如果十五…

探索FTP:原理、实践与安全优化

引言 在正式开始讲解之前&#xff0c;首先来了解一下文件存储的类型有哪些。 DAS、SAN和NAS是三种不同的存储架构&#xff0c;分别用于解决不同场景下的数据存储需求。 DAS (Direct Attached Storage 直接附加存储)&#xff1a;DAS 是指将存储设备&#xff08;如硬盘&#x…

阿里云国外云服务器地域、收费标准及活动报价参考

阿里云国外服务器优惠活动「全球云服务器精选特惠」&#xff0c;国外服务器租用价格24元一个月起&#xff0c;免备案适合搭建网站&#xff0c;部署独立站等业务场景&#xff0c;阿里云服务器网aliyunfuwuqi.com分享阿里云国外服务器优惠活动&#xff1a; 全球云服务器精选特惠…

AI语音合成工具-Lalamu Studio

近期&#xff0c;Lalamu Studio开启了beta版本测试&#xff1a;Lalamu Studio。该工具整合了TTS和lip sync功能&#xff0c;可以让任意视频中的人物开口说话&#xff0c;并精确模拟口型。 例如&#xff0c;选择一段视频素材&#xff0c;添加由Ai合成的语音&#xff0c;即可完成…

2024年甘肃省职业院校技能大赛信息安全管理与评估 样题三 模块二

竞赛需要完成三个阶段的任务&#xff0c;分别完成三个模块&#xff0c;总分共计 1000分。三个模块内容和分值分别是&#xff1a; 1.第一阶段&#xff1a;模块一 网络平台搭建与设备安全防护&#xff08;180 分钟&#xff0c;300 分&#xff09;。 2.第二阶段&#xff1a;模块二…

李沐深度学习-softmax从零开始

import torch import torchvision import numpy as np import syssys.path.append("路径") import d2lzh_pytorch as d2l 1. 获取和读取数据 2. 初始化参数和模型 3. 定义softmax运算 4. 定义模型 5. 定义损失函数&#xff1a;交叉熵损失函数 6. 定义分类准确率 7. 训…

为什么要选择“零代码”开发的智慧能源管理平台?

全球低代码市场发展较早&#xff0c;集中度逐渐凸显&#xff0c;零代码市场尙未形成市场格局&#xff0c;很多企业出现“业务部门不懂技术&#xff0c;技术部门不懂业务”的现象往往会制约软件的开发进度&#xff0c;如何快速搭建软件系统应用&#xff0c;助力业务增长与效率提…