webgl教程,pythonDicom灰度图转彩色

使用varying变量绘制颜色三角形1.demo效果2 .相关知识点2.1 varying变量说明2.2图形装配和灰度2.3插值过程3. varying变量使用过程3.1顶点着色器声明varying变量3.2元着色器

1.demo效应

如上图所示，画出了顶点不同颜色的三角形。是顶点着色器使用变量通过将值传递给片段着色器绘制的图表

2 .相关知识点在介绍2.1 varying变量之前，我们先学习了attribute和uniform变量。 varying变量的声明与它们一样，也有存储修饰符类型变量名的格式要求。例如varying vec4 v_Color。

varying变量的主要作用是从顶点着色器向片元着色器传输数据

2.2图形的组装和格式化

如上图所示，图形装配过程实际上是调用gl.drawArrays ()函数的过程，通过图形组装过程将图形的孤立点组装成几何图形。另一方面，光栅化在将组装好的图形变换为瓷砖的过程中，进行光栅化就可以得到构成图形的所有瓷砖。然后，片段着色器开始处理每个片段，计算颜色并将其写入缓冲区

2.3在插值过程的例子中，得到了渐变的三角形。实际上，我们只为顶点着色器的varying变量v_Color提供三角形顶点的颜色，并在顶点着色器将varying变量v_Color传递给面片着色器期间通过了内插过程。插值过程是两个顶点之间的所有面片；根据这两个顶点的颜色和分片数重新计算，并将每个分片的颜色信息传递给片段着色器的v_Color变量

3. varying变量对于在步骤3.1中使用顶点着色器声明varying变量的顶点着色器，请声明attribute变量a_Color和varying变量v_Color，然后使用main函数将a_Color分配给v_Color

//顶点着色器varvshader _ source=“”attribute vec4a _ position； n' //顶点位置信息' attribute vec4 a_Color； n' //顶点颜色信息' varying vec4 v_Color； n' //声明用于存储片元颜色信息' void main ()，({n' ' gl_Position=a_Position )的varying变量v _ color n '//变量a n' //将颜色数据传递给片段着色器，' }n '； 3.2在片段着色器中使用varying变量对于片段着色器，也必须首先声明varying变量v_Color。从而，片段着色器和顶点着色器通过v_Color变量建立通信信道，接收从顶点着色器发送的片段颜色信息，并向片段着色器的内置变量gl_FragColor分配接收到的颜色信息

//片段着色器varf shader _ source=“”precisionmediumpfloat； n' //安装精度' varying vec4 v_Color； n'//varying变量声明v_Color，接受从顶点着色器传递的切片元颜色信息' voidmain((n )//，并内置varying变量v_Color接收的颜色信息的变量3.3通过缓冲区对象将值创建类型化数组传递给attribute变量。此处创建的类型化数组用于存储顶点坐标和顶点颜色信息。看看评论吧。这个数组有三行，每行是顶点。以顶点1为例，前两个元素是顶点坐标，最后三个元素是顶点颜色信息。创建缓冲区对象并绑定和写入数据此步骤需要创建缓冲区对象，绑定目标，然后将包含创建的顶点坐标和颜色信息的类型化数组写入a_Position的分配缓存与开启。现在，让我们来看看函数3358www.Sina.com/的第五个和第六个参数。gl.vertexAttribPointer()是指每个顶点的大小，传递给FSIZE * 5。实际上，在缓存中每点取5个。 http://www此处也是第五个参数stride

