practical texturing (webgl )
TRANSCRIPT
Practical Texturing(WebGL)CS559 – Spring 2018
Lecture 23April 3 2018
In brief …
Starting with a simple model …
In brief …
… associate texture coordinates with primitives(can now do procedural textures)
Caveat : Issues with sampling & aliasing
In brief …
… load an actual image, use mipmap(and figure out how to use it from shaders)
Caveat : Loading files, cross-origin issues
In brief …
… then combine texture with color
In brief …
… then combine texture with color, or lighting
Add-ons …
Repeating/clampingTexture coordinates
Add-ons …
Multiple textures
Add-ons …
Bump mapping
More effectsnext week
Texture coordinatesjsbin.com/pitetahihu/edit
.jsstart(){
initShaders();sendData();draw();
}
Texture coordinatesjsbin.com/pitetahihu/edit
.jsstart(){
initShaders();sendData();draw();
}
fragmentShader
vertexShader
Texture coordinatesjsbin.com/pitetahihu/edit
.jsstart(){
initShaders();sendData();draw();
}
Texture coordinatesjsbin.com/pitetahihu/edit
.jsstart(){
initShaders();sendData();draw();
}
Aliasingjsbin.com/pitetahihu/edit
Mismatch between:Texture feature size (color tiles)Fragment size
Texturing with imagesjsbin.com/varefelatu/edit
(texture image)
The full fixed-function pipeline (1992)Application
Program
GraphicsDriver
VertexProcessing
(TCL)
CommandBuffer(TriangleQueue)
Vertex
Queue
Vertex
Cache
Assembly
TriangleProcessing
Rasterize PixelProcessing
Pixel
Queue PixelTests
FrameBuffer
TextureMemory Rendertotexture
Vertexshading
GeometryShading
PixelShading
8 TMU minimum(default : texture unit 0)
Texturing with images.jsstart(){
initShaders();sendData();initTextures();draw()
}
jsbin.com/varefelatu/edit
Texturing with images.jsstart(){
initShaders();sendData();initTextures();draw()
}
jsbin.com/varefelatu/edit
Texturing with images.jsstart(){
initShaders();sendData();initTextures();draw()
}
jsbin.com/varefelatu/edit
Texturing with images.jsstart(){
initShaders();sendData();initTextures();draw()
}
jsbin.com/varefelatu/edit
Texturing with images.jsstart(){
initShaders();sendData();initTextures();draw()
}
Optionsgl.TEXTURE_2Dgl.TEXTURE_CUBE_MAP
jsbin.com/varefelatu/edit
Texturing with images.jsstart(){
initShaders();sendData();initTextures();draw()
}
Optionsgl.LINEAR_MIPMAP_LINEARgl.LINEAR_MIPMAP_NEARESTgl.NEAREST_MIPMAP_LINEAR
jsbin.com/varefelatu/edit
Texturing with images
.jsstart(){
initShaders();sendData();initTextures();draw()
}
fragmentShader
attach to TMU #0
jsbin.com/varefelatu/edit
Texturing with images
.jsstart(){
initShaders();sendData();initTextures();draw()
}
fragmentShader
jsbin.com/varefelatu/edit
Texturing with images
.jsstart(){
initShaders();sendData();initTextures();draw()
}
fragmentShader
lookup returns vec4
jsbin.com/varefelatu/edit
Texturing with images(non-mipmap filters)
.jsstart(){
initShaders();sendData();initTextures();draw()
}
Optionsgl.LINEARgl.NEAREST
jsbin.com/varefelatu/edit
Texturing with images(asynchrony issues)
jsbin.com/qoyudupoqe/edit
.jsstart(){
initShaders();sendData();initTextures();draw()
}
Texturing with images(cross-origin issues)
jsbin.com/qoyudupoqe/edit
.jsstart(){
initShaders();sendData();initTextures();draw()
}
http://myurl.com/cube.js
Texturing with images(cross-origin issues)
Cross-origin resource sharing disallowedMore restrictive policy for Canvas drawing than viewing in web page (img tag)Some browsers even don’t recognize “file://” as a shared origin
jsbin.com/varefelatu/edit
Texturing with images(cross-origin issues)
jsbin.com/qoyudupoqe/edit
Must be CORS-approved
Texturing with images(cross-origin issues)
jsbin.com/gekavofimu/edit
Texturing and lightingjsbin.com/kecizocura/editjsbin.com/voyexukevi/edit
fragmentShader
Multiple texturesjsbin.com/popojatufi/edit
fragmentShader
.jsstart(){
initShaders();sendData();initTextures();draw()
}
Multiple texturesjsbin.com/weluvebodu/edit
.jsstart(){
initShaders();sendData();initTextures();draw()
}