three.js-shader教程
DBBH
成都有合适webgl/webgpu岗位的请私信我
展开
-
基于three.js的shader入门教程十一
利用smoothstep画出抗锯齿圈圈背景函数解释分析背景这是源自JC大佬的shader这里主要用来做啥,2D这种绘制利用smoothstep可以绘制一个纯色抗锯齿的图形函数解释smoothstep函数原型https://thebookofshaders.com/glossary/?search=smoothstepfwitdh函数https://www.cnblogs.com/flyfox1982/p/11141638.htmlhttps://www.khronos.org/regis原创 2021-08-13 12:13:42 · 647 阅读 · 0 评论 -
基于three.js的shader入门教程 八
threejs交流群511163089后期特效先说下概念。比喻一下,就像先将物体都画在一张纸上,再对纸进行涂鸦(写一些shader),最后给你看这张纸。还能将纸画在另外一张纸上,继续涂鸦,涂鸦很多层造出神奇的效果。实质是使用了FBO,frame buffer object。在three里头封装之后名字是WebglRenderTarget,或者你都不用设置这个,使用他的EffectComposer。用target的栗子是webgl_rtt.html。别的就是webgl_p.原创 2020-05-14 10:37:51 · 772 阅读 · 0 评论 -
基于three.js的shader入门教程 十
threejs交流群511163089threejs交流群511163089threejs交流群511163089这是第300篇文章,咱们说点技巧吧。这个怎么做的喃 bloom就不说了 直接用的官网的那个东西。这些一蹦一跳的怎么做的喃。基于一个planebuffergeometry。interval里面更新数据就行了。这里基于plane的话,你可以在shadertoy学到神级操作。shader做了啥,就读当前像素的localY,看看是不是足够矮,高的就删除,是不是很清原创 2021-01-29 14:48:02 · 1771 阅读 · 0 评论 -
基于three.js的shader入门教程 九
threejs交流群511163089上回说到这个后期,可以涂鸦,或许你的作品是一张静止的很好看的图片,所以想要保留呐,咋个将图片弄到本地呐。let pixelBuffer = new Uint8ClampedArray(4 * w * h);renderer.readRenderTargetPixels(renderTarget, 0, 0, w, h, pixelBuffer);let imgData = new ImageData(pixelBuffer, w, h);createIm原创 2020-06-18 14:14:10 · 1066 阅读 · 0 评论 -
基于three.js的shader入门教程 七
threejs交流群511163089想想,最终显示的那个颜色,是不是vec4的一个东西。gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);尾巴上的position就是模型最原始的坐标,也就是建模软件里头看得见那种,不出意外应该是的。如果是一个20米的楼,那position.y是就是0-2...原创 2020-04-17 16:46:37 · 829 阅读 · 2 评论 -
基于three.js的shader入门教程 六
threejs交流群511163089UV效果可以做啥为了简单操作 使用PlaneBufferGeometry这个的uv会从00-11给你排好varying vec2 vUv;void main(){ vec2 uv=vUv;//这里不说if不好这个问题 简单的写一个效果if(uv.x<0.25)gl_FragColor=vec4(1.0,0.0,0.0...原创 2020-03-10 15:12:06 · 758 阅读 · 0 评论 -
基于three.js的shader入门教程 五
threejs交流群511163089UV贴图模型长的五颜六色的,一般都不是靠每个顶点带个color的attribute来的而是用的贴图那么贴图呐 图 是一个平面 坐标只有x和y 这就构成UV了 u就是x v就是y怎么贴 每个顶点还是带attribute 但是只需要带uv带上一个的xy这样在渲染这个顶点的时候 能在图上取xy处的颜色作为渲染色THREE里头你的模型如果带了U...原创 2019-12-19 15:32:21 · 747 阅读 · 0 评论 -
基于three.js的shader入门教程 四
threejs交流群511163089片源着色器 uniform这种uniform变量啊 传入之后 可以在顶点着色器用 也可以在片源着色器用uniform float a;这样 就是声明变量之前加一个uniform这样在顶点或者片源着色器里面声明一下 外面再传入一个值 就可以使用了这东西有啥用?较为简单的 这个栗子 我传入了uniform vec3 a是一个1 0 0 运行...原创 2019-12-09 18:13:53 · 850 阅读 · 0 评论 -
基于three.js的shader入门教程 三
threejs交流群511163089片源着色器前面提了,点会三个三个的构造成三角面,这个就是给三角面上色了。有varying这种开头的变量有uniform开头的变量varying vec3 a;这种变量 是从顶点着色器传来的你需要在顶点着色器也写一句var geometry = new THREE.SphereBufferGeometry(10);var mate...原创 2019-11-20 17:20:55 · 878 阅读 · 2 评论 -
基于three.js的shader入门教程 二
threejs交流群511163089顶点着色器这个是决定你那个点最后画在屏幕哪个位置的,最后xyz都是[-1,1]这么一个区间的值 z用来处理遮挡关系点的位置怎么传入呐 有VAO,VBO这些东西 但是我们基于threejs,emm,threejs给你封装了一下叫attributeattribute下有position字段normal字段uv字段等等,里面会装很多float像这样...原创 2019-11-19 15:38:56 · 1313 阅读 · 2 评论 -
基于three.js的shader入门教程 一
threejs交流群511163089扫盲一下shader是什么东西 这暂时不重要 这里重要的是写这个需要编程语言。threejs用的是glsl这款,语法跟C差不多。这个在web端暂时只有顶点着色器 片源着色器可以用,这俩是啥?模型是三角面构成的,每个点有个三维坐标。顶点着色器 一般是为了把你的模型的每个点投到屏幕上,上色的时候,你如果想看得见这个点,必须投到屏幕的可视坐标...原创 2019-11-15 08:57:38 · 2438 阅读 · 6 评论