> 的参数，第五个参数stride 与上一次分配a_Position一样，也值为FSIZE * 5，因为每个点五个元素没有改变。 第六个参数offset 这次设置为FSIZE * 2，因为每一个顶点的前两个元素是顶点坐标，后三个元素是颜色信息 //初始化顶点坐标和颜色function initVertexBuffers(gl) { var verticesColors = new Float32Array([ //顶点坐标顶点颜色 //------\ //---------\ 0.0, 0.5, 1.0, 0.0, 0.0, //顶点1 -0.5, -0.5, 1.0, 1.0, 0.0, //顶点2 0.5, -0.5, 0.0, 1.0, 0.0, //顶点3 ]) //创建缓冲区对象 var vertexColorBuffer = gl.createBuffer(); if (!vertexColorBuffer) { console.log('创建缓冲区对象失败！') return -1 } //将顶点坐标和颜色写入缓冲区对象 gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer) gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW) //获取类型化数组中每个元素的大小 var FSIZE = verticesColors.BYTES_PER_ELEMENT //获取着色器attribute变量a_Position的存储地址, 分配缓存并开启 var a_Position = gl.getAttribLocation(gl.program, 'a_Position'); gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 5, 0) gl.enableVertexAttribArray(a_Position) //获取着色器attribute变量a_Color的存储地址, 分配缓存并开启 var a_Color = gl.getAttribLocation(gl.program, 'a_Color'); gl.vertexAttribPointer(a_Color, 2, gl.FLOAT, false, FSIZE * 5, FSIZE * 2) gl.enableVertexAttribArray(a_Color) return verticesColors.length / 5} 4.demo代码 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head><body>  <canvas id="webgl" width="400" height="400"></canvas> <script> //顶点着色器 var VSHADER_SOURCE = '' + 'attribute vec4 a_Position;n' + //声明attribute变量a_Position，用来存放顶点位置信息 'attribute vec4 a_Color;n' + //声明attribute变量a_Color，用来存放顶点颜色信息 'varying vec4 v_Color;n' + //声明varying变量v_Color，用来存放片元颜色信息 'void main(){n' + ' gl_Position = a_Position;n' + //变量a_Position赋值给顶点着色器内置变量gl_Position ' v_Color = a_Color;n' + //将颜色数据传给片元着色器， '}n'; //片元着色器 var FSHADER_SOURCE = '' + 'precision mediump float;n' + // 设置精度 'varying vec4 v_Color;n' + //声明varying变量v_Color，用来接收顶点着色器传送的片元颜色信息 'void main(){n' + //将varying变量v_Color接收的颜色信息赋值给内置变量gl_FragColor ' gl_FragColor = v_Color;n' + '}n'; //初始化着色器函数 function initShader(gl, VSHADER_SOURCE, FSHADER_SOURCE) { //创建顶点着色器对象 var vertexShader = gl.createShader(gl.VERTEX_SHADER); //创建片元着色器对象 var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); //引入顶点、片元着色器源代码 gl.shaderSource(vertexShader, VSHADER_SOURCE); gl.shaderSource(fragmentShader, FSHADER_SOURCE); //编译顶点、片元着色器 gl.compileShader(vertexShader); gl.compileShader(fragmentShader); //创建程序对象program var program = gl.createProgram(); //附着顶点着色器和片元着色器到program gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); //链接program gl.linkProgram(program); //使用program gl.useProgram(program); gl.program = program //返回程序program对象 return program; } function init() { //通过getElementById()方法获取canvas画布 var canvas = document.getElementById('webgl'); //通过方法getContext()获取WebGL上下文 var gl = canvas.getContext('webgl'); //初始化着色器 initShader(gl, VSHADER_SOURCE, FSHADER_SOURCE); // 设置canvas的背景色 gl.clearColor(0.0, 0.0, 0.0, 1.0); //清空canvas gl.clear(gl.COLOR_BUFFER_BIT); //初始化顶点坐标和颜色 var n = initVertexBuffers(gl) //绘制三角形 gl.drawArrays(gl.TRIANGLES, 0, n) } //初始化顶点坐标和颜色 function initVertexBuffers(gl) { var verticesColors = new Float32Array([ //顶点坐标顶点颜色 //------\ //---------\ 0.0, 0.5, 1.0, 0.0, 0.0, //顶点1 -0.5, -0.5, 1.0, 1.0, 0.0, //顶点2 0.5, -0.5, 0.0, 1.0, 0.0, //顶点3 ]) //创建缓冲区对象 var vertexColorBuffer = gl.createBuffer(); if (!vertexColorBuffer) { console.log('创建缓冲区对象失败！') return -1 } //将顶点坐标和颜色写入缓冲区对象 gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer) gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW) //获取类型化数组中每个元素的大小 var FSIZE = verticesColors.BYTES_PER_ELEMENT //获取着色器attribute变量a_Position的存储地址, 分配缓存并开启 var a_Position = gl.getAttribLocation(gl.program, 'a_Position'); gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 5, 0) gl.enableVertexAttribArray(a_Position) //获取着色器attribute变量a_Color的存储地址, 分配缓存并开启 var a_Color = gl.getAttribLocation(gl.program, 'a_Color'); gl.vertexAttribPointer(a_Color, 2, gl.FLOAT, false, FSIZE * 5, FSIZE * 2) gl.enableVertexAttribArray(a_Color) return verticesColors.length / 5 } init() </script></body></html>