因为只是想分享ghcjs和webgl的使用经验,所以很多地方说的很粗,因为涉及的知识确实很多, 推荐两本书,一本haskell基础的 learn you a haskell for great good,中文翻译为haskell趣学, 网上有在线版.一本webgl入门的 webgl programming guide 中文翻译webgl编程指南.

我想写一个系列的文章,在写了一定数量后会在github创个项目分享配套的代码.

关于webgl

现阶段的webgl是opengl ES2.0,后者在移动设备上取得了很大的成功,而在web上还在与flash争地盘. 我没用过flash,我用过opengl,感觉太过程式了,像历史遗留产物(据说vulkan很不错,目标也是取代opengl). 但是平常写应用很少直接使用这么底层的Api,都是用的别人写好的框架,像基于webgl的three.js就是很不错的, 几何图形,灯光什么的都封装好了,只需打个响指,pia,阳光就洒落在了一个球体上,有如上帝一般.

但是了解底层一点的东西总是很有必要的,这是突破框架限制和跳出框架思维必须的知识.

上篇文章中我们代码已经写到获取gl::WebGLRenderingContextBase了,而这就是我们webgl世界的起点. 先看代码

  let vertShaderSource = decodeUtf8 $(embedFile "shader/graph.vert")
fragShaderSource = decodeUtf8 $(embedFile "shader/graph.frag")
frg <- createShader gl FRAGMENT_SHADER
shaderSource gl frg fragShaderSource
compileShader gl frg vert <- createShader gl VERTEX_SHADER
shaderSource gl vert vertShaderSource
compileShader gl vert prog <- createProgram gl
attachShader gl prog frg
attachShader gl prog vert
linkProgram gl prog
useProgram gl prog

所谓的“现代”的opengl程序都是基于着色器的,以前是用的绘制指令来绘制线段和三角形,由此组成图形, “现代”的opengl把这些指令的脏活累活交给了着色器.

在webgl中我们用的是顶点着色器(vertex shader)和片元着色器(fragment shader).着色器是用着色器语言写成 的,在程序的运行时加载的代码.在我们的程序中,我们把他们写在两个文件下面,shader/graph.vert和 shader/graph.frag.其代码如下

shader/graph.vert

void main() {
gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
gl_PointSize = 10.0;
}

shader/graph.frag

大专栏  montagyrceCode c">void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}

着色器语言是门类C语言,在这里不细说.我们的目标是haskell.

在let语句中我们用embedFile在编译时将文件读取为bytestring,再用decodeUtf8得到Text,这与我们直接 将shader文件里的内容写成string是等价的.如果用js来解释的话,那么

var vertShaderSource =
'void main(){n' +
'gl_Position = vec4(0.0, 0.0, 0.0, 1.0);n' +
'gl_PointSize = 10.0;n' +
'}n';

紧接着我们创建着色器对象(createShader), 将着色器资源载入这个对象(shaderSource),最后编译这个载有着色器的对象(compileShader). 这是一个完全过程式的代码,这就是opengl在运行时所做的事情,一步一步的怎么操作,你都要告诉它.后面我们还会看到 很多类似这样的操作.

我们根据顶点和片段这两个着色器创建了两个编译好的着色器对象,然后我们创建一个program对象来组装这两者, 通过attachShader和linkProgram后,我们就可以使用(useProgram)了.这时我们的着色器工作就做完了.

着色器所做的工作都是程序在运行时GPU所做的工作,现在我们回到CPU里面来,下面我们控制CPU给GPU发送命令, 来完成我们最简单的webgl程序.

clearColor gl 0.0 0.0 0.0 1.0
clear gl COLOR_BUFFER_BIT
drawArrays gl POINTS 0 1

clearColor 是设置背景色,后面的四个数字参数是rgba.我们这里设置的是黑色. clear是清空现在画布上的缓存内容,这是准备绘制的一个过程.参数COLOR_BUFFER_BIT表示我们清空了颜色缓冲区. 最后drawArrays就是我们的绘制程序了,这里是绘制了一个POINTS.

我们这个最简单的ghcjs-webgl程序就这么结束了,当编译完后,启动一个web服务器,根目录指向./dist/build/example/example.jsexe ,然后在浏览器打开,就能看到一个400X400的黑框里有个红色的小方块.

后记

上面我们的着色器program在CPU中并没有用到,下篇我会讲讲如何与着色器交互.

montagy的更多相关文章

随机推荐

  1. 基于libcurl的GET与POST(HTTP1.1)

    #include <stdio.h> #include <curl/curl.h> bool getUrl(char *filename) { CURL *curl; CURL ...

  2. 用Chrome网页获取PDF?

    在网页浏览的时候,我常常想保存网页上的内容 这时候有几种选择,要么copy and paste,要么windows自带截图,要么就是借用tencent的截图工具... 但是对于一些用chrome预览的 ...

  3. 在MyEclipse的Maven环境下,使用mybatis-generator插件自动生成映射文件(接口)及实体类

    在数据表比较多的情况下,手动编写sql映射文件和实体类,实在太多过繁琐,而mybatis-generator能自动生成这此东西,减少了重复性的工作量.mybatis-generator的配置容易出现问 ...

  4. java常见的 http 请求库比较

    java常见的http请求库有httpclient,RestTemplate,OKhttp,更高层次封装的 feign.retrofit 1.HttpClient HttpClient:代码复杂,还得 ...

  5. look and say 外观数列的python实现

    #look_and_say 外观数列 如果我们把 1 作为Look-and-say 数列的第一项,那么,它的前几项是这样的: 1, 11, 21, 1211, 111221, 312211, 1311 ...

  6. Python实现自动处理表格,让你拥有更多的自由时间!

    相信有不少朋友日常工作会用到 Excel 处理各式表格文件,更有甚者可能要花大把时间来做繁琐耗时的表格整理工作.最近有朋友问可否编程来减轻表格整理工作量,今儿我们就通过实例来实现 Python 对表格 ...

  7. iOS高仿微信项目、阴影圆角渐变色效果、卡片动画、波浪动画、路由框架等源码

    iOS精选源码 iOS高仿微信完整项目源码 Khala: Swift 编写的iOS/macOS 路由框架 微信左滑删除效果的实现与TableViewCell的常用样式介绍 实现阴影圆角并存,渐变色背景 ...

  8. 绿洲作业第二周 - Y3每日中文学习任务清单

    1. 本周仍是古诗学习周,老师已在“最美诵读”上布置本周需完成的任务,请孩子在“最美诵读”小程序中,结合老师发的学习任务清单,合理安排时间进行学习.如果孩子另有学习安排,可在周日(2.23)23:59 ...

  9. raw_input|active:|continue|break|

    a = "please" b = "say something:" c =a+b m = 0 a = True while a: m = int(raw_inp ...

  10. java连接外部接口获取数据工具类

    package com.yqzj.util; import org.apache.log4j.LogManager;import org.apache.log4j.Logger; import jav ...