Skip to content

Commit fc4c265

Browse files
peteroupcpeteroupc
committed
Add linear gradient texture demo
1 parent 717cf1a commit fc4c265

File tree

6 files changed

+99
-2
lines changed

6 files changed

+99
-2
lines changed

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,8 @@ using evaluators to generate parametric surfaces.
4141
* [textured.html](https://peteroupc.github.io/html3dutil/textured.html) - Demonstrates loading textures
4242
and applying them to 3D shapes.
4343
* [tris.html](https://peteroupc.github.io/html3dutil/tris.html) - Demonstrates a particle system.
44+
* [gradient.html](https://peteroupc.github.io/html3dutil/gradient.html) - Demonstrates generating a custom
45+
texture -- a linear gradient from one color to another.
4446

4547
Examples
4648
---------

‎glmath.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -142,6 +142,17 @@ a[1]*=scalar;
142142
a[2]*=scalar;
143143
return a;
144144
},
145+
146+
/**
147+
* Multiplies a 3-element vector by a factor
148+
* and returns a new vector with the result.
149+
* @param {Array<number>} a A 3-element vector.
150+
* @param {number} scalar A factor to multiply.
151+
* @return {Array<number>} The parameter "a".
152+
*/
153+
vec3scale:function(a,scalar){
154+
return GLMath.vec3scaleInPlace([a[0],a[1],a[2]],scalar);
155+
},
145156
/**
146157
* Does a linear interpolation between two 3-element vectors;
147158
* returns a new vector.

‎glutil.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -832,7 +832,11 @@ var Texture=function(name){
832832

833833
/**
834834
* Sets the wrapping behavior of texture coordinates that
835-
* fall out of range when using this texture.
835+
* fall out of range when using this texture. This setting
836+
* will only have an effect on textures whose width and height
837+
* are both powers of two. For other textures, this setting
838+
* is ignored and out-of-range texture coordinates are
839+
* always clamped.
836840
* @param {boolean} clamp If true, the image's texture
837841
* coordinates will be clamped to the range [0, 1]. If false,
838842
* the image's texture coordinates' fractional parts will

‎gradient.html‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<meta charset=utf-8>
2+
<head>
3+
<script type="text/javascript" src="glutil_min.js"></script>
4+
<script type="text/javascript" src="frame.js"></script>
5+
</head>
6+
<body>
7+
<canvas width="600" height="450" id=canvas></canvas>
8+
<script id="demo">
9+
//<!--
10+
/*
11+
Written by Peter O. in 2015.
12+
13+
Any copyright is dedicated to the Public Domain.
14+
http://creativecommons.org/publicdomain/zero/1.0/
15+
If you like this, you should donate to Peter O.
16+
at: http://upokecenter.dreamhosters.com/articles/donate-now-2/
17+
*/
18+
19+
// Generates a linear gradient in the horizontal direction.
20+
// This function demonstrates generating a custom texture.
21+
function horizontalGradient(color1,color2){
22+
color1=GLUtil.toGLColor(color1);
23+
color2=GLUtil.toGLColor(color2);
24+
var arr=[];
25+
var size=32;
26+
for(var i=0;i<size;i++){
27+
arr.push(
28+
GLMath.vec4scaleInPlace(GLMath.vec4lerp(color1,color2,i/(size-1)),255)
29+
)
30+
}
31+
var gradient=[]
32+
var i=0;
33+
for(var y=0;y<size;y++){
34+
for(var x=0;x<size;x++,i+=4){
35+
gradient[i]=Math.floor(arr[x][0])
36+
gradient[i+1]=Math.floor(arr[x][1])
37+
gradient[i+2]=Math.floor(arr[x][2])
38+
gradient[i+3]=Math.floor(arr[x][3])
39+
}
40+
}
41+
return Texture.fromUint8Array(
42+
new Uint8Array(gradient),size,size).setClamp(true);
43+
}
44+
45+
// Create the 3D scene; find the HTML canvas and pass it
46+
// to Scene3D.
47+
var scene=new Scene3D(document.getElementById("canvas"));
48+
var fc=new FrameCounterDiv(scene)
49+
scene.setPerspective(45,scene.getAspect(),0.1,100);
50+
scene.setLookAt([0,0,40]);
51+
// Generate a red-blue gradient texture
52+
var tex=horizontalGradient("red","blue");
53+
var mesh=Meshes.createBox(10,20,20);
54+
var shape=scene.makeShape(mesh).setTexture(tex)
55+
scene.addShape(shape);
56+
var rotation=[0,0,0];
57+
GLUtil.renderLoop(function(){
58+
fc.update();
59+
rotation[0]+=0.5;
60+
rotation[1]+=1;
61+
var q=GLMath.quatFromTaitBryan(rotation);
62+
shape.setQuaternion(q);
63+
scene.render();
64+
})
65+
//-->
66+
</script>
67+
<script>
68+
window.addEventListener("load",function(){
69+
var e=document.createElement("pre")
70+
e.innerHTML=document.getElementById("demo").textContent.replace(/</g,"&lt;")
71+
document.body.appendChild(e)
72+
})
73+
</script>
74+
</body>

‎stl.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@
2525
var scene=new Scene3D(document.getElementById("canvas"));
2626
scene.setClearColor("white");
2727
var camera=new Camera(scene,45,1,1000).setDistance(80);
28-
var mat=new Material("red","red")
2928
GLUtil.loadStlFromUrl("holder.stl").then(function(mesh){
3029
scene.addShape(scene.makeShape(mesh).setColor("red"));
3130
},function(err){

‎tutorials/textures.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,3 +31,10 @@ The variables `textureURL1` and `textureURL2` are URL textures.
3131
}
3232
});
3333
```
34+
35+
### Demos
36+
37+
* [textured.html](https://peteroupc.github.io/html3dutil/textured.html) - Demonstrates loading textures
38+
and applying them to 3D shapes.
39+
* [gradient.html](https://peteroupc.github.io/html3dutil/gradient.html) - Demonstrates generating a custom
40+
texture -- a linear gradient from one color to another.

0 commit comments

Comments
 (0)