qq_21476953的博客

文章:使用RampTexture来控制diffuse shading https://www.cnblogs.com/tekkaman/p/3978942.html教程 https://subscription.packtpub.com/book/game_development/9781849695084/1/ch01lvl1sec14/creating-a-ramp-texture-to-control-diffuse-shadingRampTexture(渐变纹理)利用Lambert漫反.

参考:three.js各种材质的实现源码phong-demoblinn-phone镜面反射(Specular)因其反射有明显方向性，所以观察者的视角决定了反射光线的有无，明暗；实现方式：Phong (r dot v)，即光反射方向和视角方向越重合，反射越强；Blinn-Phong (n dot h)，即法线方向和半角方向越重合，反射越强；效果(只有镜面光照):1、Phongr dot v// 面的法线vec3 N = normalInterp;// 光到顶点的方向.

高光最终效果:顶点着色器:uniform vec3 uLightDir;uniform vec3 uHighlightOffset;uniform float uHightlightRange;varying float weight1;varying float weight2;void main() { gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); vec3 lightDir

04_屏幕uv最终效果:1、屏幕uv以屏幕为uv。vs:void main() { gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );}fs:uniform vec2 uResolution;void main() { vec2 screenPos = gl_FragCoord.xy/uResolution; gl_FragColor = vec4(screenPos,0., 1.

05_dither(抖动)最后效果：vsuniform vec3 uLightDir;uniform vec3 uHighlightOffset;uniform float uHightlightRange;varying float lambertWeight;// lambertfloat lambert() { vec3 objNor = normalize( normalMatrix* normal.xyz); vec3 lightNor = normalize(norm

10_fresnel(菲涅尔)1、原理原理:效果:正对着屏幕是折射颜色,远离屏幕是反射颜色。2、代码vs:uniform float fresnelPower;varying float fresnel;void main() { vec4 pos = vec4(position, 1.0); vec4 viewPos = modelViewMatrix * pos; gl_Position = projectionMatrix * viewPos; vec3 vi

08_Ambient(环境光)根据法线方向,将环境光分为三个部分,顶、低、侧面。vs:varying vec3 nDir;void main() { nDir = normalize( normalMatrix * normal.xyz ); gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );}fs:// 顶点的法线varying vec3 nDir;uniform vec

作者: DSLMing参考:FunWithWebGL2 012-Phong LightingLambert 漫反射1、光照模型Phong模型: 环境光 + 漫反射 + 镜面反射。Lambert的模型: 漫反射。2、Lambert漫反射是模拟光照到粗糙的物体表面的效果，会考虑到光的射入方向，但是不考虑观察者的视线方向，垂直射入的光线会比斜着射入的光线更加的明亮。光线方向与模型表面的法线方向夹角越小应该看上去越亮。这一特性可以用点乘表示。计算公式: Diffuse = kDiffuse

glsl-perturb-normal 代码出处参考1参考209_法线贴图最后效果:vs:// https://github.com/glslify/glsl-perturb-normalvarying vec2 vUv;varying vec3 vViewPosition;varying vec3 vNormal;varying vec3 lDir;void main() { vec4 pos = vec4(position, 1.0); vec4 viewPos = m

说明这是一套学习技术美术的笔记,使用webgl three.js shader的实现版。庄懂的教程 https://www.bilibili.com/video/av95182791教程配套笔记 https://blog.csdn.net/weixin_43803133/article/details/109618118教程资料仓库(github): https://github.com/BoyanTata/AP01教程资料仓库(gitee) git@gitee.com:zeroxer/AP01

蜻蜓可视化3D科普展示蜻蜓体验地址3d模型出处主要技术是Three.js,详细代码可以通过浏览器源码????。<全文结束>

文字教程热点代码教程几何图标签热点效果例子d3中的提示工具热点效果例子相机控制045-热点标注最后效果:在线体验1、热点热点使用THREE.Sprite,纹理用canvas绘制出来。HotPoint.jsexport default class HotPoint { constructor(stage, index, position) { const me...

B样条教程样条曲线-CatmullRom1、样条曲线所谓样条曲线是指给定一组控制点而得到一条曲线，曲线的大致形状由这些点予以控制，一般可分为插值样条和逼近样条两种。插值样条:要求必须经过给定所有数据点代表算法有: CatmullRom[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ti3NFqOB-1583139161096)(002.png)]逼...

代码出处文字教程动态纹理-基于多帧合成图片1、定义动态纹理TextureAnimator.js 代码import * as THREE from './lib/three.module.js'export default class TextureAnimator { constructor(texture, tilesHoriz, tilesVert, numTiles, t...

教程地址参考代码034-图片展开可以展开图片的平面:Plane.jsimport * as THREE from './lib/three.module.js'import { fragment } from "./glsl.fragment.js";import { vertex } from "./glsl.vertex.js";const gsap = window.gsa...

参考教程参考代码032-绘制宽线Line.jsimport * as THREE from './lib/three.module.js'THREE.ShaderChunk['meshline_vert'] = [ '', THREE.ShaderChunk.logdepthbuf_pars_vertex, THREE.ShaderChunk.fog_pars_verte...

参考:在线体验代码出处更新原理: texSubImage2D参考教程UpdatableTexture.jsimport * as THREE from './lib/three.module.js'export default class UpdatableTexture extends THREE.Texture { isUpdatableTexture = true c...

代码出处:https://github.com/mattdesl/three-line-2d/tree/master/test/shader-dash.js参考文章：https://mattdesl.svbtle.com/drawing-lines-is-hard031-绘制虚线-自定义shader实现最后效果:1、使用Three.js 内置方法App.jsaddLine() {...

028-动态选择框-数据纹理通过生成纹理数据，构造一个选择框。1、关键代码App.jsclass App { generateDataTexture() { // 生成数据纹理并初始化为白色。 var width = 200; var height = 200; var data = new Uint8Array(width * height * 4)...

加载obj文件关键步骤: let pingObj = await readFile("./module/ping.obj") let loaderObj = new THREE.OBJLoader() // 将字符串转化为数组 let objStr = Uint8ArrayToString(Uint8Array.from(pingObj)) let obj = loaderO...

通过操作数据合并图片因为这种方式只是单纯的操作数组,不涉及操作dom，为后面 webassembly 合并图片提供可能。1、Image 数据结构canvas 或者 image 的数据都是 Uint8Array。let imgData = ctx.getImageData(0, 0, w, h)每个像素由4个值构成, 分别对应RGBA。例如第一个像素的构成:R: imgData.dat...

文本代码 中的第26篇。026-局部纹理刷新在版本 Three.js 113中, 纹理是.jpg格式的图片可以， .png格式不可以。App.jsclass App { ... // 增加一个立方体 addBox() { var loader = new THREE.TextureLoader(); const texture = loader.load('...

025-几何造型-立方体生成顶点数据:export default class BoxData { constructor({ width, height, depth }) { // 参数检查 width = width || 1; height = height || 1; depth = depth || 1; // 顶点索引 le...

用node.js 渲染 Three.js。首先,安装依赖:package.json{... "devDependencies": { "pngjs": "^3.4.0", "three": "^0.112.1", "three-software-renderer": "https://github.com/lanceschi/three-software-rend...

参考:https://www.cnblogs.com/softimagewht/p/4750847.htmlThreeJS 给 Shader传参一、Shader三种变量类型（uniform, attribute 和varying）1、uniform顶点着色器和片元着色器都可以使用一般用来传递：变换矩阵，材质，光照参数和颜色等信息用法: 外部(js)给着色器传数据// 着色器...

出处ThreeJS计算工具three-utils.js1、获取任意深度的可见视野这两个功能将为您提供距PerspectiveCamera给定距离的场景中可见的高度和宽度。// 获取任意深度的可见视野// from https://discourse.threejs.org/t/functions-to-calculate-the-visible-width-height-at-a-...

教程投影纹理1、投影纹理将相机矩阵和模型矩阵相乘,最后得到纹理采样坐标:顶点着色器:uniform mat4 viewMatrixCamera;uniform mat4 projectionMatrixCamera;varying vec4 vTexCoords;void main() { ... // in: position,顶点局部坐标 // in: mode...

WebGL 对于我来说操作太繁琐了;ThreeJS太方便了,但是相关的数学计算也封装起来了,但是这一部分又很重要,所以通过ThreeJS 来学习底层相机的实现。这是一篇学习笔记,学习的内容出自:代码,教程。更多的代码也来自ThreeJS库。WebGL本不存在相机,想的多了也就有了。模拟ThreeJS相机1、着色器代码glsl.fragmentShader.jsexport ...

参考ThreeJS 中显示小窗口这种效果的主要代码:function initStage() { ... // 不要自动清除 renderer.autoClear = false; renderer.setClearColor(0x000000, 0.0); // 创建2个相机 mainCamera, viceCamera ...}// 循环渲染函数functio...

代码参考ThreeJS中CameraHelper的使用想达到这种效果,都必须使用2个相机。一个是屏幕相机,最终投影成像在屏幕一个是带相机助手的相机就如上图2所示,屏幕相机的投影是整个屏幕(左右两个小窗口共同组成),带相机助手的投影是左面的画面。伪代码:// 屏幕相机let camera = new THREE.PerspectiveCamera(45, 1, 0.01, 3...

翻译自: https://ics.media/entry/15321/对WebGL开发有用的重要三角公式和概念的摘要（Three.js）我经常听到三角函数对于创建3D内容至关重要。我很惊讶，因为几乎没有在网站创建中使用三角函数的情况，但是当我学习WebGL时，我意识到很多情况下在3D中使用三角函数。因此，在本文中，我们总结了3D内容制作中经常使用的基本公式和概念。我这次解释的内容很简单，...

翻译自: 如何在运行时获取Three.js Shader源代码获取运行时Three.js Shader源码Three.js使用棘手的字符串连接系统根据场景中的数据（例如当前的灯光数量）构建其着色器。在后台，至少从r100开始，Three.js 使用一个称为的函数构建着色器initMaterial，该函数仅在渲染时发生（如果材质是新的或needsUpdate已设置）。要使Three.js运行...

引子: 这是曾经的一道webgl面试题。出处利用shader绘制一个带经纬度的球体最终效果:代码1、创建几何球体这部分很基础,很快带过然后进入shader。App.jsclass App { ... addObj() { // 几何球体 const geometry = new THREE.SphereBufferGeometry(30, 64, 64...

翻译自: https://tympanus.net/codrops/2019/11/13/high-speed-light-trails-in-three-js/代码: https://github.com/dslming/learningComputerGraphics/tree/master/ThreejsLearning/017-InfiniteLights无限灯光-第二阶段[...

翻译自: https://tympanus.net/codrops/2019/11/13/high-speed-light-trails-in-three-js/代码: https://github.com/dslming/learningComputerGraphics/tree/master/ThreejsLearning/017-InfiniteLights无限灯光灵感来自 海...

参考: https://thebookofshaders.com/07/?lan=ch绘制一个圆1、通过控制距离-方法一(distance)让距离圆心坐标(0.5, 0.5)的距离作为该点的颜色值。float pct = distance(st,vec2(0.5));gl_FragColor = vec4(vec3(pct), 1.);2、通过控制距离-方法二(dot)dot...

做一个黑框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内建函数s...

前言传统shader学习只能在opengl中学习,现如今借助webgl,在浏览器中就可以轻松写shader代码。诸如shadertoy等实现了非常炫酷的网页效果。本教程就使用three.js库开始shader学习之旅。参考资料shader教程: https://thebookofshaders.com/shader 框架搭建一个最基本的基于three.js 的 shader框架。...

https://qiita.com/kitasenjudesign/items/1657d9556591284a43c8输入和输出VertexShader没有输入在2D平面上输出gl_Position（vec4）顶点坐标输出gl_PointSize（float）点的大小FragmentShader输入gl_FrontFacing（bool）多边形的前后布尔值输入gl_Fr...